Web Design

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

Repetition

• http://www.cnn.com/

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