Gallery System for School of Design
Individual Project | Web + Visual Design

Gallery System for School of Design
Individual Project | Web + Visual Design

Quick Facts:


Information architect, visual designer


Fall, 2013 (2 weeks)


School of Design at CMU
(05-828: Advanced Web Design)


Content strategy (IA), Sketching, wireframing, visual design


Illustrator, Balsamiq, Paper53 on iPad


Gallery system high-fidelity mockups

Quick Facts:

Please see previous slide

Project goal: To design a gallery system for the new CMU School of Design website. This gallery system needs to accommodate a variety of media in several different contexts and work on many platforms. As the targeted website is already existed, the design that created needs to be functionally effective within existing framework while being true to the current visual system. Types of media can be:

  • Still imagery
  • Video
  • Graphs, charts, or other graphics
  • Photography
  • PDF downloads

Contents to consider:

1. Newly released School of Design website and its visual styles can be viewed here

2. The website has no good way currently to showcase media tied to the school. Some of the contents might include:

  • Student work shown on a student page (photo, still image, or video)
  • Student work shown on other pages (i.e., a course page, story page, faculty page)
  • Faculty work shown on faculty pages (photo, still image, or video)
  • Faculty work shown in other pages
  • Photos or videos of happenings
  • Photo or video from lectures
  • Audio interviews or other audio files


My Solution

Check out real pixels in a PDF (6 pages)


Sketches and Design Process work

I first listed the contents that might be valuable to add to the school’s website, and then I listed four information item organizing structure, in order to have in mind what content can be used in what way to present effectively on the website. This helped me to map the attributes of media and its possible presentation capabilities.

I then sketched a few ideas to display multiple media in a limited size of space, like a highlighter. The reason that I am thinking in this direction is to practice some of the mappings that I framed from the earlier process, and to see it from the perspective of its visual structure, the information complexity, and whether they are easy to be interpreted by whoever coming to the site and looking at them.

I also thought about having a stand-alone page to be a “landing page” for all multimedia on the school of design website, something like DOMAIN/gallery strikes me a lot at this point. So the system will be more flexible and salable in rendering a variety of different types of media files. Here is one of the approach I tried (including access structures like linear, hierarchical, and index, in order to accommodate different affordance of the media files!):



We did a couple of in-progress critique of our work in the class of Advanced Web Design (thanks to Prof. Twigg & the entire class!). After the inspiring critic, I had got chance to re-probing the problem in many more valuable ways that I did not foresee. For instance, the organizing pattern that I spent most of time investigating can be more varied, such as using tag filter, a word cloud, time-based displays, uses of modal screens, etc. I then realized that different media, audio, video, and pics should all be accounted for a branding image, and think big for perspective students who are coming to the site and see selected work from the School of Design.

In this sense, I shifted a bit my focus from trying to reorganize the existing items to actively showcasing the work more effectively. Below are some of the evolving work that I started in mobile, aiming to find a clear and simple (often linear and to the point) navigation for the audience to browse my system.


1st version in mobile
2nd version in mobile

I decided to go with the 2nd version for its ease of identifying most important information to focus. 1st version creates more distraction using the grids on a phone. With a highlighted background and a call-out shape, it is natural to draw the visual attention into the content presented in the frame, with direct and simple category information on the top region that is ready for quick glancing. Based on the on-page light navigational pattern (tabs instead of all in one side menu), I also sketched what the tabs will be like in the desktop/tablet view, in correspondence with the mobile version.


Then I feel good to go far from this point!

Wireframing for the Entire System and… Polish!

Taking “mobile first” to start the navigation design, I move forward to adapt a thoughtful but still simply elegant system design approach more confident. The system delivers three view-points respectively: desktop, mobile, and tablet.

Desktop View

Design Rationale

To finish a project like this is refreshing. I recorded the rationales for making key design decisions, interactions and major system flows in the document to facilitate my thought process.