WWeb eb DDesign esign ConceptsConcepts

The Web Design The Web Design ProcessProcess Design Phase Production Phase Distribution Phase Maintenance Phase

Design Concepts: Summary Easy for viewer to see the purpose of

the site Appeal to your “audience” and their

needs Consistent from one page to another Easy to read Easy to navigate

Design PhaseDesign Phase

What do you want it to be about?

Site Goals & Objectives Type of WebsiteType of Website (personal, organizational,

commercial, or informational) Target MarketTarget Market

– Do you want your page to be accessed by as many people as possible or are you targeting a select group?

Design PhaseDesign Phase Target/Research Target/Research

Who is the ideal user of your page?

Target income, sex, or ages Determine what they like (design with the user in

mind)– what will draw them to your site – what will keep them coming back?– do they want to be informed or entertained

• if informed – what do they want to know?

Effective and affective - a Web Site is aesthetics, ergonomics, personality…

Design PhaseDesign Phase Target/Research Target/Research

Gear the colors, text, and images to your audience age and interests

Design PhaseDesign Phase Target/Research Target/Research

How is the user connecting to the web? - via older computers or high-speed access - most users will simply not wait longer than 10 seconds for a page to load. They will go elsewhere!

Design PhaseDesign Phase Target/Research Target/Research

What is the user’s level of web sophistication/ ease in using the Web?

for novice users, make sure your site is easy to navigate with few (if any) frames

What special needs may the users have? - accessibility needs (large print or audio for

disabled users) - international focus (translators & web

connection speed) - currency converters

Design PhaseDesign Phase Target/Research Target/Research

Feedback - provide a method for users to contact you

• Physical address• Map• Email link• Contact Form

Design Phase After you’ve done your research…

– create the Site Map: page titles, file names, basic concepts

– create the Mockup/WireFrame (layout/visual designlayout/visual design)

Visual DesignVisual Design A computer monitor’s screen resolution is the

horizontal width and vertical height of the computer screen - in pixels

The three most common screen resolutions (width x height) are – 640 x 480 (small)– 800 x 600 (most common)– 1024 x 768

You have no control over the user’s screen resolution!

Visual DesignVisual Design

Consistency - develop a unified look - all the pages look like they belong to the same site- use repetitive elements (color, text, graphics)

Organized, Usable & Navigable - easy to follow the flow of information & locate

information - ex: events in chronological order & people in

alphabetical order

Visual DesignVisual Design

Text, Link, & Background Colors Coordinate

- text & links stand out from the background Alignment

- line the information up, don’t center everything Don’t have the user scroll endlessly

- shouldn’t page down more than 3 times

Visual DesignVisual Design use of white space so it’s easier to read

Visual Design white space and solid colors increases

readability contrast calls attention to site navigation

Visual DesignVisual DesignDesign for the web world and not for the print world

focus the users eye toward the middle

Visual DesignVisual Design

Visual Design : Don’tsVisual Design : Don’ts not enough white space, hard to read

Visual Design : Do’s white space, readable, contrasting colors

Visual Design : Visual Design : ColorColor & & GraphicsGraphics Consistency/Continuity – develop a unified look Use complementary colorscomplementary colors Use contrastcontrast for attention Use repetitionrepetition for consistency One or two colors highlight - three or more confuse Primary colors are difficult on eyes Color Psychology:

– Warm colors suggest activity and power– Cool colors suggest tranquility and peace– Provide atmosphere - “I’m blue today”

Visual Design : Visual Design : ColorColor & & GraphicsGraphics

Visual Design : Visual Design : ColorColor & & GraphicsGraphics

Visual Design : Color & Visual Design : Color & GraphicsGraphics Graphics should have a purposepurpose and are

useful to the page – not just decorative Graphics should download quicklydownload quickly - don’t use large graphic file - size and

number of graphics influences the speed at which your page

loads Use thumbnail imagesthumbnail images that link to larger

images when larger images are necessary (ex: paintings/art galleries)

Visual Design : Color & Visual Design : Color & GraphicsGraphics

should “fit” the content of the page

repeat a few design elements throughout your site or page to create a sense of continuity

cluttered screens cause visual confusion

images should load quickly, in less than 30 seconds

fix images to they blend into the page background

Visual Design : Color & Visual Design : Color & GraphicsGraphics

Visual Design : Color & Visual Design : Color & GraphicsGraphics

Visual Design : Color & Visual Design : Color & GraphicsGraphics

don’t make the page too cluttered!

Visual Design: Color & Graphics

too many images can detract from the content

Visual Design : Color & Visual Design : Color & GraphicsGraphics

Visual Design: Color & Graphics

too much animation detracts from the text and content of the page

Visual Design: NavigationVisual Design: Navigation

organized - concise, easy to understand, descriptive

are instantly visible to user - underlined or clearly visible so users know that

they are links (breadcrumbs) logical arrangement consistency/harmonize across the site and

within each page users always know where they are within the

site and on what page the are currently on provide multiple ways to navigate across the

site (not sequential like the print world)

Visual Design : Don’tsVisual Design : Don’ts

Blinking Animation – use sparingly & with a purpose

– Under construction signs– Animated email graphics– Multiple animations one page– Large animations that detract

Junky advertising Sideways Scroll Frame scroll bars in the middle of a page

Content Concepts: TextContent Concepts: Text Catchy titles Say it!

– be brief and to the point– be 50% of the print content

Chunks of information - phrases Organized & logical - so users can get to the info they want quickly - use lists Inverted newspaper style - most important information

first, summarized Leave lots of white space ex: between paragraphspeople don’t like to read lots of

text on the Web

Content Concepts : TextContent Concepts : Text Font size

– large enough to read but not so large to create lots of scrolling

To set text apart: – use headings, sub-headings, lists– strong and emphasis to highlight – horizontal rules to set off sections – use color with text to illustrate

Check your spelling!

Content Concepts: Texttoo wordy!

Content Concepts : TextContent Concepts : Text

Don’t underlined text for anything but links.

Link text shouldmake sense.

Click here doesn’t tell your viewer what is at on the “linked” page!

Content Concepts : TextContent Concepts : Text•align text for readability (centered text is harder to read)•similar colors for scan ability•consistent size for readability

Production PhaseProduction Phase

Create a mockup Perform usability tests Redefine the mockup Create the site itself

ProductionProduction PhasePhase Test & Retest - test across various browsers, operating systems

& computers - different browsers interpret HTML differently so

pages display differently) - test the latest browsers plus older browsers

Distribution PhaseDistribution Phase FTP - bring the site up live - server with 24-hour access (at your home, via an

ISP, or via a web space provider) Check It Out to make sure it works! Publicize Register with search engines

Maintenance PhaseMaintenance Phase Date It! - include an update date (increases the chance

they will revisit your site) Establish an Update Schedule - determine the amount of time needed for adding

& updating content (for a small site, this may only involve two or three hours a month)

Link checker (avoid dead links) Feedback - respond to email Track usage statistics Sign, Copyright, Copyright Date Your Pages!

The End

Have fun creating websites!

More Info:http://www.lindabaker.org/