Skip to main content

Tips for Designing WVU Branded Websites

The examples below show a list of solutions to common issues when designing WVU websites. This should serve as a checklist to follow before submitting a design for approval. If you follow these tips, it should speed up the approval process.

Use the Grid

Use the grid to align elements and create unity. In this example elements are out of alignment. The elements should not look like they are floating or crashing into each other. Keep spacing consistent and avoid visual tension.


Bad grid

Solution:

Good grid 

Don’t Center Large Bodies of Text

In this example, there is too much centered text, causing the eye to lose track of where each line begins as the user reads the text. Use less text or left-align it.


Bad centering

Solution:

Good centering 

Keep Elements Balanced

In this example, there is too much content on one side of the pattern, throwing off its balance and creating unintentional whitespace.


Off balance

Solution:

Good balance

Group Items Appropriately

Elements should be grouped according to the law of proximity. Users perceive a relationship between items that are grouped together. In this example, the hero elements look disjointed and the social media icons blend with the navigation.

Bad proximity

Solution:

Good proximity 

Make Sure Text is Legible

In this hero unit, the text is hard to read over the photo. Crop the photo differently, use the vignetting, or use the small hero pattern to inset the photo.


Bad legibility

Solution:

Good legibility 

Scale Elements to Create Hierarchy

Create a large enough contrast in scale between elements to create a strong visual hierarchy. If two elements should not compete for attention, consider creating more contrast in scale between them. In this example the hierarchy is weak.

Bad scale

Solution:

Good Scale 

Center Items Visually

When centering an element vertically, use the optical center, not the mathematical one. In this example, the logo is mathematically centered, but looks like it is sagging in the space.


Bad visual center

Solution:

Good visual center