simple but useful design principles

Design PrinciplesTertulia

@eldelentes 2014

Simple but useful design principles

Good design is aslittle design as possibleDieter Rams

Design for content.

Web it’s information, not parallax, not flat,not animations, only words and messages.

ContextContentPersonaDeviceEnvironment

UsefulUnderstandableFriendlyAdaptiveExperience

Web design is 95%typography1

95% of the information on the webis written language.

It is only logical to say that a webdesigner should get good training in

the main discipline of shaping writteninformation, in ther words: Typography.

1http://ia.net/blog/the-web-is-all-about-typography-period/

Typefaces

Serif

Sans-serif

Monospace

Script

Text

Text Text Text

Text Text

Te� Text

Text Text Text

Choosing the Right Typehttp://jessicahische.is/thinkingthoughts

Does it come in a varietyof weights?

Futura LightFutura BookFutura RegularFutura BoldFutura Extra BoldFutura Heavy

100-900

Does it have a nice x-height?

HolaHola"Lorem ipsum dolor sit amet, consecte-tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla-mco laboris nisi ut aliquip ex ea com-modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui o�icia dese-

"Lorem ipsum dolor sit amet, con-sectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos-trud exercitation ullamco laboris nisi ut aliquip ex ea commodo con-sequat. Duis aute irure dolor in rep-rehenderit in voluptate velit esse cillum dolore eu fugiat nulla paria-tur. Excepteur sint occaecat cupi-

Source Sans pro Open Sans

If the x-height is too low,the typeface will appearsmaller overall and the cap

If the x-height is way toohigh, your eye won’t be ableto distinguish quicklybetween caps and lowercase

Is it a typeface I’d want tohang out with?

Elegance Elegance Elegance

If it’s a sans, is there enoughletter variety?

Pairing Typefaces

How Many Fonts Should I Use?

Formulas

Content

HeadlineContentHeadline

ContentHEADLINE

1-4

HierarchyVisual

Visual hierarchy is the order in which the humaneye perceives what it sees.

Example

Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878

Example Weight

Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878

Example Color

Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878

Example Size

Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878

Example Space

Eduardo HigaredaGraphic Designer

www.eldelentes.mx8116520878

Example Align

Eduardo HigaredaGraphic Designer

www.eldelentes.mx8116520878

Example Typography

Eduardo HigaredaGraphic Designer

www.eldelentes.mx8116520878

Example Contrast

Eduardo HigaredaGraphic Designer

www.eldelentes.mx8116520878

Negativespace

Magic

Visual hierarchy is the order in which the humaneye perceives what it sees.

Negative spaces arebreakpoints and help in focus on readability.

Too little space makes a design feel crammed, busy,cluttered and di�cult to read.

Logo U

Logo U

Button Button

TittleParagraph

Tittle

Paragraph

ColorTheory

Basic

Color palletes

Use a sequence.

Add color overlay.

Color palettes

Make a test template

Iterate colors

Color palettes

ColorColor fdvcxbx hddcxlskdzxklzjsz

ColorColor fdvcxbx hddcxlskdzxklzjsz

Thank You!Tertulia

@eldelentes 2014

Simple but useful design principles