Your SlideShare is downloading. ×
Simple but Useful Design Principles.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Simple but Useful Design Principles.

259
views

Published on

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

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
259
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 24. Color Theory Basic
  • 25. Color palletes
  • 26. Use a sequence. Add color overlay. Color palettes
  • 27. Make a test template Iterate colors Color palettes Color Color fdvcxbx hd dcxlskdzxklzjsz Color Color fdvcxbx hd dcxlskdzxklzjsz
  • 28. Thank You! Tertulia @eldelentes 2014 Simple but useful design principles