CMU Redesign
Individual Project | Web Design

Quick Facts:

Role:

Web designer

Time:

Fall, 2013 (2 weeks)

Client:

Carnegie Mellon University
(51-828: Advanced Web Design)

[Skills]
Methods:

Paper prototyping, content strategy (IA)

Tools:

HTML5, CSS3 (media queries), Illustrator

Deliverable:

Demo

Quick Facts:

Please see previous slide

Project Summary

This project was a short two-week project for 51-328: Advanced Web Design, and our goal was to design and execute HTML and CSS prototypes for a responsive webpage based on www.cmu.edu. The goal was to understand the way in which the viewpoint resolution and size affect the way a website is used and to think critically about how content should be prioritized for different experiences. The overall visual brand of the cmu website should not be altered.

Process

I started this project by first evaluating the page for its current visual page structure and broke it down into chunks of related information. The current CMU website contains a vertical menu on the left as well as a horizontal menu. I consolidated these menu items into one consistent accessible menu on the top of the page.

Information Architecture Design Rationale

Most of my thinking about this project was around content and navigation.  I eliminated options with care. I realize that calendar might be a hot link that a certain population has grown accustomed to having on the front page, but it’s really easy to get to with one extra click. In general, all the things that went away were links that are literally one click away on another page. I also bumped up the visibility of the search to help counteract this.

Visual Design Rationale

I based the visual design around content and nav, by making sure that this landing page allowed users to see what content was there, but also readily and easily get to where they need to go.

Allowing them to have that same experience across devices and viewing widths informed the structure of my very modular visual design.

Responsive Design

I then planned three viewport scenarios: phone, tablet, and desktop, and rendered rough wireframes of my proposed page composition for each look. These sketches were turned into Illustrator mockups for each viewport scenario and then into a fully functional page in HTML5 and CSS3.