Converting static print design to responsive web design

Background

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.

Credits

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.