Think about the average college’s website for a second.
Chances are, it feels a little out of date. You probably can’t even read its content on your phone without lots of pinching and zooming.
Crazy right? It's the virtual front door of the campus. This website needs to attract and inform current and prospective students, their families, alumni, professors, and donors. It has to be user-friendly, convey value to different personas, and guide visitors to other parts of the site. Oh, and it should also be visually pleasing.
The good news is that not all colleges have this problem. There are quite a few schools with beautiful, helpful, and intuitive websites – you just have to know where to look.
So we decided to showcase the best of the best U.S. college websites below. Check them out and learn what about their web design makes them so brilliant. (And if your alma mater is on the list, be sure to let us know!)
14 of the Best College Websites
1) University of Maryland
With a website as sleekly designed, interactive, and easy to navigate as UMD’s undergraduate admissions site, it’s no surprise they've already snagged one of the final five nomination spots for best admissions website this year. The website was designed by the communications firm Frause.
There are a number of great design elements on their site, but we especially love the playful fonts – which DCInno pointed out are “seemingly similar to the type used for Where the Wild Things Are, reminiscent of those childhood years, but with a sophisticated flair.” Unique typography is an element of great modern web design, as it helps customers immediately identify them versus their competitors. For example, The New Yorker’s typography is recognized by consumers around the world because of its unique style and appearance.
2) University of Notre Dame
Notre Dame’s website is beautiful on desktop: big, high definition images; cool, interactive portions; easy navigation. But what makes their website even more special is their use of responsive design. Now that Google’s algorithm awards mobile-friendly websites, it’s even more important for organizations to optimize their websites for visitors coming from desktop, tablets, and smartphones.
Here’s what Notre Dame’s home page looks like on desktop:
And here it is on mobile:
Launched in 2012, the website was designed by an in-house team, and responsive design was among their top priorities. “We wanted to make the navigation as intuitive and simple as possible,” explained the team’s web designer Philip Zastrow. “In a lot of ways a homepage is a portal, but we want it to be a more experiential, informative portal.”
3) Bucknell University
Bucknell’s website, which was nominated for Best Website Redesign at the Webby’s in 2014, is a wonderful example of website personalization at work. The first time you visit their website, you’re met with the default, impersonal homepage – which, by the way, is beautifully designed with high-definition visuals, lots of negative space, and simple navigation. But you’ll notice that right below the image, users have the option of customizing the page. See it on the bottom there?
When you click “Start Customizing,” you’re met with an option to turn off any section of the default homepage you’d like. Not interested in arts and culture updates, but want to keep the sports and recreation stuff? Simply turn Arts and Culture off. The next time you visit the website on the same device, you won’t see Arts and Culture – although you can turn it back on at any time.
4) University of Chicago
UChicago’s website design was awarded with two high-profile Webby Awards in 2013: best overall best school/university website and the Webby People’s Voice Award. Check out how uncluttered the content is: Instead of putting paragraphs of information and updates everywhere, you’ll find large, high-definition images paired with bite-sized chunks of text. It was created in-house by the university’s IT and communication departments and launched in September 2012.
5) University of Michigan
UMichigan’s website got a Webby’s nomination for Best Website Redesign in 2014 – and for good reason. The newest version of their website is worlds better than it was before. Here’s what the redesign looks like:
Compare that with how it looked before:
The most noticeable difference? The huge images in the updated version, along the text boxes of quick, simple statistics reinforcing the school’s value, such as "19 Schools + Colleges" and “#1 Public University,” which users can click into for more details.
6) Rhode Island School of Design
RISD’s entire mission is to educate and inspire the next generation of artists and designers. So why not use the school’s homepage to showcase student artwork? They nailed the execution here with big, crisp images users paired with short text that can scroll through. The website was created in-house and launched in 2011, and it was a Webby Award honoree in the School/University category in 2012.
7) George Washington University
Visualizing what a college campus looks like, especially when it’s located in a busy city center, can be really difficult for anyone new visiting a campus. But GW found a way to make it easy – and even kind of fun.
Their revolutionary virtual tour website, created by Campus Tours Inc., features interactive maps of their two main campuses, as well as one showing the main campus in the context of D.C. as a city. This way, visitors can get a better understanding of where it is in the context of city landmarks like the White House and the JFK Performance Center. You can hover your mouse over any building, street, green area, or body of water to see its name, and you can even “turn on” labels for shuttle stops and visitor parking areas. Overall, it’s both user-friendly and visually stunning.
8) Middlebury College
Middlebury’s website is unlike any college website I’ve seen before. Their homepage, designed by White Whale Web Services and launched in February 2010, features a number of colorful bars that act as a navigation system. Users can hover their mouse over each bar to see where clicking it would lead them – such as a video snapshot of the community, homecoming highlights, a news story about new funding, and so on. Hover effects like these are great tools to help with a user’s experience. The design isn’t intrusive, and yet it helps web visitors keep track of where they’re looking on a page.
9) University of Nebraska-Lincoln
UNL’s website is a great example of simplicity in design. It limits its use of copy and visuals and embraces negative space, which can feel like a relief to users. Too many organizations try to cram a ton of visuals and text into a small space, whereas UNL’s design is given room to breathe and helps users find things better. The site focuses on two calls-to-action: “Play Video” and “Apply Now." The use of video in the background instead of your typical, static background is visually stunning, too.
10) Virginia Commonwealth University
Speaking of calls-to-action, VCU’s website does a wonderful job of using colorful, well-positioned CTA buttons to direct visitors to the next logical step. Their homepage design is an image carousel, and each one has a clear CTA encouraging users to "Read More,” and so on. Underneath these stories are more calls-to-action using actionable language like “Register for classes,” “Apply now,” and “Plan a visit,” accompanied by relevant icons. After all, the goal of the homepage is to compel visitors to dig deeper into your website. With clear CTAs, their homepage becomes a conversion engine, not just a brochure.
11) Bates College
When you look at the top of Bates’ homepage, you’ll notice there are fewer navigation options than many of these other websites. They’ve still included a dropdown menu at the top, but overall, they’ve reduced the number of links in the header and sidebar of the site. Although reducing users’ options may seem counterintuitive, it can actually help guide them to your most productive content. The designers of Bates’ website simplifies navigation by putting their most productive content – which are clearly labeled with identifiers like “Future Students,” “Parents,” and “Alumni” – at the bottom but above the fold.
12) Brown University
Brown’s website has lots of images, but they use a neat trick to make it not seem so overwhelming: Their background photos are all muted while their featured content (in the example below, stories about student research) are large and vivid. This helps reduce the visual clutter on the page and give emphasis the university’s prime focus: research. The website took two years to build from 2008 to 2010, and it was created in-house by the Computer Information Services team with the goal of showcasing the university.
13) Clemson University
It’s not uncommon to hear Clemson students claiming they “bleed orange” – thanks to their university mascot, the Tigers. The designers of the university’s website successfully carried over that branding by including elements like a bright orange banner, an orange scroll bar, and other orange accents along the way. The tiger’s eyes in the header give the website some personality, too. The site was created in-house by Clemson’s Web Leadership Team and Communications Council and was launched in 2013 and was nominated for a Webby in the category of Best Website Redesign the following year.
It’s also mobile responsive. Here’s what the website looks like on desktop:
And here it is on mobile:
14) Oberlin College
When we visited Oberlin’s website for the first time, we were blown away by the stunning homepage image – which, along with being visually pleasant to look at, also gave us a great idea of the school’s culture and values. Instead of news updates and blurbs about academic offerings, the folks at Oberlin chose to showcase their student life. “Oberlin is a place of intense energy and creativity, built on a foundation of academic, artistic & musical excellence,” the homepage reads. The emphasis on culture shows they’re catering content to prospective students above all.
Which college websites are your favorites? Share with us in the comments.
from HubSpot Marketing Blog http://bit.ly/1Jxhg3e
from Tumblr http://bit.ly/1CPzv7f
No comments:
Post a Comment