Overall design explanations

Photography and simple typography is what we based the visual design around. We were lucky to have a vault of great photography of real students and campus scenes. The wide-screen banners were  tricky for really large work stations. But we tried to balance the story with different kinds of photos.

Broadway campus Seattle Central

MESA student at Seattle Central

Wood Technology front page hero Seattle Central College

Wood Tech program tiles Seattle Central

I wanted the grid to be a little more refined than default stacking at small sizes. For tiles I tried to only choose photos that were somewhat abstract and could be used as background for text and look okay at small sizes. I wanted the image to clearly communicate what it was for.

Small screens top of front page for Seattle Central College

Small screens top front page programs section Seattle Central

Learn in the heart of the city front page of Seattle Central

What I learned

A lot of time needs to be allowed for responsive sizing and testing and building in the browser. I switched my design workflow to more work in the browser. A long iteration cycle in Photoshop or Illustrator seemed to slow the momentum. So much learning comes in the browser sizing behavior.