Visually communicate with your design Serena Carpenter http://serenacarpenter.com

C ontrast Impatient scanner Variations in size guide eyes Western cultures read from left to right, top to bottom – place important information top-left A lignment Invisible border Uniform R epetition All pages are a coherent whole and single page (font, size, color) Identity Professional P roximity Pictures, bold, color, hierarchy Headlines should close to their paragraphs Text – natural attraction

C ontrast

Impatient scanner

Variations in size guide eyes

Western cultures read from left to right, top to bottom – place important information top-left

A lignment

Invisible border

Uniform

R epetition

All pages are a coherent whole and single page (font, size, color)

Identity

Professional

P roximity

Pictures, bold, color, hierarchy

Headlines should close to their paragraphs

Text – natural attraction

Contrast

Alignment – Invisible grid

Repetition http://www.cnn.com/

http://www.cnn.com/

Proximity

Paging vs. Scrolling Primary content above the fold Paging is better for reading time, comprehension, and search time

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

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%

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 Colors And 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)

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

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?

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

“ 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

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). .

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

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

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

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

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

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

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

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

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

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

Home

Contact

About

Navigation

Colors

Logo name

Video

Updated resume

Collect articles and scan them

Professional email

Write your bio

Page-level design

Tree Diagram Site-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

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