web design
TRANSCRIPT
Visually communicate with your design
Serena Carpenter
http://serenacarpenter.com
• Contrast– Impatient scanner– Variations in size guide eyes
• Western cultures read from left to right, top to bottom – place important information top-left
• Alignment– Invisible border– Uniform
• Repetition – All pages are a coherent whole and single page (font, size,
color)– Identity– Professional
• Proximity– Pictures, bold, color, hierarchy– Headlines should close to their paragraphs– Text – natural attraction
Contrast
Alignment – Invisible grid
Proximity
Paging vs. Scrolling
• Primary content above the fold
• Paging is better for reading time, comprehension, and search time
• Perception of site efficiency• Promotes comprehension• Satisfaction with the site• Looks professional
Monitor Resolution
• Pixels of resolution– 1024 X 768 - 36% (Jan. 2009)
• Make your pages 950 px wide
– 800 X 600 (15 inch monitor) – 4%– Higher than 1024 – 57%
Navigation
Stick with Muted ColorsAnd Think about Your Intended Audience
• Dark color for text, light background
• Gender neutral• Bright reds, oranges,
yellows, or lime green backgrounds are visually tiring and reduce time spent– Restrict bright colors to a few
high-impact words and accents
• black/white/gray color = sophistication, cleanness, and reliability
• Black (Evil, power, reliable)• White (purity, peace)• Purple (creativity, passion,
spiritual)• Brown (stable, strong,
tranquil)• Pink (love, friendship,
compassion)• Red (strength, passion, energy,
heat, aggression)• Yellow (warmth, happy)• Blue (trust, calm, sadness)• Green (nature, abundance,
sadness)• Orange (energy, distrust,
warmth)
Images
• Looking room• Rule of thirds
– add “visual interest” by placing the center of interest on or near one of the four sweet spots “where the vertical and horizontal lines intersect”
• Photographs that display emotion capture the human condition and bring the viewer into the photo – Do not use meaningless photos and graphics
What is typography?
Typography is not picking a cool font.
“to honor the content it sets—to enhance legibility and embody the character of the words within.”
Jeff Croft, Web designer
“the mechanical notation and arrangement of language.”
Type & Typography by Phil Baines
White space unclutters
• Space between the elements on a page– Affects reading speed and comprehension
Stick with narrow columns
Optimal readability, running text columns such as your main body copy should be somewhere between 45 - 75 characters including spaces (10 -12 words per line).
.
Basic Rules
• Draw attention to itself before it will be read
• Legibility
– Always use dark text on a light background• Computer screens have much greater black/white
contrast than the printed page. – off-black to pure black on white backgrounds– very light gray instead of pure white on black
backgrounds.
• Use web safe fonts
Robert Bringhurst The Elements of Typographic Style
Font• Serif fonts guide the reader
– Main body – requires sustained reading
– Times New Roman design for The Times in 1932
• Great for text, not for artwork
• Sans serif (1960) – Helvetica and Arial– Take up less space– Grab attention
• Headlines, information signs – distance, – Add to legibility– Perceived to be Stable, Practical, Mature, and Formal
• Sans Serifs better for the Web because they are easier to read on low-resolution, pixel-based computer screens – Disagree
• Perceived professionalism, believability, trustworthiness, and future use intentions
• Feminine
Font• Verdana (1996)
– Designed for the computer screen• Georgia (1993) most popular Serif – contrasts well with
Verdana– Developed computer serif fonts– Georgia vs Times New Roman
• Wider and flatter ends
• Pair contrasting fonts– Most often, the serif
is used for body text and the
sans serif for headers,
but this can be reversed– http://www.typetester.org/
• comparing core web fonts and creating a successful stack
Font tips• No more than three typefaces on a single Web page
• Choose different font for design
• Keep body text above 10 pixels• No centered text
• Choose a font that represents your content (Typomania)– Plump letters – restaurant– Solid, thick letters – reliable– Jagged letters – sci-fi, dark
• Change font size to direct reader
Increase Line Spacing
Links• Links coordinate with page colors
• Underlined links
• Double-check links
• Do not create site for you, it is for your readers
• Communicate• Less is more• Treat text as user
interface
Design your banner
• http://designm.ag/inspiration/top-sources-logo-design-inspiration/
• Google “color” picker
Design your personal page
• Home• Contact • About
• Navigation• Colors• Logo name• Video• Updated resume• Collect articles and
scan them• Professional email• Write your bio
Page-level design
Tree DiagramSite-level Design
Future Agenda
• Thurs - Photoshop and Practice banner
• Tues - Banner in class
• Thurs – Site credibility and Designing group projects
• Tues (April 2) – HTML and Banner is due
• Thurs – using Dreamweaver