Designfundamentals forweb-trani-2010

Paul Trani ptrani@adobe.com www.paultrani.com @paultrani

DESIGN FUNDAMENTALS for Developers

Thefundamentalsofgraphicdesignforscreens

• Adobe Flash Platform Evangelist • Lynda.com and Layers Magazine author • Adobe Certified Instructor • Art school graduate

Work

Love

Ride

Play

PAUL TRANI

“There are only 10 kinds of people in the world. Those that know binary and those that don't.”

“5 out of 4 designers have a problem with fractions.”

AGENDA

•  Understand the fundamentals of graphic design for screens

WHY SHOULD I CARE?

•  Understanding design will help you be a better developer

•  Developers with design skills are in demand

DO’S AND DON’TS

Design Don’ts •  http://bouncebargainrentals.com •  http://www.html5zombo.com

Inspiration •  http://www.designmeltdown.com •  http://www.mobileawesomeness.com •  http://www.thefwa.com •  http://patterntap.com •  http://quince.infragistics.com •  http://www.designupdate.com

PLANNING

First, define what you’re trying to do.

PLANNING

First, define what you’re trying to do. bEtsy, we want to sell you stuff you don’t need.

PLANNING

Next, determine your audience.

PLANNING

Next, determine your audience. Men and women between 18-35.

Unique individuals that crave attention and have money to burn.

PLANNING

The audience determines what needs to be created.

PLANNING

The audience determines what needs to be created. Audience has a laptop and a mobile phone.

TWO RULES BEFORE DESIGNING

RULE 1

Don’t use design programs.

RULE 2

It’s all about leading the eye.

RULE 3

There are no hard and fast rules.

DESIGN FUNDAMENTALS

Layout Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction

Typography Serifvs.Sans

Color Color Wheel, Color Choices, Meaning

DESIGN FUNDAMENTALS

Typography Serifvs.Sans

Color Color Wheel, Color Choices, Meaning

GRID Start with a

RULE OF THIRDS

•  Dividing a page into 3 rows and 3 columns •  The eye naturally follows this “F” shape

Layout Design AIR App: www.paultrani.com

MOBILE = ONE COLUMN

BETSY

GOLDEN RATIO

The

THE GOLDEN RATIO

•  Proportion defined as 1.618 •  Found in nature, art and architecture

1.618 1

FibonacciNumbers

THE GOLDEN RATIO IN LAYOUT •  Overall Width / 1.618 = Content Block •  Overall Width – Content Block = Sidebar Block

OverallWidth

ContentBlock1.618

SidebarBlock1

BETSY

ELEMENTS OF A GOOD LAYOUT

SPACE

Implies importance, elegance, and professionalism.

SPACE

•  Don’t try to be great, try to be invisible

“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”

Antoine de Saint-Exupery

SPACE

WalMart Target

h"p://www.kennethcole.com

BETSY

BALANCE gives a clear, unified message.

SYMMETRICAL BALANCE

SalvadorDali–TheLastSupper

h"p://www.cnn.com

h"p://www.mobilewebbook.com

h"p://www.bbc.co.uk

h"p://www.hbo.com

BETSY

Variety Variety Variety VARIETY VARIETY

VarietyVARIETYVariety variety variety variety variety

variety Variety

VARIETY

•  Gives visual and conceptual interest •  Too much and the design will appear

amateurish •  Too little and the design will appear boring

“Variety is the spice of life.”

JoanMiro–BlueII(surrealism)

h"p://www.webdesignerwall.com

h"p://www.hawkart.com

BETSY

HIERARCHY A well designed project has

HEIRARCHY

•  A clear starting point that guides the viewer through the design

•  Separate the most important element •  Group the less important elements

“Heirarchy does not refer to upper management.”

h"p://www.semisture.com

BETSY

DESIGN FUNDAMENTALS

Layout Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction

Serifvs.Sans

Color Color Wheel, Color Choices, Meaning

Typography

•  Choose a font that fits the subject •  Don’t use more than three •  @font-face

TYPOGRAPHY

“Typography has one plain duty before it and that’s to convey information in writing.”

Emil Ruder, Founder of Basel School of Design

•  Two main types: – Serif fonts have short finishing lines on strokes – Sans-serif lack Serifs and and are considered

modern as a result.

CHOOSING A FONT

Contrast

Size

Hierarchy

MAKE IT LEGIBLE

FONT STRUCTURE

•  There are different type classifications, •  Understand type anatomy •  Understand type measurements. •  Use the Font Picker.

h"p://www.wesEn.com

h"p://www.toysrus.com

BETSY

DESIGN FUNDAMENTALS

Layout Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction

Typography Serifvs.Sans

Color Color Wheel, Color Choices, Meaning

COLOR

•  Use color to create hierarchy, dominance, and balance.

•  Consistent use of a few colors makes a more cohesive design.

“Use color to emphasize importance, not decorate a page.” Alexander White

COLOR

•  The Color Wheel •  Warm colors bring elements forward. •  Cool colors move elements back. •  Kuler

DongKingman

IN ACTION

Paul Trani ptrani@adobe.com www.paultrani.com @paultrani

THANK YOU

h@p://www.designmeltdown.comh@p://www.mobileawesomeness.comh@p://pa@erntap.comh@p://quince.infragisEcs.comh@p://www.designupdate.com