A while back, I created a guide outlining some common tips for designing WVU-branded websites. I discussed some common design principles: using a grid to unify page elements, rules for typography, keeping your content balanced and grouped appropriately, as well as how to size page elements to establish a visual hierarchy. If you need a refresher, please check out the original guide. I thought I’d write a follow-up outlining some common mistakes I see designers make and offer some tips on how to avoid them, based on following similar design principles.
Over-Using the Topo Map Pattern
As a general rule, avoid leaning too heavily on the WVU topo map element. This elements is meant to help break up your content in a way that makes it easier to digest; it helps differentiate content sections from each other. Using it everywhere defeats this purpose. Here are some tips to follow when using the topo map pattern:
- Don’t use the topo pattern on adjacent components. This can make your page look too busy. Better to use a combination of color, photography, and the topo pattern to create visual contrast from section to section on your page to make each section look ‘fresh’ relative to the others.
- If your component background uses the topo pattern, don’t add the topo pattern to elements inside your component. This creates way too much visual clutter and hampers the legibility of your content.
- Don’t use the topo pattern more than once or twice on a page. If you use it more than once, make sure you don’t use it on adjacent components.
The same rules apply to the WVU grid patterns.
Bad
Good
Over-Using Full-Bleed Photos
Great photography can accentuate your content, but relying too heavily on photography can end up distracting from your content, turning your website into a glorified photo gallery. Using too many components that have full-bleed background photos dilutes the visual impact of each photo, and can cause performance issues with your website (the more large photos on your site, the bigger the file size, the longer your page takes to load). Here are some tips when using full-bleed background photos on a web page:
- Don’t use full-bleed background images on adjacent components. If you use multiple components that have full-bleed background photos, try to make them one (two is even better) components apart.
- If you use multiple full-bleed background photos on a page, consider adding a background effect (like the luminosity effect) to one of them (ideally not the primary photo on your page, but a secondary photo further down the page).
Bad
Good
Stacking Heroes
We offer a number of components to highlight an important call to action on your web page (typically called ‘heroes’ or ‘action heroes’). When used appropriately i.e. paired with components that do not carry the same visual weight, these components can help create a strong visual hierarchy for your content. However, when you use only heroes and action heroes for your content, this can weaken the visual hierarchy of your content (if everything is a hero, nothing is a hero). Here are some tips on how to avoid this problem:
- Don’t use an Action Hero Banner component next to a standard Hero component. Sandwich it between two components that carry less visual weight, like a Page Collection component, or use a different component, like an Action Hero.
- If you use an Action Hero immediately after a Hero component, don’t apply a background image to both components. Instead use a background color to differentiate the two components.
- If you stack multiple instances of the Action Hero Split component on top of each other, alternate the alignment of each component, so the photo shows on the left for the first one, right for the second, left for the third, etc. (this can be done in the page properties using the “Align” option, or by passing an “align” property into a partial in a template).
- In general, consider the visual weight of each component on your page. If everything is too “heavy,” consider using a different combination of components. You should have a mixture of large, medium, and small-sized elements on your page to establish a strong visual hierarchy.
Bad
Good
Removing Default Whitespace
Do not remove the default padding for the component. When the padding around your content is too small, this affects the visual grouping of your content, as well as creates unintentional visual tension, making it seem as though your content is “crashing into” the edge of its container. If you’re going to alter the default padding, take these concepts into account.
Bad
Good
Ignoring Whitespace
Using the same background color on adjacent components can create too much whitespace
between the content of the components. This interrupts up the
vertical rhythm of your content.
If you have two adjacent components that use the same background color, either
add a border to separate them, or change the background color of one of the components.
If both components are white, you can use the bg-light
color for one of them.