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

ZURB's Foundation for Sites is a highly regarded front-end framework designed to assist developers and designers in prototyping and creating responsive websites. During the development of Foundations for Sites 6, ZURB did a world tour to London, Hong Kong, Toronto, Sydney, and across the United States, engaging thousands of developers and designers to gather valuable insights. A clear theme emerged: the need for a seamless transition from prototyping to production. In close collaboration with the Foundation team, I helped design and code the marketing site, which served as a platform to showcase the new features and benefits of the framework.

Taking inspiration from the thrilling advancements in space exploration, I developed a visually captivating visual language aimed to transport the audience into the narrative of space and evoke a sense of wonder. With the backdrop of space and darkness, the visual design 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

We 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 started off with a nice full-width illustration to pull the audience into the narrative. The page continueed with alternating layouts, each with its own unique illustration to highlight the benefits and features. The illustrations, the layout, and copy came together to tell a visually compelling and cohesive story.

With the introduction of this new framework and an updated marketing site, ZURB remains committed to sharing their extensive knowledge and tools to support developers and designers in getting their projects to production more quickly.

More Work