Greetings, Loyola! Recently I gave a seminar on the design of the Loyola website–how we got here, and how our campus web editors can (and do!) impact the overall look of Loyola’s online presence everyday.
I’m going to break it down for you here.
First, the backstory
The office of web communications first debuted Loyola’s “new design” in the summer of 2008. Why the quotes, you ask? Because the “new design” has been tweaked several times over the years as a result of usability study findings, analytics, and a/b testing. The Loyola homepage as it was unveiled in 2008:
- Modern, progressive
- Simple and unobtrusive
- Easier and more authentic storytelling
- Cohesive - online and off
…And it’s borne from a lot of research, including:
- looking at other universities (hundreds of them!) to see what works and what doesn’t (just because everyone else was/is doing it doesn’t mean it’s right for Loyola
- looking at patterns in analytics data
- focus groups
- and in more recent years, usability studies
Since the initial launch in 2008, we’ve built over 150 separate Loyola websites using the new design and content management system (Drupal).
How our editors affect Loyola’s design
The university’s content editors influence the overall feel of Loyola’s website on a daily basis. They do so in three ways: visual cues, typography, and photography.
When I talk about our web editors’ impact on Loyola’s visual cues, I’m referring to navigation, spotlights, and page rhythm, all of which work together. The cues we’re trying to give our web visitors is to read on, to keep exploring…and to reinforce the original goals of the design of the Loyola website: this is a progressive university with a unique story to tell, and the website is simply a facilitator in that storytelling.
Navigation is the main group of links that form the skeleton of your website–but it’s also any grouping of links, or “link lists.” Navigation is viewed as a single visual unit by visitors, and its best to keep the groupings short. 3-5 brief, descriptive items is best. If you have multiple sets of navigation in close proximity, be sure that the items in each set have a common overall theme. Presenting overly-long lists of links is both cognitively and visually exhausting, and you WILL lose visitors this way. Here’s a good example of effective navigation:
Note that this site has two small sets of navigation set close to one another, but that the coloring makes them visually distinct, and thus more approachable.
Spotlights are another visual cue our web editors use. Spotlights not only provide context to the main content on the page, but they can also provide visual balance. It’s important to be judicious with spotlights, though, as sometimes the content is better served without any spotlights at all. For example, here’s a page that would only be hindered by the addition of spotlights:
And here’s a page that relies on spotlights to visually balance the weight of the page, with the content area and spotlights taking up the same visual length of space:
But wait…remember what I said about how our visual cues work together? Notice the navigation on the left side of the page above, and how it scrolls down beyond the length of the content to the right of it. Think that’s a little overwhelming? You’re right! This is a good example of when to call on the web communications staff to discuss how we might trim down your navigation.
Which leads me to page rhythm, another visual cue. When I talk about page rhythm, I’m talking about the general flow of content on the page, how it’s balanced, and how it (ideally) works together as an overall unit. You want your navigation to work with your content to work with your spotlights, and none should overwhelm the others. An example of a page that could improve–note how it’s imbalanced, weighted to the right side:
But as the note on the image indicates, this could be an easy fix. Placing the video in the body area would reduce the length of the spotlight area, add meat to the content area, and make the page more balanced overall. Easy-peasy! (Yes, I did say that. We fully embrace our inner nerd over here in web communications.)
Type is a big part of the design of the Loyola website. We go over using the appropriate header and paragraph styles when we review content strategy, because it has an extraordinary effect on how visitor-friendly your content is. People need to be able to easily review the content on your page–and the first thing they do is visually scan it. If it’s visually overwhelming, it’s psychologically overwhelming. Overwhelming copy = unread copy. So the lesson here is one you’ve probably heard before, but worth repeating: break up your paragraphs, use lists as needed, and definitely use header styles as they are intended. If you have a question about which header style to use, feel free to consult your header and spotlight tearsheet or review our best practices guidelines for writing for the web. An example of great typography is below–note the simplicity. Using just one header style in the content is sometimes all it takes:
One of the most important elements of the design of the Loyola website is photography, as it can make or break the overall feel of a page–the old saying “a picture is worth a thousand words” isn’t an old saying for nothing! It’s also a design element that’s primarily curated by our wonderful campus web editors.
In choosing photography for your website, pay attention to the following:
- make sure it has a focal point, and that focal point is in focus
- the photography should complement the content on the page, not supplant it
- it should be current – i.e., taken in the last two or three years
- it should be cropped appropriately
Now let’s talk about specific photo areas, the header and spotlight images. In using those, here are my recommendations:
- Header images should complement content; not introduce it
- Header images should be photography ONLY! (That means no ads, no type overlays)
- Header images should tend to be more abstract, horizontal, or “artistic” shots
- Keep spotlight images super simple — these are very small photos, after all
- Also for spotlight images, pay close attention to placement (especially with photos of people–make sure the text bar isn’t covering a person’s mouth or chin)
- Header images should be photography ONLY! (Yep, I know I said this already. No advertisements please.)
I hope if you come away with anything from this post, it’s that Loyola’s “design” is not a concrete, unchangeable thing; it’s constantly evolving and being tweaked everyday by those who we are privileged to have editing our website. I read an article on UC’s rebrand recently where the author (a design professor) said, “design is a process, not a product.” This is one of the most succinct, accurate explanations of what good design is (and how it should work) that I’ve heard in recent times.
From typography to spotlights, to photography and page balance and beyond, our web editors are very much active participants in Loyola’s design process.
Looking for the powerpoint? Download it here.