Patternlab Template
After extensive research and design, the Department Brand Management released the new and improved OSU homepage. This page covers the specific elements and design philosophy incorporated in the new template.
A new way of thinking
Take a step back and look at your website from an external user’s perspective. What would someone with no prior knowledge of your department need to see and do on your website? How could you organize content in a way that makes sense to them?
These are all great questions to ask while working through your migration.
Information foraging
The information foraging theory infers that users on the web use the same techniques to search for information as our ancestors when they hunted for food.
Think "scan" not "read"
Users don't necessarily read every word on a page. They have a specific task in mind and they scan the page until they find the keyword they were looking for. This is where it's important to organize content visually and make it scannable.
What does a scannable page look like?
- It’s high-quality pictures and videos paired with short digestible pieces of information.
- It’s eye-catching headers and subheaders, ordered sequentially.
- It’s buttons and links with strong call-to-actions (CTA's).
Navigation structure
Recent studies suggest that users can only remember 3-7 options at one time, which drove our decision to move away from the "mega-menu" style navigation that we have incorporated in the past.
Rather than present the user a long list of links at the top of the page, we are focusing on how to layer content in bite-sized pieces and give them more information the deeper they go.
Brand voice
Our school has a big personality and it's important that our website reflects that, through our words and other visuals.
Writing for the web
Not all users enter the website from the home page. Any page of your site could serve as the front door, depending on a person’s search query or what link they came across in an advertisement, reference article, or social media site. That means even pages that are designed for internal audiences must be understandable to a new user and represent the university well. For tips on how to format your content for online reading, please see our Writing for the Web Guide.
Photos and Videos
Images speak louder than words, and this is especially true on the web. Before a user reads the first headline on a page, they are ultimately drawn to your page's photos and videos; so, it's important to choose visuals that are not only compelling but authentic as well. To access our campus gallery, please contact our photography team.
For tips on how to choose photos and videos for your site, please see our Photo and Video Guidelines sheet.
Our image snippets are responsive, so they will resize and crop based on the user's screen size. To make sure your images look good at all breakpoints, you can refer to our Image Sizing Guidelines sheet for proper pixel dimensions and ratios.