Principles of Visual Design

Small presentation done at the Quito Office.

Transcript

1. principles of visual design
2. why?
3. we'll not become designers in one day
4. but we can have tools to judge a design
5. and start training our eye for aesthetics
6. basic concepts
7. what is visual design
8. problem-solving through the use of typography, photography and illustration
9. what is beautiful visual design
10. A great solution to a visual problem
11. what is a composition
12. visual piece that solves a specific problem
13. Compositions can be nested to create bigger ones
14. principles
15. they are psychological principles
16. there are many
17. many
18. many
19. many!
20. we've been studying (and discovering) visual design since the beginning of human history
21. we'll be exploring the main 7
22. practice leads to proficiency
23. The principles are all connected, and how you use them will affect the others...
24. ...if you break one, you'll be enhancing another
25. Use them to solve problems, creating relationships between the elements to guide the viewer
26. Follow them until they make sense to the composition as a whole
27. alignment
28. The edges of the elements line up along common rows or columns...
29. ...or their bodies along a common center
30. align things that are related to each other
31. creates relationships between elements and reduce the visual clutter
32. My awesome blog By Juanda Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem.
33. My awesome blog By Juanda Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem.
34. Without alignment there's no flow. Our eyes would be jumping from one place to another
35. We read from top to bottom and left to right
36. grids
37. emphasis
38. Creates interest and draws the user's attention towards a specific focal point
39. It can be achieved in different ways: size, color, position, space, texture, etc
40. You can have several focal points, but only one or two items should be strongly emphasized at at time
41. This principle usually affects the hierarchy of the composition
42. hierarchy
43. The relative importance of elements between each others in a composition
44. The differences in hierarchy must be recognizable and significant enough to be perceived
45. My awesome blog By Juanda Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem.
46. consistency
47. The usability of a composition is improved when similar elements are expressed in similar ways
48. This helps to create a mental model of the site
49. white space
50. The unmarked space between elements in a composition
51. Is elegant and timeless
56. it gives the eyes a chance to rest
57. silence in music
58. Sometimes the notes that you don't play, are as important as the notes that you do play
59. it must have some relation with the surrounding elements...
60. ...otherwise it will off- balance the composition and can affect hierarchy
61. My awesome blog By Juanda Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin elementum purus vel aliquam. Quisque vestibulum nisi ac nisl posuere tristique eget at sem.
62. balance
63. When all the elements have optical equilibrium, the composition is balanced
64. So one part of the site doesn't "feel" heavier than the rest
65. symmetrical balance
66. when you "fold" your composition, the elements match
67. asymmetrical balance
68. is more active and dynamic
69. much harder to implement
70. unity
71. All the elements are in agreement and no individual part is viewed as more important than the whole design
72. No individual part of the design is sticking out away from the rest
73. All the pieces of the design have relationships between each other
74. the design is "finished"
75. critique
76. http://durst.org/sustainability
77. homework
78. Pick any website (done by us or not) and do a design critique. Explain how some of the principles are well applied or how the composition can be improved.
79. thanks!
80. questions?