June 21, 2018

Utilizing Basic Design Theories in Content-Heavy User Experience Design

In a society driven by mass media and information-overload the internet is constantly expanding and changing with new content and rich media. The types of content we’ll be referring to here can include but is definitely not limited to: text, articles, videos, audio recordings, photos, graphics, memes, and more. In this article, I’d like to discuss how to best approach a content-heavy website redesign and a few of the basic design elements and principles that help these complex user experiences flow and stay organized.

Why Exactly is Content Important in Design?
Content drives the design and layout of any website and therefore the user experience must be clean, modular and well-planned from page to page to account for the potential growth ahead. With content being key to any successful website through Google rankings, designing for content-rich and media-heavy websites is a common challenge for designers and businesses beginning the steps into the website redesign process. It's easy for a website to appear cluttered and unorganized if the elements aren't grouped together correctly, spaced evenly or cohesive visually. So it's important overall for the designer to have an idea of the types of content and their importance in relation to other elements on each page.

Information Architecture is Key
A content-rich website must be well organized from the get-go starting with great information architecture and very detailed wireframes. It’s crucial to make sure key elements (call-to-actions, prices, buttons, links) on your website are prominent to the eye and less critical elements take a step back visually.

For example, when planning for an eCommerce site you wouldn't want the company biography section to come before the new products section. Alternatively you may have the new products promoted higher on the page for increased sales and to be seen before the less-crucial elements on the page.

The importance of user-friendliness can't be stressed enough when designing for a website with a lot of information. As a general rule of thumb, the easier to use and understand the better for every audience and target group. Along with well-planned information architecture a website must also include some basic design principles and elements to help best display a website with heavy-content. I won't be discussing all the design theories that exist today but instead listing out a few that can help a modern media-rich website stay organized and visually cohesive. Let’s take a look at what those classic principles and elements are and how they can be used effectively.

Classic Design Principle: Hierarchy
Web Translation: Consider the order of importance for each area of the website in relation to other areas

What your eye first sees when you come to a website or anything visual for that matter is critical for a positive first impression. What first grabs your attention on a website, or alternatively what the eye overlooks, will determine the user's experience and navigation of the website. This is why it is critical to think about and plan ahead for what parts of your website need to be grouped together or what needs to be made to stand out individually. Planning for the hierarchy of elements during a web redesign process will only ensure your website is best structured to aid the user to the most prominent features of the site first. See example below where the simple top navigation sticks to the top as the user browses through the website in our design for Tommy Bahama Furniture. You can also see here that the sub-navigation can be accessed from here during any point of browsing through the shopping experience.

  • Tip: Carefully plan out and choose navigation links and sub-page links to ensure proper category hierarchy is in place.



Classic Design Principle: Repetition

Web Translation: Use similar design elements, equal spacing and consistent branding to create a cohesive user experience

Using repetitive elements throughout your website will allow a content-rich website feel organized and cohesive at every screen size and page on the site. Consider using the same spacing, button styles, line strokes, color palette, font-styles and similar sizing of different elements all throughout your website to create a familiar and cohesive user experience. A common approach I like to use to organize similar information is a well proportioned grid-based web layout or card layout (Think Pinterest). See the example used below on our website design for Tennessee Orthopaedic Alliance where each service is grouped and styled in the same manner with the exception of a different photograph per unique medical service provided. TOA has also used the hierarchy in this section to place the most important services at the top of the grid and the secondary, less-crucial services last.



Classic Design Element: White space or negative space

Web Translation: Provide "breathing room” for different web elements & avenues

White space (or negative space) is an obvious design element which can and must not be ignored when designing and planning for a content-rich website. It’s important to plan for space for the user’s eyes to rest as they read through pages of content, browse through categories or dissect different information-types visually. Our eyes “group” together different information based on spacing alone (or lack thereof) so it’s also imperative to think about which elements you want associated together and which ones need to stand out or be grouped separately. Our recent design for Daramic shows a great example of how to use white space to create a clean interface and allow the text & products to stand out.

  • Tip: Make sure padding or "breathing room" is set at equal heights and widths for elements to create repetition, balance and flow between the different areas of your website.
  • Bonus Tip: Using white as the base of a website can make for a clean, minimal look that allows rich media and content to shine. A great well-known example here is Apple's website.



Classic Design Element: Color
Web Translation: Consider using color as a main design element to help distinguish different parts of the site or to create hierarchy between elements

It's important to consider your color palette from the start of the planning process of your website and make sure it is setting the right tone for your brand. Color can be used to draw attention to critical parts of your site by creating contrast or alternatively make less critical parts secondary with less contrast or more muted tones. Consider using color to help organize content and call-to-actions on your website. Be sure to choose a cohesive palette starting with your primary colors or brand standards, neutrals/secondary colors and if necessary another color to help elements "pop" off the page. Check out the color palette used in our recent site launch for, Albemarle, which exhibits an equal balance of bright colors, muted colors and white space.

  • Tip: Use the same button colors, link colors and highlights and throughout the user experience to make call-to-actions stand out and be cohesive.
  • Bonus Tip: To help solve the many display issues often caused by lack of knowledge on color and ever-changing technology, Google has come up with Material Design Standards with the best colors to use on the web no matter the screen-type. This guide has become a great resource of knowledge for designers and developers throughout the entire digital industry.



Classic Design Element: Line
Web Translation: Consider using lines, or the absence of lines (negative space), to visually divide important areas of your website

Lines and division are critical in modern web design with multiple elements competing for real estate on your screen. Whether actually using a line or a "stroke" it’s very effective visually to divide up parts of your website or different elements with lines and division. See the above example used under “Hierarchy” where the services are divided up with 3 pixel white strokes to help break up each element visually.

Another great example can be seen on our own work page where each client example is divided up into a grid with lines. Lastly, although lines can be created with actually using a stroke, lines can also be created from just two elements coming together to create division. See the example below on 'our work' page where the orange header creates a line where the gray page background begins.



Overall I hope this article has helped to give you some insight as to how to best plan and organize a content-rich website which can be tricky. At E-dreamz, we specialize in rich website experiences and eCommerce sites. Contact us today if you are interested in learning more or seeing how we can help your business achieve online success through information architecture, content and web design.
BACK TO BLOG

By: Jane Londeree

Senior Web Designer