Design principles for websites part 1
- 1. Design Principles for Websites Chapter 1 – Harmony, Clarity and Balance By Peter C. Brooks Aka “Builderall Dude”
- 2. What is Harmony in Graphic Design? All the graphical elements come together in a meaningful way. The graphics and the text work together in “harmony” with each other.
- 3. For a website harmony means same thing. Can be achieved through: • proximity • repetition • continuation of lines • unobstructed graphics and text • restrained use of color, fonts and other graphic elements • keeping, everything in agreement or accord • it has flow • relationships between elements are clear and unambiguous
- 4. What problems does harmony solve? • It lets people know you put some thought behind your design. • It creates comfort, trust, security, organization, direction. • Harmony is basically what people like about a website. • It’s the essence of professionalism, quality and care. • Some sites have more harmony than others.
- 6. • 4 different versions of the sky. • 4 different fonts • Combine underline and italics • Anything underlined is assumed to be a link or interactive • Poor use of Negative space • Colors do not match brand • Need to separate elements
- 8. Everything has its space. Graphics and text work together not overlapping Not trying to do too much Excellent use of contrast Restrained use of color, even darkened the top Nice flow
- 10. Nice flow, nice contrast, use of color, elements are separated, continuation of lines, no overlap.
- 13. To create harmony on your wesbite • Give all the different elements their space • Try to get things to work together • Us the brand’s colors and restrain the use of color as much as possible • Take advantage of vectors and shapes
- 14. What is Clarity in Graphic Design? The art of being clear, coherent, transparent, understood. The fundamental principal though is economy.
- 15. For a website clarity… Can be achieved through: • excellent and economic copy • honesty • be specific • use words and images people understand • brief and unambigious • keep your background quiet • no distracting animations, widgets, images text, ads or buttons • stick to only what is necessary
- 16. What problems does clarity solve? • It lets people know you know what you are doing. • Its highly respectful, considerate and generous. • Generates a sense of authority, leadership, trust, cleanliness, order. • Highest levels of trust • Speed
- 22. To create clarity on your wesbite • Reduce everything to just whatever your product is about • Do not put anything distracting irrelevant or even exciting images support text • Have just one thing you want everyone to pay attention to • No more than 3 elements, preferable 2
- 23. What is Balance in Graphic Design? The placement of graphical elements to occupy negative space within the frame. Associated with symmetry, asymmetry and discordant. Suggests motion, effects emotion.
- 24. For a website balance: Can be achieved through: • Size • Density • Contrast • Color • The element itself (such as text, graphs, and graphics) • Focus • Saturation
- 25. What problems does balance solve? • People are naturally looking for balance, gives a sense of comfort. • Designers take advantage in order create momentum • Causes or encourages people to act or consider • Helps with hierarchy of information or information architecture • Even the frame itself, pure negative space, has magnetism
- 35. What’s next
- 46. To create balance on your wesbite • Understand how the frame has magnetism • Use contrast and color and placement to help people interact • I would avoid symmetry • I also recommend that sites be calm, tranquil, inviting, pleasing
- 47. Introduction to Web Page Design - harmony, clarity, balance • Harmony – getting elements and text to work together • Clarity – being economical and transparent, easy to understand • Balance – occupying the negative space to build momentum • Build trust, professionalism, thought and care • Give each element its space try not to overlap • Treat it like a billboard • Magnetism, density, screen real estate, contrast • Only underline interactive elements restrain colors, fonts, etc. • K.I.S.S. – know what you want people to do and just move those who are willing to the next step as easily as possible.
- 48. Peter C. Brooks I hope you have enjoyed the presentation to contact me go to: www.petercbrooks.com Or look for more courses at: https://Consciousstate.teachable.com