Basic Web Design Considerations CS /6/07

Basic terms Web page Web page Web site Web site Home page Home page Sub pages Sub pages

Overall focuses Purpose driven Purpose driven Audience focused Audience focused Consistently “voiced” Consistently “voiced”

Planning Framing Framing Diagram all pages in the site and connections between them Diagram all pages in the site and connections between them Site level Site level Storyboarding Storyboarding Make a rough drawing of individual pages Make a rough drawing of individual pages Page level Page level

Page design Many page considerations, including: Many page considerations, including: Dimensions Dimensions Layout Layout Colors Colors Navigation Navigation Credibility (copyright, author(s), etc.) Credibility (copyright, author(s), etc.) Text Text Graphics Graphics

Monitor resolutions

Page dimensions “Safe” to assume 800 x 600 “Safe” to assume 800 x 600 With sidebars, etc., max width of 750px With sidebars, etc., max width of 750px Not all users maximize windows Not all users maximize windows

Page dimensions Other notes: Other notes: “Liquid” vs. fixed-width layouts “Liquid” vs. fixed-width layouts Browser differences (IE ~79%, Firefox ~15%) Browser differences (IE ~79%, Firefox ~15%) Mobile-friendly websites Mobile-friendly websites

Page layout Templates Templates Helpful to design beforehand, whether self- made or downloaded / purchased Helpful to design beforehand, whether self- made or downloaded / purchased Content location Content location Most important content visible immediately Most important content visible immediately Top-left corner Top-left corner

Page design considerations Blinking / animation Blinking / animation Focus on content / function Focus on content / function High-tech components High-tech components Download speed Download speed Frames Frames Moderation Moderation

Color Consider overall color scheme Consider overall color scheme Contrasting colors for text Contrasting colors for text Include “white” space Include “white” space

Navigation Links Links Keep button look consistent across all pages Keep button look consistent across all pages Provide equivalent text links for any image links Provide equivalent text links for any image links Check, double-check, triple-check your links Check, double-check, triple-check your links

Credibility Attribution Attribution Give credit to outside sources Give credit to outside sources Contact info Contact info Regularly updated content Regularly updated content

Credibility Copyright notice Copyright notice Personal info Personal info Privacy policy Privacy policy Spelling / grammar Spelling / grammar

Text Font Font Serif (i.e. Times) vs Sans Serif (i.e. Arial) Serif (i.e. Times) vs Sans Serif (i.e. Arial) Cross-browser support Cross-browser support Font size Font size Relative sizes, not fixed pixels Relative sizes, not fixed pixels Do not make default size too small Do not make default size too small

Text Font color Font color Readability Readability Moderation Moderation Bold / italics Bold / italics Use rarely – for emphasis Use rarely – for emphasis Underlining Underlining Only for links Only for links

Text Alignment Alignment Use left-justified text for large text sections Use left-justified text for large text sections Justified paragraphs vs. “ragged edge” Justified paragraphs vs. “ragged edge”

Graphics Moderation Moderation Keep image files small Keep image files small Every graphic must have a purpose Every graphic must have a purpose

Overall Consistency Consistency Users can move from page to page comfortably and intuitively Users can move from page to page comfortably and intuitively Usability Usability The site makes it easy to accomplish what it was meant to accomplish The site makes it easy to accomplish what it was meant to accomplish