Design Principles
Tertulia
@eldelentes 2014
Simple but useful design principles
Good design is as
little design as possible
Dieter Rams
Design for content.
Web it’s information, not parallax, not flat,
not animations, only words and messages.
Context
Content
...
Web design is 95%
typography1
95% of the information on the web
is written language.
It is only logical to say that a web
designer should get good train...
Typefaces
Serif
Sans-serif
Monospace
Script
Text
Text Text Text
Text Text
Text Text
Text Text Text
Choosing the Right Type
http://jessicahische.is/thinkingthoughts
Does it come in a variety
of weights?
Futura Light
Futura Book
Futura Regular
Futura Bold
Futura Extra Bold
Futura Heavy
1...
Does it have a nice x-height?
HolaHola
"Lorem ipsum dolor sit amet, consecte-
tur adipisicing elit, sed do eiusmod
tempor ...
Is it a typeface I’d want to
hang out with?
Elegance Elegance Elegance
If it’s a sans, is there enough
letter variety?
Pairing Typefaces
How Many Fonts Should I Use?
Formulas
Content
Headline
Content
Headline
Content
HEADLINE
1-4
Hierarchy
Visual
Visual hierarchy is the order in which the human
eye perceives what it sees.
Example
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Example Weight
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Example Color
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Example Size
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Example Space
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Example Align
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Example Typography
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Example Contrast
Eduardo Higareda
Graphic Designer
www.eldelentes.mx
8116520878
Negative
space
Magic
Visual hierarchy is the order in which the human
eye perceives what it sees.
Negative spaces are
breakpoints and help in focus on readability.
Too little space makes a design feel crammed, busy,
clut...
Color
Theory
Basic
Color palletes
Use a sequence.
Add color overlay.
Color palettes
Make a test template
Iterate colors
Color palettes
Color
Color fdvcxbx hd
dcxlskdzxklzjsz
Color
Color fdvcxbx hd
dcxlskdzx...
Thank You!
Tertulia
@eldelentes 2014
Simple but useful design principles
Simple but Useful Design Principles.
Simple but Useful Design Principles.
Simple but Useful Design Principles.
Upcoming SlideShare
Loading in …5
×

Simple but Useful Design Principles.

782 views
569 views

Published on

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

Published in: Design, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
782
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Simple but Useful Design Principles.

  1. 1. Design Principles Tertulia @eldelentes 2014 Simple but useful design principles
  2. 2. Good design is as little design as possible Dieter Rams
  3. 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. 4. Web design is 95% typography1
  5. 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. 6. Typefaces Serif Sans-serif Monospace Script Text Text Text Text Text Text Text Text Text Text Text
  7. 7. Choosing the Right Type http://jessicahische.is/thinkingthoughts
  8. 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. 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. 10. Is it a typeface I’d want to hang out with? Elegance Elegance Elegance
  11. 11. If it’s a sans, is there enough letter variety?
  12. 12. Pairing Typefaces How Many Fonts Should I Use? Formulas Content Headline Content Headline Content HEADLINE 1-4
  13. 13. Hierarchy Visual Visual hierarchy is the order in which the human eye perceives what it sees.
  14. 14. Example Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  15. 15. Example Weight Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  16. 16. Example Color Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  17. 17. Example Size Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  18. 18. Example Space Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  19. 19. Example Align Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  20. 20. Example Typography Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  21. 21. Example Contrast Eduardo Higareda Graphic Designer www.eldelentes.mx 8116520878
  22. 22. Negative space Magic Visual hierarchy is the order in which the human eye perceives what it sees.
  23. 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
  24. 24. Color Theory Basic
  25. 25. Color palletes
  26. 26. Use a sequence. Add color overlay. Color palettes
  27. 27. Make a test template Iterate colors Color palettes Color Color fdvcxbx hd dcxlskdzxklzjsz Color Color fdvcxbx hd dcxlskdzxklzjsz
  28. 28. Thank You! Tertulia @eldelentes 2014 Simple but useful design principles

×