simple but useful design principles
DESCRIPTION
This is a simple tertulia on aesthetic basics for web development.TRANSCRIPT
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