w eb d esign concepts. the web design process design phase production phase distribution phase ...
TRANSCRIPT
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/