Final candidate, Southwestern.edu homepage

Hi everyone, and welcome to the Southwestern redesign blog.

As many of you know, all of us at White Whale came to campus a few months ago, stayed for a few days at the lovely San Gabriel House across the street from campus, and talked with as many people from Southwestern as we could find. Students, faculty, staff, dogs, Pirate Bikes, etc. We interviewed everybody. And during the course of that trip we started developing ideas and strategies for this Web design process that we've been refining, publishing, debating, revising and fine-tuning since then, both internally and in collaboration with Southwestern's very capable Web redesign committee. It's been a lot of fun.

The final plan for the new Southwestern site, which we'll be implementing over the next few months, includes a new tool for managing site content that will let more people maintain their own Web content, taking some of the load off Southwestern's Web staff; tools for creating, tagging and sharing news items; lots of refinements to the search engine; several new ideas for gathering and presenting content for the site; and a lot more. You'll be learning about all those details in the days to come.

But for now, we're going to start with the final release candidate for the Southwestern homepage. We're posting it here for public review, and we welcome any comments that you have on the design; just because this is a "final" design doesn't mean it's 100% done. We're still very much open to community input; we can't guarantee to make every change that is requested, but we do promise to consider every serious suggestion.

Because we're designers, we like to spend time explaining the reasoning and philosophical approach we've taken to produce this design. (Designers are annoying that way.) If you'd like to skip the details and go right to the final product, feel free to scroll down to the end of this post. But if you're interested in the ideas behind the design, read on:

Design philosophy

Some ideas that sound like cliches in writing make sense when expressed visually.

The idea that Southwestern students “think outside the box” or “color outside the lines” is something that wouldn’t work in print; it would come off as empty marketing language. But—like many cliches—it contains a kernel of truth. The fact is, Southwestern is seeking students who are willing to think outside conventional paradigms, to take chances, to make difficult choices.

The typical A student who graduates from a Texas high school, and wants to take the path of least resistance, making as few sharp turns as possible, is likely to wind up at the University of Texas. A top graduate from somewhere else in the country who is seeking the most direct path to a Wall Street job, or who has designs on a conventional “liberal arts education” is likely to head for the Northeast.

The students who have found Southwestern, it seems to us, are those who have looked outside the path of least resistance. They’ve chosen a school that may not have nationwide name recognition, and may not be in a state known for the liberal arts (or liberal politics)— but they’ve found something at Southwestern that resonates with the less conventional path they envision for their lives.

This idea—that Southwestern seeks students who may not fit conventional patterns, and that those students are looking for Southwestern— is reinforced in a subtle way by a Web design where a painted background doesn’t conform perfectly to a crisp, conventional box.

The box around this design represents convention, predictability and utility—qualities that are essential to a well-functioning Web site. The misprinted, outside-the-line paint background represents the creativity, questioning, and willingness to take risks that are the hallmarks of the ideal Southwestern applicant.

The gold paint background achieves a couple of project goals. First, the several colors involved in a “paint stroke” help us achieve a realistic impression of gold without having to rely on a single color (for there is no single flat “gold” on the Web). Instead of making a choice between olive/beige and bright yellow, we can have them both, by pushing a strong gradient-based version of yellow that will find expression on the site in several ways. (The medium gray used as an accent color helps bring the gold out effectively.)

Finally, the use of paint in particular reinforces Southwestern’s deep engagement with the arts. This element of the design will be made more prominent in the separate design for the Sarofim School of Fine Arts.

Title, motto, search, navigation

We have chosen a strong, extra bold, all-caps sans-serif font (Gotham Black) for the SOUTHWESTERN title banner. This provides a nice contrast with the Galliard serif wordmark that will continue to be used in all formal contexts.

The title is complemented by a motto that will change on each refresh to express key brand messages (Engaging Minds, Transforming Lives); key elements that set Southwestern apart (Since 1840 or Georgetown, Texas); its original Latin motto (Non Quis Sed Quid); and other messages, ideas or provocations as dreamed up by the Web group. The idea set by the changing motto is that no one phrase can sum up Southwestern to the world, but rather that Southwestern is a dynamic, changing place. Some mottos will have a more lighthearted air; others may occur on a much rarer basis (say, 1 out of 100 page refreshes).

The oversized search box advertises itself, and invites users to explore the site with search (which we will ensure is a transformative experience in its own right).

A small amount of blank space after the header creates more prominence for Southwestern’s name, and allows the painted background to show through clearly. Then a main navigation, which borrows some of its design from the modern concept of a tag cloud, presents the site’s 12 categorized primary navigation links in a compact yet attractive format that makes it easy to survey at a single glance.

Then a gray utility navigation bar, with text reversed in gold, presents functional navigation for audiences (For Students, For Alumni, etc.) and quick links to the Directory and Quick Access, an all-in-one links page.

Note: We are exploring adding Quick Access technology to the primary site search, which might open up a spot here for a link like Offices & Services.

The content of the homepage

As an early step in our design process, we recommended that Southwestern include a fairly large amount of content on its homepage.

This is because we believe Southwestern has something to prove, a lot to say, and a long way to go to tell its story to the world. Southwestern’s academic excellence, affordability, and dynamic community all ought to find expression on the homepage. While a quieter, image-driven design might be nice to look at, we feel backing that graphic approach up with lots of text, highlighting many areas of the Southwestern community, is the best way to get started. Visitors to the site will get the impression of stepping into a dynamic community, buzzing with activity.

Page content: Left side

The second most prominent feature of the page, besides Southwestern’s name, is the first half of a sentence about Southwestern’s location. “JUST OUTSIDE OF AUSTIN,” the page begins, followed by some welcoming text about Southwestern. The design naturally leads the eye downward from here, to images and text that reinforce Southwestern’s key messages.

“Right Now at Southwestern” contains short notes that tell what’s happening throughout the community (similar to the style of Twitter: https://twitter.com/). “Southwestern is Affordable” states one of SU’s key points briefly and plainly; “27 Departments” lists the many fields of study available to SU students; “Go Pirates” gives some real estate to SU’s athletic programs. Photos used in this area are general campus photos, that align with the content following them if appropriate.

A “footer” area with Southwestern’s address and contact information anchors the left side, with a background that mirrors the painted area at the top of the page.

Photo gallery

The homepage will always feature a photo gallery, although its content may change and shift as needed. Photo galleries on particular topics— a walk around campus, inside/outside the classroom, Southwestern’s past and future, or any other topics to be developed— will be presented on the homepage, either one at a time or in rotation.

Page content, right side

The right side, with a gold background complicated by a semi-transparent background of gold paint, is for dynamic content (news and events) and evergreen “quick links” for sites like the library and mySouthwestern.

One news item should be paired with a large, compelling photo. The photo in the rightmost column should be another general interest campus shot. The one currently used in the design— a Pirate Bike on the campus green— may be used permanently, as it ties the yellow/gold colors of the design directly to Southwestern’s branding.

The goods

Here is a link to the new Southwestern homepage design.  Click or refresh to see different views of the homepage.

OK, it's your turn

Click below to leave your comments.  You don't have to sign up for an account to comment; however, we do ask that you identify yourself by name, and let us know your relation to Southwestern, along with your comment. Anonymous comments may be deleted.

Enjoy!

- Jason Pontius, White Whale Web Services