simple but useful design principles
DESCRIPTION
This is a simple tertulia on aesthetic basics for web development.TRANSCRIPT
![Page 1: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/1.jpg)
Design PrinciplesTertulia
@eldelentes 2014
Simple but useful design principles
![Page 2: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/2.jpg)
Good design is aslittle design as possibleDieter Rams
![Page 3: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/3.jpg)
Design for content.
Web it’s information, not parallax, not flat,not animations, only words and messages.
ContextContentPersonaDeviceEnvironment
UsefulUnderstandableFriendlyAdaptiveExperience
![Page 4: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/4.jpg)
Web design is 95%typography1
![Page 5: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/5.jpg)
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/
![Page 6: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/6.jpg)
Typefaces
Serif
Sans-serif
Monospace
Script
Text
Text Text Text
Text Text
Te� Text
Text Text Text
![Page 7: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/7.jpg)
Choosing the Right Typehttp://jessicahische.is/thinkingthoughts
![Page 8: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/8.jpg)
Does it come in a varietyof weights?
Futura LightFutura BookFutura RegularFutura BoldFutura Extra BoldFutura Heavy
100-900
![Page 9: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/9.jpg)
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
![Page 10: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/10.jpg)
Is it a typeface I’d want tohang out with?
Elegance Elegance Elegance
![Page 11: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/11.jpg)
If it’s a sans, is there enoughletter variety?
![Page 12: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/12.jpg)
Pairing Typefaces
How Many Fonts Should I Use?
Formulas
Content
HeadlineContentHeadline
ContentHEADLINE
1-4
![Page 13: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/13.jpg)
HierarchyVisual
Visual hierarchy is the order in which the humaneye perceives what it sees.
![Page 14: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/14.jpg)
Example
Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878
![Page 15: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/15.jpg)
Example Weight
Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878
![Page 16: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/16.jpg)
Example Color
Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878
![Page 17: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/17.jpg)
Example Size
Eduardo HigaredaGraphic Designerwww.eldelentes.mx8116520878
![Page 18: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/18.jpg)
Example Space
Eduardo HigaredaGraphic Designer
www.eldelentes.mx8116520878
![Page 19: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/19.jpg)
Example Align
Eduardo HigaredaGraphic Designer
www.eldelentes.mx8116520878
![Page 20: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/20.jpg)
Example Typography
Eduardo HigaredaGraphic Designer
www.eldelentes.mx8116520878
![Page 21: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/21.jpg)
Example Contrast
Eduardo HigaredaGraphic Designer
www.eldelentes.mx8116520878
![Page 22: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/22.jpg)
Negativespace
Magic
Visual hierarchy is the order in which the humaneye perceives what it sees.
![Page 23: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/23.jpg)
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
![Page 24: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/24.jpg)
![Page 25: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/25.jpg)
![Page 26: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/26.jpg)
![Page 27: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/27.jpg)
ColorTheory
Basic
![Page 28: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/28.jpg)
Color palletes
![Page 29: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/29.jpg)
Use a sequence.
Add color overlay.
Color palettes
![Page 30: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/30.jpg)
Make a test template
Iterate colors
Color palettes
ColorColor fdvcxbx hddcxlskdzxklzjsz
ColorColor fdvcxbx hddcxlskdzxklzjsz
![Page 31: Simple but Useful Design Principles](https://reader033.vdocuments.mx/reader033/viewer/2022061105/53ffe7948d7f724c088b4997/html5/thumbnails/31.jpg)
Thank You!Tertulia
@eldelentes 2014
Simple but useful design principles