Web Design for Non-Designers

This is a local meetup lightning talk discussing some basic design techniques for those with little-to-no design background.

Transcript

1. DESIGN For those who may be lacking in aesthetic talent. Or just don’t design good (but want to).
2. TYPOGRAPHY COLOR THEORY IMAGERY LAYOUT
3. TYPOGRAPHY
4. TYPOGRAPHY FIRST RULE OF TYPOGRAPHY: Readability
5. MARGIN
6. Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their fi rst victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…. Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their fi rst victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…. Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their fi rst victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy….
7. Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their fi rst victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy
8. Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their fi rst victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy….
9. FONT
10. SERIF
11. SANS-SERIF
12. D is play Face
16. TYPOGRAPHY Make your text READABLE
17. COLOR THEORY
19. SPLIT COMPLIMENTARY
20. MONOCHROMATIC
21. ANALOGOUS
22. COMPLIMENTARY
23. SPLIT COMPLIMENTARY
24. WHOLE LOT OF GRAY
25. GRAY PLUS ACCENT
26. coolors.co
27. COLOR THEORY Limit yourself to 3-5 colors, including black, white, and gray.
28. VISUAL HIERARCHY
29. IMAGERY
30. HEADROOM
37. BALANCE
42. RULE OF THIRDS (COMPOSITION)
49. PLACEHOLDER IMAGES
50. http://www. fi llmurray.com/400/400
51. http://placecorgi.com/500/400
52. http://placehold.it/800x400
53. IMAGERY Poor image choices will make your site look bad.
54. LAYOUT?
55. KISS Keep it simple (stupid).
56. ➤ http://eightface.com/
58. TRUST YOUR GUT
60. DO NOT TRUST YOUR GUT
63. TYPOGRAPHY COLOR THEORY IMAGERY LAYOUT
64. JUST DO WHAT LOOKS GOOD.