This is a simple tertulia on aesthetic basics for web development.

1. Design Principles
Tertulia
@eldelentes 2014
Simple but useful design principles

2. Good design is as
little design as possible
Dieter Rams

3. Design for content.
Web it’s information, not parallax, not flat,
not animations, only words and messages.
Context
Content
Persona
Device
Environment
Useful
Understandable
Friendly
Adaptive
Experience

4. Web design is 95%
typography1

5. 95% of the information on the web
is written language.
It is only logical to say that a web
designer should get good training in
the main discipline of shaping written
information, in ther words: Typography.
1
http://ia.net/blog/the-web-is-all-about-typography-period/

6. Typefaces
Serif
Sans-serif
Monospace
Script
Text
Text Text Text
Text Text
Text Text
Text Text Text

7. Choosing the Right Type
http://jessicahische.is/thinkingthoughts

8. Does it come in a variety
of weights?
Futura Light
Futura Book
Futura Regular
Futura Bold
Futura Extra Bold
Futura Heavy
100-900

9. 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 officia 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 appear
smaller overall and the cap
If the x-height is way too
high, your eye won’t be able
to distinguish quickly
between caps and lowercase

10. Is it a typeface I’d want to
hang out with?
Elegance Elegance Elegance

11. If it’s a sans, is there enough
letter variety?

12. Pairing Typefaces
How Many Fonts Should I Use?
Formulas
Content
Headline
Content
Headline
Content
HEADLINE
1-4

13. Hierarchy
Visual
Visual hierarchy is the order in which the human
eye perceives what it sees.

14. Example
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

15. Example Weight
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

16. Example Color
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

17. Example Size
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

18. Example Space
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

19. Example Align
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

20. Example Typography
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

21. Example Contrast
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878

22. Negative
space
Magic
Visual hierarchy is the order in which the human
eye perceives what it sees.

23. Negative spaces are
breakpoints and help in focus on readability.
Too little space makes a design feel crammed, busy,
cluttered and difficult to read.
Logo U
Logo U
Button Button
Tittle
Paragraph
Tittle
Paragraph

27. Color
Theory
Basic

28. Color palletes

29. Use a sequence.
Add color overlay.
Color palettes

30. Make a test template
Iterate colors
Color palettes
Color
Color fdvcxbx hd
dcxlskdzxklzjsz
Color
Color fdvcxbx hd
dcxlskdzxklzjsz

31. Thank You!
Tertulia
@eldelentes 2014
Simple but useful design principles