Website Project Analysis: University of Iowa Home Page

TLDR: Just show me the design already.

As someone who comes from a graphic design background, I like to look at different things and think to myself how would I handle this? What would be the guidelines on if I worked on that project?

One of those designs I’ve considered over the years is the University of Iowa home page. I’m not involved in the UI home page in any manner and this wasn’t something I was asked to consider.

Any time a designer works on a high-profile project, it can be a pretty thankless task. Especially on the web. There is bound to be a portion of the audience who doesn’t like what you did. Or you might have technical requirements that make what you’d prefer impossible. Or even great designs tend to age very quickly. A site that was designed five years ago might have looked great when launched but looks dated now. I recall when the current UI home page was launched several years ago and thinking it was a huge upgrade.

The University of Iowa Website Home Page

The University of Iowa Website Home Page as of November 2018.

None of this is intended to be a slight to anyone who worked on that design or might be working on a new design.

However, if I had full autonomy on that project, these are the guiding principles I would want to follow.

Discovery Phase

Luckily, I don’t actually have to talk to anyone about this, so it’s pretty easy compared to most projects. I get to pick what my priorities are. And they are:

  • Fun, energetic
  • Welcoming
  • Warm and colorful
  • Modern feel
  • Use of beautiful photography, which the UI has access to with photographers on staff
  • Keep most content and menus similar to the current site.*

* I didn’t want to change this too much and is one of the main things that was carried over from the current design. I know what a struggle it can be to limit the number of navigation links, so it seemed like a cop out to just eliminate anything I didn’t think was important. There is someone who thinks all those links probably should be prominent than they are and a battle might result for every one that is removed.

Color Analysis (Black and Gold)

The University of Iowa, like most colleges and universities, has two main colors. They are the unfortunate combination of black and gold. And unless you are a bee or wasp, each of these tend to have issues.

I’ll tackle issues with black first.

Black can be a real problem on the web. It can be overpowering when not handled correctly. Just do a Google search for “using black on websites” and you’ll find all sorts of articles about this problem. So instead of using pure black, I tend to prefer using a dark grey. Also, I don’t like huge fields of black. I’ll talk more about why when I get all touchy-feely and talk about “feelings” in a little bit.

The next issue is gold.

After being in the Iowa City area for quite a while, I’m pretty used to seeing gold everywhere and might be a bit desensitized to it. But I remember at first thinking the use of gold/yellow was just overwhelming. And I think most non-locals feel the same way. A little goes a long way.

My main goal with using black was to use it sparingly and not use pure black. I’d try to use grey or some sort of mix of grey in a pattern.

For gold, I strongly believe that gold is the University of Iowa’s primary color. It is a bright and warm shade and can carry the feeling I want the site to express. But it has to be used carefully. Overuse can be just as bad as using black.

I did a bit of research on other schools who had black or gold as one of their two colors as well. The list of those schools is below.

SchoolColor OneColor TwoColor Three
University of IowaBlackGold
Purdue UniversityBlackOld Gold
Vanderbilt UniversityBlackGold
Harvard UniversityCrimsonBlack
University of MissouriBlackGold
Northern Illinois UniversityBlackCardinal
Oklahoma State UniversityBlackOrange
Providence CollegeBlackSilverWhite
University of South CarolinaBlackGarnet
Texas Tech UniversityBlackScarlet
Wake Forest UnviersityBlackOld Gold
University of Colorado BoulderBlackGold
Georgia TechBlackGold
University of IdahoGoldBlack
University of GeorgiaBlackRed
University of California Los Angeles (UCLA)UCLA BlueUCLA Gold
University of MarylandBlackRedGold
Arizona State UniversityMaroonGold
Iowa State UniversityGoldCardinal
University of WyomingBrownGold

The UI’s home page really relies on black as it’s primary color and I think that is problematic. If the site was for the football team and wanted to act tough and mean, I think using an abundance of black is just fine. But my goal for the UI brand would be bright and welcoming. I’d want it to be fun and energetic.

With sparse use of both of the main colors, I would recommend using bright, colorful photography as the main source of color.

I can go on about color theory or other branding guidelines, but I’m hoping to keep this relatively short and sweet, so I’ll leave it there.

The New Design

I find I get into discussions about design theory and reasons I would recommend changing one thing or another and I don’t think it is as impactful as actually showing what I mean. With that in mind, I have created a functional UI Home page that demonstrates these guidelines. I have made three variations of the new design. Links and details are below.

Option One: Static “Hero” Image

University of Iowa Home Page Redesign Version 1

The University of Iowa Home Page Option One: Static Hero Image

 

Option Two: Muiti-Image Slideshow 

University of Iowa Home Page Redesign Version 2

The University of Iowa Home Page Option Two: Multi-Image Slideshow

 

Option Three: Looping Video

University of Iowa Home Page Redesign Version 3

The University of Iowa Home Page Option Three: Looping Video

 

Interior Sample Page

University of Iowa Home Page Redesign Interior Sample Page

The University of Iowa Interior Sample Page

Disclaimers

Logos, trademarks, images, etc. are owned by the appropriate entity. Mostly the University of Iowa. This is a personal design project, not intended to harm or infringe on anyone. Please don’t sue me.

These designs are build to be fully responsive on mobile devices. They have not been coded in Drupal 8. Doing so just seemed like a waste of time and a bit of overkill.

Also, I’m not a fan of looping videos on home pages. There are issues with when it will work without all browsers supporting automatic play on them now. I still come from a time when not everyone had broadband, so there are delay issues I’d be concerned with if all your target audience won’t mind loading even a short and lower resolution version. Selection and use seem to not always be well thought out either. I’ve seen some examples that feel like they are intended to trigger a seizure rather than leave a positive impression on visitors. To me, it feels like the flavor of the week in current design trends. But that is a topic I can spend a whole other blog post on. But I wanted the focus to be on the design overall, not on particular design features. I wanted to present it with some options, so any criticism would be made on my main points, not on the lack of something like a looping video.

Summary

Ultimately, this is just a personal project. Simply a creative outlet. It’s not intended to criticize anyone but something I think can make people think about how important design is to any project. Websites can be very technical things and striving for a beautiful design can often be an after-thought, if it is considered at all during the development process.

It is so easy to create a “good looking” website now. There are tons of WordPress themes that can get you most of the way there now too. It’s common to see someone throw stock photos into a template, slap on the company logo and call it good. Each element should be considered both individually and as part of the whole. Design shouldn’t be the only driving force. If a site isn’t well designed technically, it can suffer just as much. User Experience. responsive design. Navigation. Accessibility. Search Engine Optimization. These are all just as important. And for a layperson, these can all be hidden or not as obvious.

But even if a visitor cannot express it in words, there is a feeling that people get when they see beautiful design compared to just something “slapped together”. It’s something that can be felt that careful consideration was made to every element. How relates to other elements and how they are work together for a final design.

William Easton
November, 2018

 

Photography of Iowa City Area Chamber of Commerce 2018 Ambassador of the Year William Easton and Jennifer Banta

Chamber Ambassador of the Year Thank You

On this past Thursday, November 10, 2018, I was presented with the 2018 Ambassador of the Year award. It's a great honor. The event itself was wonderful and as someone who typically sites in those events, I'm thankful that the chamber staff…

Graduate Iowa City Getaway Giveaway!

  At William Easton Design we love local businesses, and we love sharing them with you! In that spirit, we are partnering with Graduate Iowa City for a Getaway Giveaway. If you haven't seen The Graduate you are in for a treat, think…
Win Tickets to See Solo: A Star Wars Story!

Win Tickets to See Solo: A Star Wars Story on Opening Day!

Hey Star Wars fans! Are you ready for the premiere of Solo: A Star Wars Story? We know you are, and we are giving away 4 tickets to the Friday night showing (7 pm). But that's not all, we have reserved the best seats in the house at…

Test Blog Post

Hello, world! We now have a blog.