Since the ’90s, companies have become increasingly dependent on the internet to compete in the global marketplace. Over time, web designers and developers have had to adapt to the ever-changing landscape of the web.
With new coding techniques always popping up, it's hard to stay up to date with best practices. Many basic design principles can be utilized to create a good user interface (UI). Not to be confused with user experience (UX), which is everything you interact with on a page, UI is everything you see. A 2011 study showed that users form a first impression of a web page in the first 50 milliseconds (.05 seconds) of viewing it (and, by extension, of your company as a whole). You need to make your visual impression count. How can you use design principles to create an engaging and aesthetically pleasing site?
Hierarchy
Hierarchy is how you demonstrate the importance of elements compared to their surroundings. It is a crucial factor in keeping your website organized and leading your visitors with intention. Hierarchy applies to color, typography, spacing, sizing, and much more.
Color
Color palettes strongly influence a site's overall feel and its ability to focus readers’ attention. If a site chooses a monochromatic look, nothing stands out. If a site utilizes too many colors, nothing stands out. You can use the 60/30/10 rule to determine how much of a particular color should be used.
Use the primary hue for 60% of the color palette, the secondary hue 30% to break up the primary, and the accent color very intentionally about 10% of the time. Use the accent hue in buttons, calls to action, or anywhere else you want the user to interact with the site. This color will take on an active role in the user's brain and lead them effortlessly through the site. Above, you can see that the yellow which comprises only 10% of the image draws the eyes to those elements.
Typography
Enticing the user to read relevant content is one of a web designer’s many responsibilities. To create a successful typographic hierarchy, it’s important to understand how to organize your content. Books, for example, are broken down into chapters and sections before reaching the granular level of paragraphs, sentences, and words. Likewise, your website can be organized into larger sections (e.g., products, services, about us), which contain individual pages, which in turn contain modules that organize your specific pieces of content.
Nobody wants to sift through information that is not relevant to them. By creating a logical hierarchy with your use of color and font size, weight, position, line height, etc. you can make large chunks of content easier to scan. The user's attention will be drawn to the most prominent content (the main heading or H1) and through subheadings to give them an overall view of the content.
Repetition
By repeating elements on a single page or throughout a site, you can reinforce an idea and build consistency. For example, if your company has three major service offerings, using the same template for all three would enhance the consistency of your site. Predictability will teach the user what to expect, where to find information, and how to interact with the content.
White Space
White space doesn’t have to be white; it is actually just the space between elements. This is a powerful tool for a designer, but using it effectively requires a lot of practice. The trick is to make sure it doesn't stand out but rather exists to give the real star room to shine. It pushes the eyes to the active elements. In the example below, the “white space” is navy and creates breathing room for the information.
These are not all the design principles that can be applied to UI, but they create a solid foundation that designers always come back to. Learn more about how Blue Frog can apply these design principles to make your website aesthetically pleasing and engaging.
