As my team continues to dive into a web redesign for Kent State, I thought I'd begin documenting some of my experiences with the process. You can check back for more updates until the launch of the new website in May 2014.
First, I thought I'd look back at five trends and changes in web design that we've seen since the last iteration of the website was launched in September 2009. These few things really guided the design process and informed the business requirements for the new website.
1. Responsive Web Design
While almost blatantly obvious at this point, the theory behind responsive web design really only came to be a few years ago. As many of you know, responsive design is a technique that allows a website to conform (or respond) to the screen size (viewport) of the device on which it's being viewed. This means, above all, that there is only one website to rule them all - no separate mobile, tablet and desktop versions. Responsive design has profoundly changed how we've had to think of web design this time around, with implications into context (how and where the user is accessing the website), content (is the content well-written and meaningful) and technology requirements (is the user on a large screen monitor or one a feature phone that doesn't support responsive design?). Which brings me to...
2. Modular Design Over Pixel-Perfect Layouts
As a direct result of designs that conform to different devices, gone are the days when we can design one website at a specific width in Photoshop and expect it to look exactly the same when we launch the site. Mobile devices especially have taught us to think about the elements that make up a page as modular elements that make up a larger design system. Brad Frost calls this Atomic Design. I can say that this change has been a significant hurdle when educating others about our process. Of course, for this project we did not get completely away from Photoshop mockups - but I was able to show small and large screen layouts side-by-side in many of the deliverables, along with forming a pattern library of design elements (see an early example of a pattern library in this post).
3. Design and Development are Now One in the Same
The hard line of separation between "design/marketing" and "development/technology" has got to be disrupted this time around. It is simply impossible for the design team to operate in a silo and then hand over final designs to a separate team of developers. This is a disservice to both sides. The developers do not get to have an opinion on how and why certain elements should work and function in a certain way, and the designers do not get any input into how stylesheets and interaction design are interpreted from their designs. Furthermore, there is the potential for a disconnect when the entire group is not looking at the entire user experience from both a design and development perspective. Our teams have gotten better at this collaboration, but there is still a long way to go in designing better together.
4. Interaction Design and Visual Impact (But Also Performance) are Key
While the web has always been a much more interactive medium than print, advances in broadband technology and web standards have made these even more important. CSS3 allows for rich animations that can greatly affect the user's experience. Web fonts (and services like Adobe TypeKit) allow us for the first time to go beyond the standard fonts available on a user's machine and really bring a unique visual identity to the web. A greater focus on video and photography (including the infamous hero images) brings with it higher production costs. With all of these advances, it's important to remember that we cannot forget about performance and accessibility, especially for users who are on slow connections or last-generation devices. Setting a performance budget, I think, is a great way to ensure we don't get too carried away with our visual design assets.
5. Content Is (Still) Really King
I cannot stress to clients enough the importance of good content, especially in the multi-device universe. Without good content, our responsive designs, pretty hero images and great performance mean nothing. The success of all websites should be determined by how often users access them and find them useful. In any business, including higher education, a poor experience with outdated or unsatisfactory content can easily result in a lost sale (or university application). I recommend to all clients who are going into a redesign to think about their content first, and separately, from design and development. Good content carries with it an adherence to the brand, but is also easily readable on multiple devices (think bullets and sub headings), findable (search-optimized) and most of all, easily meets a particular user's needs. Tools like JumpChart, which allow the user to write and map out the content ahead of the CMS stage, have been particularly useful for this.
Please check back for more updates and thoughts on the redesign project in the coming weeks.