Foundation for Sites

Illustration & Marketing Site

Foundation for Sites is a front-end framework that helps designers and developers prototype responsive sites quickly.
— Visit Site

Foundation for Sites is a front-end framework that helps designers and developers prototype responsive sites quickly.
— Visit Site

My Role
  • Research
  • Ideation
  • Illustration
  • Visual Design
  • Front-end Code
  • Visual Design
  • Front-end Code

Developed by ZURB, Foundation for Sites is a responsive front-end framework that gives front-end developers and designers a library of UI components and layout patterns to prototype responsive sites quickly. During their world tour to London, Hong Kong, Toronto, Sydney and across the United States, ZURB reached out to thousands of developers and designers to find out what they wanted in Foundation for Sites 6. A clear theme emerged: Prototype to Production. In tandem with the Foundation team creating the new framework, I helped design and code the marketing site — including all the illustration work and icons — to celebrate the huge milestone.

Inspired by all the energy and excitement around the recent space innovations and explorations, I created a new visual language that captures the ambience of space and foreign planets — and helps pull the audience into the narrative. With the backdrop of space and darkness, it consists of warm saturated colors to capture attention, gradients to create depth, and graphical details to create a mature, vibrant look and feel.

Charming and Quirky

ZURB and I wanted to keep the charming and quirky caricature of the Yeti — who everyone is familiar with — as the mascot. I updated the illustrative style to match the new design and created snapshots of what the space explorer Yeti would do and see in his new space suit and advanced spacecraft.

Snapshots of the Journey

To create a visually compelling narrative, I created illustrations and icons — depicting everything from travelling at light speed to watching a meteor shower — to capture the Yeti’s journey and communicate the benefits of this new release.

The marketing site starts off with a nice full-width illustration to pull the audience into the narrative. The page continues with alternating sections, each with its own unique illustration to highlight the benefits and features. The illustrations, the layout, and copy come together to tell a visually compelling and cohesive story.

With this huge update to the marketing site, ZURB continues to share their knowledge, experience, and tools from the new framework to help developers and designers get to production quickly.

More Work