Inspire. Inform. Illuminate.
The University of Illinois tells stories that inspire, inform, and illuminate. We wanted to captivate readers with our story selection as well as with a bold, clean design; educate them, not only about current research at University of Illinois, but about topics of general interest as well; and inspire pride, emotion, and—hopefully—their support.
STORIED serves as an engagement piece for our donor base, and from the very inception of the project our goal was to create an authentic experience for our readers showing them how Illinois is engaged with the important issues in their lives. There are few rich storytelling landscapes quite like a university campus, and ultimately, our stories are crafted to be appealing to a wide swath of our readers. Instead of creating subject-specific silos, STORIED aims to generate genuine interest with stories that reflect the character of our campus. Many of our stories not only cross interests, but disciplines as well. We want architects to click on science stories, engineers to read about art.
Above: Sisters Tatyana and Hannah McFadden were featured in conversation with generations of Illinois adaptive athletes.
Top: Actor Nick Offerman launched the Illinois Storytellers series, a set of personal essays from Illinois alumni.
To achieve this, we brought a modern, minimalistic approach to STORIED’s design aesthetic. Each image, illustration, pull-quote, or block of text is designed together to create an inviting experience for our readers. Our design is bold but not fussy, and we choose our treatments carefully. Generally, we’ve found there are three main concepts to keep in mind:
Consider your audience first
The competition for readership is intense, and university publications can no longer rely on the assumption that their alumni will be attracted to stories solely based on a university connection. We have to compete with everything else in our alumni’s news feeds. We will not stand out if we are not as visually or conceptually compelling as any of the myriad magazines that vie for our alumni’s attention. Give them a reason to click on your story. Make it visually arresting. Come up with content that they haven’t seen before.
Let your photographs tell a story
Every story that we publish relies heavily on large, powerful imagery. At the beginning of each story project, we plan and discuss the images in detail. We use a number of different ways to obtain those images—some we source, but many we take ourselves. This is so we can ensure the consistency and feel of the STORIED brand, while shooting to the size and placement we have planned for the image. It also allows us to shoot the most artful and creative images we can. We keep a close eye on composition, making sure we capture our subjects from a variety of angles, unexpected perspectives, and in planned settings. Rather than just showing up at your subject’s office to take their photo, consider pre-scouting a relevant location and do test photos to see what works best. Take lighting, mood, and texture into consideration. This allows you to have greater control of the quality of the images you create and ensures the photos become visual stories that help tell your narrative. Don’t forget: great images also allow for successful sharing on social media.
Visual storytelling, including thoughtful photography is critical to the success of the site.
Find multiple entry points for your reader
Every reader needs their own entry point into your story because every reader responds to different elements. When we construct a story, we make sure that our message and tone is embedded in every part of the piece—from the headline to the descriptive text, from the narrative to the images. That means that we think carefully about a reader’s experience on a number of levels of engagement: what do we want them to take away? Will we achieve that feeling if they read the whole story? Only look at the photographs and pull-quotes? Only watch the video? We layer these storytelling elements in each story so that a reader walks away with a similar feeling whether they read the whole piece or not.
This multimedia experience took readers through an Arctic exploration that included two Illinois alumni. We worked closely with the Spurlock Museum to translate some of their exhibit about this exploration online.
Evocative portrait photography can help capture the essence of your subject.
The nuts and bolts
So how do we do it? STORIED was developed entirely in-house, leveraging the power of CSS3, HTML5, and Javascript to craft dynamic storytelling experiences. The site is built with a custom Wordpress theme, which allows us to utilize the vast third-party plugin library available.
Many of the animations you see are the result of a single open-source Javascript plugin called “Waypoints.” This plugin allows for the triggering of animation (or any function) as you scroll to an element. For instance, when an image comes into view, you can tell Waypoints to slide-in the image from the left. This technique is not limited to just animation. Similarly, as a video comes into view, you could have it play automatically, or have a soundtrack play as you enter a particular section of your story. Waypoints is an essential plugin for pairing animation or other effects with scrolling events.
We also use HTML5 background looping video, which is now supported by iOS. This consists of creating a short video that loops continuously and embedding this in an absolute or fixed position on your page. This video must be muted and set to autoplay and playsinline.
Adobe Typekit is a subscription-based service we utilize to make our stories unique. It is particularly useful for tailoring headline treatments, giving us the ability to use fonts that are reflective of the personality of the story. Typekit grants access to Adobe’s impressive font library for usage on your site. This opens up options creatively, expanding your font choices beyond Arial, Georgia, and Times—into fonts that might have been more traditionally reserved for print. Alternatives to Typekit include Font Squirrel and Google Fonts.
Good storytelling creates a vibrant experience for your reader, and as universities adopt more mainstream design and multimedia storytelling elements, our messaging becomes that much more powerful and resonant. And it doesn’t take a huge team to create evocative pieces. In our case, STORIED was largely conceived, designed, photographed, written, and developed by two people, with a handful of contributors and colleagues serving as sounding boards. The response has been overwhelmingly positive, both from outside readers as well as units across our own campus who are integrating similar approaches now in their own communications.
storied.illinois.edu
Images Courtesy of University of Illinois