A great-looking layout has undeniable value, drawing visitors in and engaging them in the material. The design must also further the primary goals of the site’s visitors and service owners.
Make Information Easier to Find
Create a Visual Hierarchy
- Make good use of proper hierarchy and how the page is laid out.
- Type sizes and line breaks should be determined based on how you'd like your audience to digest the message.
- Use proper heading structure and styles to reinforce how content is related.
- Use color as a tool to reinforce relative importance.
Use Standard Layouts
- Standardized layouts help the user orient to a new page and reinforces mental models established by other sites.
- Locations of navigation, main content, supporting content and alerts are easy to find, even on a new site.
Consume and Explore
Make Content Easy to Consume and Explore
Focus on Responsive Design
New websites are being created with responsive design in mind—making the page scalable and resizable for differently-sized screens, including mobile devices. It is important that mobile viewers have an equally designed experience on our websites.
Help Users Complete Tasks by Balancing Simplicity with Visual Cues
Select Icons Carefully
A well-selected icon can reinforce or draw attention to an action. Icons should be "obvious" and not up for interpretation. In cases where icons are not globally used, accompany the icon with text.
Include Negative/White space
Using negative/white space allows the eye to rest before engaging with the content.
Promote Credibility and Brand Awareness
Use Proper Branding
All websites should be properly branded with the top blue ITS or brand banner. This makes it clear that the site is part of Information and Technology Services, as well as the University of Michigan. Proper branding makes navigating between ITS pages consistent for the viewer.
Selecting Pictures and Images
- Use pertinent, compelling images to reinforce the text on the page. Where possible, use current, local (visibly U-M) images. If there are no images that are appropriate for the topic, leave the image out.
- Size and crop images to focus only on relevant content. Edit out any distractions and simplify the image to make it easier for the audience to understand. Properly framed images can add to the impact of the content on a website.