7 Principles of Design and How to Apply Them to Your Website's Design
When it comes to hosting a website, the functionality should always be at the core of your decision-making process. After all, if your website doesn’t function properly, your website’s users will never be able to find the information they need or be able to complete their intended eCommerce transactions.
But in today’s digital environment, “function” means a whole lot more than how the skeleton of your website operates. As it turns out, more and more website administrators are growing to appreciate the role that proper principles of design can play in creating a fully-fledged website. From balance to contrast to unity and more, there are a wide variety of basic design principles that can and should implement into your website today.
In all, there are 7 principles of design that you should remain mindful of as your graphically and functionally layout your website. Derived from traditional art and graphic design domains, these 7 design principles hold the key to unlocking a user experience that is both functionally precise and optimally accessible to all users:
Principle #1 – Balance
The first of several website design principles that you should consider implementing is balance. In graphic design terms, “balance” refers to the practice of arranging visual element such that no one element overpowers or draws attention away from the other elements. There are several different types of balance (including symmetrical, radial, asymmetrical) each of which can be ascertained through an analysis of a completed composition.
(A symmetrically balance web page is shown here, which is divided down the middle)
While laying out a certain webpage, consider dividing up your available space using one of several different methods, including in half, in thirds, or into ninths (in accordance with the “rule of thirds” from photography). Then, as you insert new texts and photographs, carefully consider how each new addition creates or removes balance from the larger composition.
Principle #2 – Emphasis
Emphasis is among the basic design principles best understood by the general populous given that it represents the focal point of a specific composition. While the emphasis of a photo or piece of art is often the intended subject, the emphasis can also be broader, such as through shading contrast (described further below).
(Through its color choice, color contrast, and central verbal message, this web page presents a clear emphasis)
On your website, an emphasis can come in many different forms. For example, one commonly used emphasis is an enticing photo or headline which is designed to encourage visitors to stop, examine the element, and (perhaps) click through to learn more. Also, many websites use their CTAs (calls to action) as their emphasis, given that such elements drive sales on their eCommerce platform.
Principle #3 – Repetition
Repetition, as a website design principle, is in many ways self-explanatory. In short, repetition involves the repeated use of a single element or series of the element to either communicate certain artistic or function goal. This can create a practical routine that can be used as a foundation for both functional expectations and consistent brand identity.
(Reddit makes good use of functional repetition, as its links, photos, and the voting system always appear in the same locations for easy informational navigation.)
On your own digital domain, you should always start by applying repetition to your website’s basic functional elements. For example, you should try to use 2-3 fonts across your entire website, with certain fonts exclusively being used for headings and copy respectively in order to create organizational expectations.
Repetition can artistically be used with graphic assets, with a common theme established between the photos and vectors implemented on each page.
Principle #4 – Contrast
Contrast is one of the more difficult artistic principles to grasp given that it varies greatly from situation to situation. Broadly speaking, though, contrast is an intentional juxtaposition of two elements – colors, shapes, patterns, etc. – that is able to draw an observer’s attention in order to create excitement. Creating contrast can take practice to master, but is optimally rewarding if properly implemented.
(This web page demonstrates contrast through its vibrant green logo on a shadowed background, which effectively emphasizes its importance.)
Contrast should be implemented anywhere on your website where monotony has taken over. For example, on a plain color page with text, you can add a few patterned elements to break up the boring appearance.
Also, from a practicality standpoint, your main font color and any key brand elements should always contrast the prominent background color. Not only does this help general readability, but this also helps color blind individuals differentiate elements in a greyscale.
Principle #5 – Movement
Movement is an interesting principle, especially when it is applied to web design. In traditional art, movement can refer to the lateral motion of an object or set of objects, such as in mobile. In web design, though, movement can refer to the manner in which static elements are put into motion in order to draw attention. Many social media channels that thrive on video content and animated GIFs take full advantage of this principle.
(Facebook takes advantage of the movement to draw a user’s attention by showing the first several seconds of a video as the user scrolls through their feed.)
While designing a web page to incorporate movement, carefully consider how much that movement will support the user’s attention span without fully distracting them. This can be seen on a homepage such as www.EIU.edu, where the primary background shows students in motion on the university’s campus in order to imply liveliness at the institution.
Principle #6 – Hierarchy
Hierarchy refers, generally, to a tiered power structure where higher members are given more prominence, IE, a king over his knights, who in turn stand over the peasants. In visual space, hierarchy describes how specific elements are laid out or arranged in order to demonstrate notions of importance or emphasis. When applied well, a visual hierarchy can guide a viewer smoothly through a composition.
(Newspaper front pages have long emphasized hierarchy, as in this front page that emphasizes the headline and main image.)
When implemented on a web page, designers can borrow some insight from newspapers. If there is a certain feature story or sale, be sure that it is placed front and center, with images and titles chosen to properly demonstrate its importance. Also, be sure that key brand elements receive proper billing in the page’s hierarchy, given that it acts as a unifying element overall.
Principle #7 – Unity
While unity sounds simple enough in principle, it is one of the most challenging design principles to implement in its entirety. Like chocolate and peanut butter or Lennon and McCartney, unity represents a complete, seamless harmony between several separate elements that work to communicate an enhanced message.
(Apple always emphasizes unity in all of its products, including its website. This page in particular uses the primary color scheme associated with the color, as well as spacing and position, to create unity.)
The best way to create unity is to plan ahead and be prepared to make revisions. Sketching out your intended web page appearance can help in this effort, as can revising those blueprints after some live testing. Because unity is so challenging to create from whole cloth, many website designing programs today now provide templates that are designed to provide unity regardless of content.
Principles of Design Can Elevate any Website’s Design
These 7 principles of design are universal pillars of any good website design. However, rules are made to be broken. Experiment with your website’s design and see what works for you.
Keep in mind that these principles could be applied regardless of your site’s mood or design trajectory. They work with both with extremely minimalistic as well as very busy and information-dense sites.