Translating Print to Web

Share this :   | | | |
Translating Print to Web

At USGBC, we have a number of beautifully designed and informative print collateral. However, in this day and age, there is a high demand for accessing information on a variety of devices—which means converting print media for digital viewing.

Where do you get started when it comes to translating something from print to web? To give you an idea, let’s look at the process I went through to convert our LEED collateral to a digital format:

  1. Study the print version. For USGBC’s LEED collateral, each rating system print piece has its own color scheme. All of the pieces fold up neatly and are stored in a folder. Both of these ideas can be maintained in the digital version.
  2. Develop the digital concept. A microsite made sense since it’s an easy way to share and distribute information. The print version consists of six pieces, which translates to a smaller website that is easier to code and control. Instead of using a folder to tie together all the rating system cards, we created a homepage that serves as a landing page—showcasing the collateral’s colorful cover art. For each rating system page, we created a single scrollable page to make it quicker and easier to access all the information on a given rating system.
  3. Brainstorm and finalize the overall look. Before I could get started with coding and building the site, we needed to make sure the whole team was on the same page with the look and feel. We planned out the layout for the homepage as well as one of the rating system specific pages. In web design you need to design to a grid, and keep in mind how the site will look at different breaking points when a browser window is resized. That means it’s better to design vertically as opposed to adding lots of columns.
  4. Coding and research. Next it was time to roll up my sleeves and get to work—coding a responsive microsite. I also did research on ways to make the site more dynamic and interesting, like using scrollable background images, text and images that fade in/fade out as you scroll, and CSS hover animations.
  5. Testing and launching the site. It’s important that a design looks good across browsers and devices. If you only code and test a site for one browser, chances are you’ll run into a lot of surprises when you look at it in a different browser. Once I tested the new microsite and corrected any coding bugs, it was time to start sharing the URL with the rest of the world.

So there you have it—the process that brought together one of our latest microsites. Check it out at

Leave a comment