Converting static print design to responsive web design

View Website
  • Web Development
  • Web Design
  • Governors Office of Planning and Research
January 2019 - April 2019


The Coastal Plan Alignment Compass supports California’s coastal communities as they develop and coordinate local plans to address coastal issues like sea level rise.

My Work

Adapting static print content for the web presents several unique challenges. It’s much harder to read long content on the web compared to printed documents. The graphics used in a printed document also need to be scaled and rearranged to work on different screen sizes. I took the graphical assets and design elements developed for the printed version of the Compass and created mock-ups in Figma, paying particular attention to chunking up the content into smaller sections and fading some graphics into the background.

After several brainstorming sessions with our client, I built web templates for the different sections of the guide and added in all the content. The result is an engaging and interactive planning guide which has become one of the most visited sections of the Adaptation Clearinghouse website.


Co-developed with the team at the Geospatial Innovation Facility, UC Berkeley. Original print design by Frank Ruopoli, Designer/Illustrator at NOAA Office for Coastal Management.

Screenshot of the Coastal Plan Alignment Compass guide home pageScreenshot of a Coastal Plan Alignment Compass detail page