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.
Solution:
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.
Solution:
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.
Solution:
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.
Solution:
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.
Solution:
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.
Solution:
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.
Solution: