To transform a static piece of design – in this case a printed publication – into an interactive experience, two critical elements need to be maintained:
1 – Visual Identity. The interactive experience must coordinate with and build on the visual identity of the printed publication. The site should seamlessly reflect the look and tone of the publication. Introducing unrelated visual cues or stylistic devices can cause visual fragmentation, resulting in user confusion and reduced web readership.
2 – Content Management. Editing content and introducing interactive elements such as video, animation, or music, can bring printed stories to life and hold an audience’s attention. Regardless of screen size, large passages of back-lit text can be tedious to read, and can quickly lose readers with short attention spans and high online expectations.
To make a positive transition to the web and increase online readership, try incorporating these basic principles:
Architecture
Print publications are structured in a specific way for ease of navigation and optimal readability. The architecture of the corresponding website should maintain the magazine’s basic structure as closely as possible. Navigation terms should reflect the naming conventions established in the magazine. Avoid changing section titles and headlines, and try not to locate content more than one click away from the homepage.
Content Hierarchy
When editing isn’t an option, break up long running text with various entry points such as oversized intro paragraphs, sidebars and call-outs. These devices, commonly used in print, make long stories easier to scan and navigate and can be easily applied to web style sheets.
The print version of BREAKTHROUGH, a research journal for Johns Hopkins Center for Innovative Medicine, uses “entry point” devices to break up pages of text. That editorial structure was carried over to the online experience, including sidebars and large intro paragraphs. While some simplifications were necessary to streamline the web style sheets (such as consistent headline and call-out colors in every online issue), the content hierarchy and styling remain the same.
The interactive experience must coordinate with and build on the visual identity of the printed publication. The site should seamlessly reflect the look and tone of the publication.
Typography
Opt for an open source typeface from a library such as Google Fonts to avoid online subscription fees and load time concerns. Styling can be nearly identical to the print-based fonts, with faster load-times and content indexing. And with the rise of variable scaling, appearance and speed will only improve when responding to multiple screen sizes.
Color Palette
“Web-safe colors” are becoming a thing of the past. Browsers are smarter and screen gamuts continue to rise. Pantone colors will never match projected color exactly, but they are now within range. With some color code finessing, you’ll feel like you never left the printed page.
The print version of BREAKTHROUGH uses typefaces owned by several foundries. Matching those typefaces in the web version would slow load time and could break down in certain browsers. Incorporating an online open source typeface library, in this case Google Fonts, results in fast load time and intact design integrity.
Artwork
When choosing between static artwork and “web extras,” consider the value of animation or video to capture the attention of a broader (and younger) audience. Static artwork is generally a direct carry-over from the printed page. If your budget is tight, consider subtle movement (parallax) or basic animation (gif) to add an element of motion. If you’re ready to commit to “web extras,” video or complex animation are now the gold standard for websites that keep audiences engaged and coming back.
Bottom Line
The advantages of bringing your content online outweigh the loss of precise control that exists in a print environment. Print publications can transition to the digital realm in cost effective ways, with high indexing and fast load times, and still maintain the spirit of the original design. If you’re taking the time (and money) to generate powerful stories about your institution, why not make it searchable, linkable and likable online? It’s not enough to just post a PDF. Give the content a virtual life of its own and track reader’s responses using metrics.
Read earlier case studies from our Editorial series:
• Magazines: Making Covers Memorable
• Magazines: First Impressions
• Magazines: Designing a Feature Story
• Magazines: Recurring Themes
Want to be notified when additional case studies in this series are posted?
Subscribe here to receive emails from us.