Following a set of compositional rules when creating visual art will result in a better user experience, and designing for the web is no exception. The ultimate goal of a website is to provide the user with information as efficiently and effectively as possible. Since the first thing a user will notice about a website is what it looks like, the design plays a huge role in accomplishing this goal. Many different elements make up the design of the website, and organizing those elements according to the Rules of Composition will enhance the design and the user experience, and ultimately the success of the website.
Creating an Information Hierarchy
Information Hierarchy definition: An arrangement or classification of things according to relative importance or inclusiveness. The viewer's eye ultimately wants to rest on the "most important" element or focal point.
Creating a hierarchy of information is important to guide the user to a point of action. This hierarchy is created by giving more attention to certain elements over others. Focus goes hand-and-hand with hierarchy, as the existence of a focal point with page prominence ensues that there is a subsequent hierarchical flow.
A website’s focus and hierarchy is determined by the strategic goals of that website. For example, the online banking login box is a very important element on the home page of a financial institution’s website, and should therefore be a point of visual focus. However, there may be other important items, such as product promotions or news items, that can be given secondary or even tertiary treatment. Variations in page placement, size, style and color, as well as using imagery and iconography, can work together to successfully create focus and establish a hierarchy.
Establishing Design Balance
Design balance definition: Placement of the informational or design elements in relation to each other. When balanced, a composition appears more stable and visually pleasing.
Balance is achieved when all elements of the design work together to create a comfortable composition. This involves using a strategic combination of white space, color, content, and/or imagery. In website design, balancing important information provides a better user experience by decreasing clutter and creating focal points. Subsequently, this makes the content easy to read and easy to follow.
Moving a Visitor’s Eye Through The Site
Visual movement definition: The visual flow of your artwork. It's the path that you intend your viewer's eye to follow.
Moving the user’s eye through the page(s) of a website is crucial to its success. In order to keep the user’s attention, information must be delivered using the aforementioned rules of hierarchy, focus, and balance, which can all work together to create movement. In this new digital age, most websites require the user to manually scroll through the page to view all of its contents. This is an expected experience now, and having information below the fold is no longer frowned upon. A successful design will engage the user through visual interest and encourage them to scroll, creating movement. One common mistake with website designs is placing too much information in a small area and not allowing for clarity or movement. And, if a user is confused or stuck while looking at a website, then they will likely leave.
Providing Visual Contrast
Visual contrast definition: The arrangement of opposite elements in a piece to create visual interest, excitement, and drama.
Contrasting elements within a website creates visual interest and enhances other Rules of Composition. Contrast can be applied to content within the page by changing font styles and sizes, color, imagery, or design elements. An example of contrast would be using darker images with brighter text, or combining a hand-written font for headlines with a sanserif font for supporting text.
Contrast is especially important in website design so that the content is ADA conformant. Website compliance against WCAG ADA guidelines is a goal for most websites. It is intended to ensure that businesses make certain accommodations to content on the site so that any disabled persons can access to the same services. Contrast comes into play when choosing colors because they have to meet or pass a contrast level* to be legible. For example, light grey text on a medium grey background may not create enough contrast, and therefore a screen reader would not successfully read the content.
*All of the websites ZAG designs conform to the recommendations of the Web Content Accessibility Guidelines (WCAG). WCAG 2.1 level AA requires specific contrast ratios for text including active controls . Color contrast ratios should be checked to confirm that it conforms using an online contrast checker such as http://webaim.org/resources/contrastchecker.
Striving for Visual Unity
Visual unity definition: Occurs when all of the elements of a design piece combine to make a balanced, harmonious, complete whole.
By creating consistency between certain visual elements, unity helps ensure the design delivers a seamless, cohesive experience. Consistent use of brand elements – on the website itself and with other marketing collateral – is important to generate brand recognition and trust. Unity also helps provide a good user experience by keeping certain visual elements consistent. For example, making all main call-to-action buttons the same shade of blue creates uniformity, and helps the user recognize these important features and know how to take the next step.
A successful design uses these rules to complement each other and give the design purpose. To learn more or talk about your website design strategy with one of our UX designers, contact us.