3. Choose Images Wisely

1. Learn Design Principles & Elements

2. Refine Typography

4. Edit Content

5. Link Intuitively

6. Embrace CSS3

7. Consider White Space

8. Be Responsive

9. Remember Form Follows Function

10. Keep it Classic

LEARN DESIGN PRINCIPLES & ELEMENTS

1

The elements of design are the fundamental building blocks of art.

Wikipedia: Design Elements & Principles

DESIGN ELEMENTS• Line • Shape/Volume • Texture • Illusion of

Space • Illusion of

Motion • Value • Color

Design Basics, David A. Lauer & Stephen Pentak

The principles of design describe how the elements of design come together

to create a design.

Wikipedia: Design Elements & Principles

DESIGN PRINCIPLES

• Unity • Emphasis/Focal

Point • Scale/Proportion • Balance • Rhythm

Design Basics, David A. Lauer & Stephen Pentak

drupal.org

GRID SYSTEM

drupal.org (grid produced by 960 Gridder)

GRID SYSTEM

drupal.org

GRID SYSTEM

thegreatdiscontent.com (style sheet)

CSS GRID

apple.com

Illusion of space and breaking of the grid

Selective color usage

Clear hierarchy

Good balance

MINIMAL DESIGN EXAMPLE

redtiki.com.au

Illusion of space and breaking of the grid

Selective color usage

Clear hierarchy

Good balance

SATURATED DESIGN EXAMPLE

REFINE TYPOGRAPHY

2

www.lukew.com/ff/entry.asp?1288

WEB TYPOGRAPHY ADVICE

www.lukew.com/ff/entry.asp?1288

WEB TYPOGRAPHY ADVICE

Good typography is invisible. Don’t make me think about how to

read, just let me read.

Jason Santa Maria, An Event Apart Presentation

www.lukew.com/ff/entry.asp?1288

WEB TYPOGRAPHY ADVICE

There are no rules in typography, only guidelines and best practices.

Jason Santa Maria, An Event Apart Presentation

www.lukew.com/ff/entry.asp?1288

WEB TYPOGRAPHY ADVICE

Bigger is better. Always err on the side of making

things bigger rather than smaller.

Jason Santa Maria, An Event Apart Presentation

www.lukew.com/ff/entry.asp?1288

KEEP THIS IN MIND

Typography is hard. There are tons of fonts out there and

people go to school to study it.

Jason Santa Maria, An Event Apart Presentation

typekit.com

FONT OPTIONS

robedwards.org

Consider your style. Then make sure your type

choices conform.

FONT CIRCUS

fusionbundle.com

Fits illustrative style

Restricted to “headers”

Upper and lower case offers variation

DISPLAY FONTS

corporateriskwatch.com

Balance of two typefaces (serif & sans serif)

creates further visual interest and depth

Dramatic scale variation gives page energy and hierarchy

ELEGANT TYPEElegance through Subtlety

Use of italic sets apart navigation

WEB TYPOGRAPHY ADVICE

If nothing else... Consider scanability and readability.

socialwork.illinois.edu

READABILITY

Serif fonts are difficult to scan and read in large doses

Serif fonts work well in headers and pullouts

business.illinois.edu

READABILITY

Too much bold text, or a heavy font can

weigh the page down and look daunting

Weight matters

engineering.illinois.edu

READABILITY

Small type and long line lengths are difficult to read

Wide leading and thin paragraph spacing blends all the page text together

alistapart.com

READABILITY

Optimal line lengths

Good spacing between headers and paragraphs

Nice weight variation between headers and paragraphs

cnn.com

READABILITY

Optimal line lengths

Good paragraph spacing

CHOOSE IMAGES WISELY

3

A photo is an image. An image isn’t necessarily a photo.

There is no need to use generic images. Content naturally produces relevant images.

markhobbs.net

Info graphics such as charts, graphs, & tables

can add color & lines to your page

Headers can serve as graphics to bring visual

interest to a page

HEADERS & INFO GRAPHICS

apple.com

Icons can establish visual identities

Icons can act as visual entry points into your

content

ICONS

blog.squarespace.com

Who needs a photo? Type alone can draw

your eye in

Large scale type can quickly bring visual

interest to your page

TYPE AS IMAGE

futureofwebdesign.com

Buttons often benefit from extra visual

emphasis

Navigation can easily act as image

NAVIGATION & BUTTONS

dance.illinois.edu

Always produce the smallest file size

possible, however large your image

FILE SIZE MATTERS

CROP & EDIT

ORIGINAL VERSION

CROP & EDIT

EDITED VERSION

CROP & EDIT

Crop out unnecessary areas

EDITED VERSION

ORIGINAL VERSION

Enhance color

Provide a finishing touch (such as a vignette)

You don’t need to replace ‘so-so’ photos;

Simply tweak them

EDIT CONTENT

4

People seek your content, not your design.

Design is what you do with your content. The two should be one.

Edit. Don’t settle for ‘first-draft’ content.

jasonsantamaria.com

A lead should be brief and highlight the main

point of the page

A good lead will bring readers into your content

PROVIDE A LEAD

thebolditalic.com

A sub-header should expand a good title,

providing more context

A lead and sub-header can work together

USE A SUB-HEADER

bbc.com

Related links make good pullout material

Additional related content can break-up a

predictable flow

CREATE PULLOUTS

smashingmagazine.com

Block quotes are a great way to add visual interest

Block quotes give readers easy entry into the middle

of your content

STYLE BLOCK QUOTES

smashingmagazine.com

Lists are optimal for good scanability

Headers break up your content and help readers

scan quickly

HEADERS, LISTS, & PARAGRAPHS

Short paragraphs make your content more

approachable

hanzell.com

Is there a video or image that compliments

your text?

Block quotes can function as their own elements

VARIETY IS KEY

Even paragraphs can have different styles, depending

on their function

LINK INTUITIVELY

5

Every link is an opportunity. Links can enhance your design.

Write links like you would write a heading.

Tips for Writing Great Links, gerrymcgovern.com

media.illinois.edu

URLs are not reader friendly or easy to scan

Links should specify what they will provide the reader

READABILITY & SCANABILITY

media.illinois.edu

Emails, like URLs, are not reader friendly or

easy to scan

Limit links to 8 words or less to improve scanability

READABILITY & SCANABILITY

housing.illinois.edu

Is this a link? Headers and links should not be

treated the same, if headers aren’t links

COLOR & UNDERLINE

foodsense.is

Is this a link? No mistaking what’s a link

on this page

COLOR & UNDERLINE

mozilla.org & sylion.com

Buttons can be significant design elements

CALL TO ACTION

barackobama.com

Links mean action Why hide them?

CALL TO ACTION

apple.com

Images demand attention Every image on this

page is a link

USE IMAGES

waterworks.com

Links introduce interaction Symbols can provide

necessary clues to users

NAVIGATION & INTERACTION

EMBRACE CSS3

6

Visual effects that were dependent on images and overcomplicated HTML are

now possible through CSS.

admissions.illinois.edu

Columns are great for short lists and small sections of text

COLUMNS

COLUMN CODE

.column2 {column-count: 2;column-gap: 20px;

}

<div class=”column2”><ul><li>Item 1</li><li>Item 2</li>

</ul></div>

HTMLCSS

admissions.illinois.edu

Old browsers show a single column

COLUMNS

admissions.illinois.edu

SHADOWS, GRADIENTS, & CORNERS

Gradients help set items apart and add depth

Rounded corners help soften a design

Shadows on text and boxes add depth

h1 {text-shadow: 1px 1px 1px #333;

}

div {box-shadow: 3px 3px 5px #333;border-radius: 3px;

}

CSS Gradient Generator: www.colorzilla.com/gradient-editor/

SHADOWS, GRADIENTS, & CORNERS

SAMPLE CSS

admissions.illinois.edu

Old browsers show a flatter design

SHADOWS, GRADIENTS, & CORNERS

midwinter-dg.com

CSS3 TYPE EFFECTS

CONSIDER WHITE SPACE

7

White space is breathing room. Blank space is awkward.

spurlock.illinois.edu

Is something missing? Blank space is noticeable and looks like a mistake

BLANK SPACE

fellswoop.com

Breath. White space is simply

negative space and goes unnoticed when used well

WHITE SPACE

hanzell.com

Room to operate White space gives elements

margins for style

WHITE SPACE

BE RESPONSIVE

8

Big screens, small screens, whatever. Responsive web design uses layouts

that adapt to the viewing environment.

@media only screen and {min-width: 1024px} and {max-width: 1140x} {

p {font-size: .875em;

}}

RESPONSIVE MEDIA QUERY

SAMPLE CSS

Options galore This code will change the font size of paragraphs when the screen size is

between 1140px and 1024px

thegreatdiscontent.comLarge computer screen

RESPONSIVE EXAMPLE

thegreatdiscontent.comSmall computer screen

RESPONSIVE EXAMPLE

thegreatdiscontent.comiPhone screen

RESPONSIVE EXAMPLE

thegreatdiscontent.com

RESPONSIVE EXAMPLE

smashingmagazine.com

RESPONSIVE EXAMPLE 2

smashingmagazine.com

1 2

3 4

smashingmagazine.com

5 6 7

thegreatdiscontent.com

REMEMBER FORM FOLLOWS FUNCTION

9

Design has real purpose. It isn’t about making something look good. It’s about making content accessible and

leaving an impression.

amazon.com

Drop shadow to draw attention to the menu

DESIGN = SELL

Featured item front and center so you

will want it

Lots of tems you want, featured with

thumbnails

Large search bar so you can find your items fast

google.com

“I’m Feeling Lucky” button sets fun tone while assisting you with

searching

DESIGN = SEARCH

Iconic branding brings visual attention to the

search area

Discreet menus to prevent distraction

from searching

No distractions to keep you from searching

colly.com

DESIGN = BROWSE

usatoday.com

DESIGN = READ

vimeo.com

DESIGN = WATCH

arias.ca

DESIGN = LOOK

KEEP IT CLASSIC

10

Less is more. Keep it simple.

apple.com

mcsweeneys.net

designingmonsters.com

SWELL! Any questions?