Web Design Principles

Design Principles

As you begin designing your website, here are some things to keep in mind. Designs are not meant to be random. Otherwise it would not be considered a design. Every design is for a purpose. Therefore, every element in a design must also have a purpose. Designs need to have simplicity, order, and visual interest. All of these principles go hand-in-hand with each other. Every principle must be considered and used correctly in order to achieve effective visual interest and aesthetics.

Your designs should have visual cues and apparent hierarchy to help with the proper flow throughout the material. If designs contain too much information they can become confusing or overwhelming to the viewer. Think about what you are intending the viewer to learn or get from the web page/site you are designing.

Would you consider text from a book, an outline, or an article a design? No, they are things you write, not things you design (unless you are a typographer). So make sure to remember that when you design your material. Designs are supposed to be visual chunks of information that the brain can easily remember. If you are including too much writing, you are going to make it more difficult for your viewers to retain the intended message.

To better understand how to chunk material see Layout page on this website. Remember to remain consistent with your design throughout your entire website. It is paramount to the success of your design and quite possibly to the success of the business or purpose of the website you design!

Key Terms

Hue – A color within the visual spectrum. Red, green, yellow, etc... are examples of hue names.

Value – A measure of light to dark.

Saturation – A color that has a high intensity to it. The higher amount of intensity, the higher amount of saturation.

Complementary color – Colors that are directly across from each other on the color wheel. Examples: Red and green, yellow and purple, blue and orange.

Split complementary colors – Colors that are to either side, one or two color spaces, of their complementary colors on the color wheel. Example: Red and Green are complementary colors. Blue, blue-green, yellow-green and yellow are the first and second colors to the left and the right of purple. That would make the blue, blue-green, yellow-green and yellow split complementary colors. (See example below.)

Analogous – A color scheme that contains several hues located next to each other on the color wheel. Orange, yellow-orange, yellow are examples of analogous color.

Monochromatic – A color scheme that only involves one hue varying in value or intensity.

Color Wheel

Photo credit: Wikimedia Commons Photo credit: Wikimedia Commons

Split Complementary Colors Complementary Colors

Resources & Links

These are a couple of resources that contain more information and examples of design. Both resources contain many pictures and can help give even more clarity when you begin your design.

Visual Literacy

Visual Literacy Slideshare Presentation -This is a slide presentation by Sherri Post that gives good examples of what is good and bad design.

Notes about the Slideshare presentation before you watch it;

• There are parts that are interactive but you won’t be able to participate the way the presentation was intended. Don’t try to click on any of the images on the slides when directed to. The links are broken. Just forward to the next slide like normal.
• The slide show on asymmetrical (informal) balance states it is preferred to have asymmetrical balance. However, it can be difficult trying to achieve asymmetrical balance. Yes, it is more interesting than formal balance but don’t worry if you have to stick with formal balance instead.

Copyright © 2015 Angela Lenz