The document discusses principles of harmony, clarity, and balance for website design. Harmony is achieved through elements like proximity, repetition, and consistent use of color and fonts. Clarity solves problems by being clear, coherent, and reducing distractions. Balance occupies negative space to create a sense of order and momentum. The key is giving all elements space, focusing on the main message, and following principles like KISS (Keep It Simple, Stupid) to build trust and guide users effortlessly.

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