Good Designers Use Design Principles
For designers to avoid creating designs that will appear amateur and have poor usability, it’s important for them to follow and incorporate design principles. What are design principles? They are the building blocks, or guidelines, needed to create better designs. By using design principles, you can make your designs more aesthetically pleasing, influence perception, increase usability, convey messages, and more. There is an amazing resource called Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler. The book discusses 125 important design principles you can implement to make your designs better. While all of the principles are important there are three that stood out to me that I feel are important to consider when creating websites: legibility, alignment, and horror vacui.
Legibility
One of the most important things to keep in mind when designing is to make sure text is visually clear. This can include the text size, text block, typeface, and contrast.
When selecting your text size it should be between 9 to 12 point. This is considered the standard, or optimal, range to choose from. It’s recommended to keep text blocks to a maximum of 3 to 5 inches long or 10 to 12 words per line. Studies have shown that readers prefer reading shorter text blocks as opposed to text that spans the entire length of the screen. Furthermore, by keeping text blocks shorter it will help make your designs more aesthetically pleasing to look at.
Your font styles, also known as typefaces, should be chosen carefully. It should be kept in mind that some of the fancier, or more decorative, font choices can reduce legibility. While it’s okay to use fancier fonts for headlines or titles you should avoid using them for body text. A clean font style that is easy and quick to read should be used for body text. Also, when dealing with contrast, make sure you use dark text on light backgrounds or vice versa. However, it’s good to keep in mind that dark text on light backgrounds is more preferred.
Alignment
When considering how to align your designs it’s important to keep in mind that your elements should be aligned with at least one or more elements. This is meant to help create a sense of unity and a more aesthetic look. Elements should be aligned into rows and columns or along a common center.
It’s best to use left-alignment or right-alignment when working with text blocks as opposed to using center-alignment. This is because center-aligned text blocks can make alignment with other elements more challenging and make the text more difficult to read. The image above shows three examples of alignment. The first left-handed example shows elements being unaligned with one another, causing the image to feel messy. The example in the center showcases center alignment, though not completely centered. While all of the text is center aligned each other its not pleasing to look at or read. Whereas the right, or last example, feels and looks the most organized and balanced with the use of left-alignment for the text.
Horror Vacui
This is the fear of emptiness. Oftentimes we want to fill blank spaces with objects and elements instead of leaving the space blank or empty. How you use this principle can influence the perceived value of your website.
Designs or products with higher value use a more minimalism style approach or incorporate more white space. An example of such is the picture above on the right. The store only has two items on display. Another example of this is the Apple website as pictured below. Both examples have a more expensive feel when looking at them. Whereas inexpensive products tend to lean towards filling in all space. An example of such being the image above on the left. It displays the store window being fully stocked. Likewise, below is a picture of an older version Dollar Tree’s website. They have their website filled with information. Both examples leave no white space and have a busier and cheaper feel.
GoReact Project
I had the opportunity to work with two individuals to come up with several redesign ideas for GoReact. GoReact was facing several issues that they wanted help addressing. With the help of design principles we were able to help create several redesign ideas to help increase usability and make the site more aesthetically pleasing. You can watch the video my team and I created below. In the video we discusses some of the issues GoReact was facing and our solutions. Below is also a link to view our prototype.
Click to view my team and I’s GoReact prototype.
Maggie McCausland is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Print and Augmented Reality Design in the DGM 2250 Course and representative of the skills learned.
