Become a Member
Proudly Sponsored By
articles / advertising know-how and fearless opinions
IHAVEANIDEA.ORG > articles >  Taking Print to the Web


Taking Print to the Web

Posted on November 18, 2011 and read 3,127 times

Taking Print to the Web thumbnail

This article was originally featured on iStockphoto.com, IHAVEANIDEA’s partner in all things related to stock imagery.

All it grid design, magazine-style design, art-directed design – whatever you call it, it’s happening all over the Web.

What is “it” exactly? It’s bold typography, hero artwork, rich colors, storytelling, text callouts…in short, it’s all the techniques we’ve traditionally associated with print design.

Somehow it seems odd to call it a “trend” given that print techniques have been around since, well, the beginning of print. But also because there are all kinds of reasons to believe it’ll be sticking around the Web for some time.

Still, it topped several Top 10 Web-trend lists in 2010 and is getting attention at major digital conferences like SXSW.

Using traditional print elements in the digital space was impossible just a few years ago, due to browser restrictions, limited Web-safe colors and fonts, monitor sizes and download times that caused you to slam your head against your keyboard.

These limitations still exist to some extent, but technology has come a long way, and as Kara McCain, user experience specialist with Nielsen Norman group says, “the future is looking pretty good.”

A few years ago the Web was starting to look eerily homogenous with all that Helvetica floating around. No offense to Helvetica, but there’s just so much more out there. And rather than creating a smooth, efficient flow of communication, the Web was getting more and more complicated and messages were getting lost in cyberspace.

Joseph Le, a design student and former intern at Viget Labs (and self-described “noob”) said he’s learning that going back to the fundamentals of print design, ironically, helps him be versatile and fresh in his digital work.

It also helps rein in the mercilessly fast pace of information travel so we don’t all fry our brains and start resembling zombies in The Land of the Living Dead.

This was the impetus for Flipboard, a personalized ‘social magazine’ that takes all the feeds you get from facebook, twitter, blog posts, etc. and turns them into simple and sweet magazine-style feeds that you can view all in one place – your iPad.

To make sense of all the information “noise” Flipboard’s lead designer, Marcos Weskamp, said he incorporated print design techniques to help provide clarity and make “content king again.”

Florida web designer Chris Brauckmuller also takes content-is-king approach, saying the use of traditional print elements on the Web “creates order out of chaos.” His own site, floridaflourish.com borrows many print techniques and has been awarded two ADDYs this year for its design.

Here’s more on what these folks think about the trend.

Marcos Weskamp

Head of Design at Flipboard, a popular ‘social magazine’ for the iPad that gathers and streamlines social media for its users..

 Taking Print to the Web

Kara McCain

User Experience Specialist with Nielsen Norman Group and hybrid designer working with both print and web..

 Taking Print to the Web

Chris Brauckmuller

Lead Designer/Founder, Flourish Web Design (and winner of two ADDY awards for 2010)..

 Taking Print to the Web

Joseph Le

Design Student at George Mason University and former intern at Viget Labs..

 Taking Print to the Web

Do you see a growing trend of print design on the Web? If so, what techniques are you seeing?

Marcos: The innovations from the last few years make it possible to apply print design principles to digital media. I believe we’re going to see a lot of the quality design you see in print on the Web. And now that mobile is finally able to render in a similar way to the Web, I foresee an explosion of design possibilities for mobile as well.

Kara: Definitely. I’m seeing a lot of rich colors, gradients, overlays, illustration-based designs, grid-based designs, very large imagery & fonts, text call-outs in articles…the list goes on. Previously these didn’t work (well or at all) on the Web due to the restricted number of Web-safe colors, screen real estate, painful download times, code requirements, browser wars, etc. but those hurdles (as far as design goes) are not as much of an issue now (on the desktop at least), if done right.

Chris: I think what you meant to ask is “Do you see a growing number of websites utilizing design elements and techniques that are traditionally associated with print media?” And my answer is yes, most definitely. In particular, Web designers are paying more attention to grids and typography than they ever have before.

Joseph: TYPEFACES: many designers are breaking away from using standard fonts by downloading Web fonts that have serifs and slab-serifs which give text different attitudes and characteristics. To dive even deeper into the traditional print aesthetic, more designers are using hand-drawn/sketchy fonts to add a more human element to the design. This artistic direction hints to the foundations of design, which start with pencil and ink. BIG INTRODUCTIONS: to make users more immersed within a website’s content, many Web designers are making layouts that begin with a large photograph, graphic image, or headline. MAGAZINE/EDITORIAL LAYOUTS: Instead of having the stereotypical vertical single-page layout, the page’s information can be manipulated to have multiple columns that vary the content’s hierarchy. STORYTELLING – Think about it, on top of several websites are big headlines and large graphics that represent the website’s introduction to the author’s story. More designers are personalizing headers with varied typography, interactive graphics, and unique illustrations. Extended footers are made to better translate the ending to a website’s tale in a visually stimulating manner. Having a storytelling element in a website can generate an emotional response from the viewer.

If you see it as a new trend, what do you think is the reason for its popularity?

Marcos: First and foremost, its driven by what users want and need. Readers want to minimize clutter. They want fewer things on a screen, which means that there should be less of what they don’t pay attention to while highlighting valuable content better. The advances in technology I mentioned are another reason for the trend, as they make good design possible in any screen.

Kara: I think it’s in response to what technologies are newly available. Web designers have dealt with so many restrictions in the past with small monitors, the small number of Web-safe fonts and colors available, etc…creating a print-like design was pretty futile if you wanted anyone to see or use your design. Now those restrictions seem to be evaporating. In a way, the print style of Web design represents designers’ freedom from a craft confined by 640 x 480 and Verdana.

Chris: The word “trend” implies that a particular behavior is temporary and will eventually go out of fashion and disappear. I don’t believe this is the case with the growing attention to grids and typography. Rather, I see this as somewhat of a renaissance as the Web designers begin to adopt what have long been accepted as the fundamentals of graphic design in every other medium. The Web has suffered from poor design for many years, due to the shortage of professionally trained designers who wanted to work on the Web and the lack of cross-browser standards. Now times are changing for the better and we’re beginning to realize the full potential of HTML and CSS to create beautiful, meaningful compositions.

Joseph: [The trend] is a result of many contemporary websites starting to look like exact copies of each other. Several websites have become mundane looking with similar templates and fonts, whereas in print design, the grids and standards in type are often broken to create a unique outlook while maintaining legibility. More designers are looking for ways to stretch the Web medium and borrow print aesthetics to make their sites more visually interesting while maintaining legibility. With the growing reliance of the Web, many print designers like me are transitioning into the Web and taking some of our print design principles to the Web. In addition, the rise in blogging has definitely influenced the new trend. People are investigating ways to personalize their blogs by breaking out of the usual web aesthetic.


Where do print design techniques work best on the Web, if at all?

Marcos: When I create a magazine or book, I’m very aware of the rhythm I create from page to page. That’s the case with just text, but it also applies to the placement of images. It’s like conducting an orchestra. I don’t think we do that on the Web. There, you tend to look at individual pages and not think about the larger, overall product. Websites would benefit from that approach that stems from print design.

Kara: Typography. By that I mean great typography. People scan headlines, bullet points and call-outs to help them quickly find what they are looking for. On the Web, content is still king, so good use of typography can really make a difference. Images are important but only if they are truly meaningful to the content and purpose of the site, such as a product shot on an e-commerce site or a photo on a news site.

Chris: Print design techniques can really be applied to any design on the Web. Every page should be laid out on a grid with thoughtful attention to typography. The days of slapping elements on a page are gone, at least if you want to get users to stick around, that is.

Joseph: Print design techniques work well with event and portfolio websites. These sites have visually engaging Web layouts that only contain a few goals with linear navigation, which work well with poster-like design. Different blogs and “blogazines” also work best using print design techniques for the Web. These sites have customized typography and layouts that are more tailored to each specific article. Allowing the content to dictate the design of a page will aesthetically refine the author’s message in an interesting way. Presenting the content in a different fashion with varied typography, hierarchy and layout keeps the viewer on his or her toes.

Can you think of a website that has done a good job of incorporating print design online?

Marcos: Websites that do a good job of incorporating print design online are the ones that pay attention to the quality of the content. I believe that design should be in service of the content. Design should get out of the way; it has to be transparent. The less people notice it, the more accomplished I feel as a designer. Here are some of my personal favorites:
http://www.pictorymag.com/ – A great showcase on how important storytelling is

 Taking Print to the Web

http://lostworldsfairs.com
– An amazing demo on what can be done with a browser today
http://typekit.com/ – Doing a great job at creating a tool that helps incorporate more print design to the Web!

 Taking Print to the Web

Kara: This is a tough one. The NYTimes Opinion Pages http://www.nytimes.com/opinion has done a pretty good job except for the “Latest from the Blogs” section in the far right column. The text shouldn’t be center-aligned…it makes it more difficult to scan and is an odd choice given that the rest of the page is left-justified. Overall, though, it’s well done.

 Taking Print to the Web

Chris: www.markboultondesign.com is a site that has done an exceedingly good job incorporating elements of print design (much better than mine, I might add).

 Taking Print to the Web

www.subtraction.com is another. These guys (Mark Boulton and Khoi Vinh, respectively) are truly masters of their craft.
 Taking Print to the Web

Joseph: www.jasonsantamaria.com

 Taking Print to the Web

http://lostworldsfairs.com/
http://www.floridaflourish.com/
http://futureofwebdesign.com/new-york-2010/

 Taking Print to the Web


What challenges does using traditional print techniques pose for a Web designer? What are the benefits?

Marcos: The biggest challenge is created by people’s expectation of what’s possible. Web design is more fluid than print and requires more flexibility. You have to think about how everything comes together on the server and in the browser. The front-end may have the clean look-and-feel of print, but what’s required in the back-end to make that possible is a lot more complicated. All of this pays off in the form of improved readability and usability that users experience – I see that as the biggest benefit of applying print design principles to the Web.

Kara: The biggest challenge is remembering the heart of a website or product (like Yelp or Facebook, for instance) is the interaction, not the aesthetics. You can have a fantastic grid-based layout with spot-on typography and jaw dropping imagery but that doesn’t guarantee the site or product is easy to use or the information the user came there for is easy to locate or read. If you’re tasked with designing the mobile version or app for that site you’re going to have to strip out most of [the aesthetics] due to limitations in screen size, download speeds dependent on mobile networks and target size needed for people’s fingers to manipulate navigation, forms, etc. Visual design is very important, but it’s not why people use the Web…they use the Web to do things. Another challenge is usability and accessibility…some users have vision and dexterity challenges that need to be accounted for that traditional print techniques often make worse. Other challenges are the intricacies of code development and scalability. This is very time consuming, which is why you typically see print-style Web design on smaller scale websites. The benefits of using a print technique (aside from typography) would come more from the use of a strong concept. Good print designers understand the value of a solid concept and how to translate it across various mediums (billboard, ads, packaging, etc). Not many sites focus on having and maintaining a concept, which is a shame because it can really bring life to a brand online.

Chris: Executing some of the techniques I’ve discussed is more difficult on the Web than it is on a print piece, due both to the fluid nature of the data, and the myriad types of platforms on which it is viewed. When you create a brochure, it will always be viewed as a brochure, a folded piece of paper of a given size with the same printed words and images. When you create a website, it can be viewed on any combination of device types, operating systems, screen resolutions and browser software, and the data can change from one day (or minute) to the next. This fluidity can completely break a poorly thought out and inflexible design. Fortunately there are tools and techniques available that can help mitigate the difficulties posed by designing for the Web…some of my favorites are: CSS reset files, which aim to put all browsers on an equal playing field, and frameworks to establish basic typographical styles; Use of JavaScript detection to serve a specially optimized website to mobile devices; and @font-face to serve “custom” fonts, allowing greater control over typography. The benefit to overcoming these challenges is achieving the best of both worlds – an effective and beautiful composition that displays faithfully on all types of platforms and is flexible enough to accommodate ever-changing content.

Joseph: Some Web designers can find it difficult grasping the concept of using traditional print techniques because of the fear of following a short trend while losing some user-friendly experiences. However, encouraging the exploration of these techniques can spark creative energy that they can bring forth to making the Web medium more flexible in adopting different design elements without losing usability. It makes the Web designer break out of the mold and let the content dictate the overall layout of the site. Instead of relying on templates and standard fonts to create a website, a Web designer can explore different ways of making his or her site stand out from the rest. Also, it encourages the Web designer to learn more about the basic principles of design, which can apply to almost anything related to communicating to an audience.


Does the platform make a difference to how well print design techniques translate to the Web? (Different browsers, operating systems, devices, etc.?)

Marcos: At Flipboard, our goal is to create a magazine for Web content that is so simple to browse through you can’t get lost. For that purpose, the iPad was a natural choice. While it offers more advanced interactions, the iPad is actually a much more constrained white canvas than the web on a computer. It has to do with the simplicity of the user interface, the fact that there is no keyboard. It’s just a screen so you cannot have 15 buttons. It has forced us to constrain ourselves to one way of navigation: paginating. In that way, the platform has played a significant role in the design of Flipboard.

Kara: Yes. While not all print design techniques work on the Web, the best platform for them to exist would be the desktop. The biggest challenge lies in the difference between the desktop and the mobile device. Even solidly designed websites have to be stripped down for their mobile versions to accommodate the challenges with screen size, varying technologies, 56K modem-like download speeds and user-input challenges. Additionally, there are nuances in what the different browsers will support and to what degree.

Chris: The biggest difference in platform is between desktop/laptop and mobile phone. The slower connection speeds, smaller screen size and fewer features on mobile browsers necessitate a much more stripped-down approach to the design. About the only thing mobile has going for it is, well, mobility. That’s why I think you should really approach mobile as a whole separate medium. Once you’re on a “real computer,” standards-based browsers do just about everything better. Beyond that, it doesn’t make much difference, though I do feel that Macs do a much better job of anti-aliasing type, though that’s a matter for debate. That’s the point of standards, after all. If you want the Web to be a better place, educate someone about why Internet Explorer is bad for them and the people who build websites.

Joseph: Different platforms make a humungous difference on how we read print design techniques on the Web. Like I said before, reading poster-like websites with extended landscapes is easier with the iPad and other tablet technology. The majority of the population using the Web still needs to update their browsers so that they can view customized fonts.


Do some print elements translate better than others?

Marcos: When you think about the flow of articles from one page to the next you want to avoid too much repetition. There has to be variation from one page to the next so your eye is always moving around. There is consistency without being too repetitive; there is a story that goes through the pages. That’s something that’s challenging to translate when designing for the Web. We have some of that in Flipboard’s layout, but that’s an area I want to develop further.

Kara: Again, typography translates the best. HTML5 is looking more promising with what it allows/will allow designers and developers to achieve in terms of both design and interactivity so the future is looking pretty good.

Chris: Certainly, though things are improving all the time. For example, setting up a grid in CSS is quite easy once you understand how it works. On the other hand, developing a consistent typographical style across a site, though made much easier with CSS, is still quite difficult and often frustrating due to the uncertainty of data. This week’s blog post title might look great in 36pt Georgia, but next week’s title, which may be twice or three times as long, might look awful. Unlike in print design, Web designers should also be wary of using too many large images because it increases page size and consequently load time.

Joseph: Yes, I still think that single-page layouts are more legible than magazine-layout Web designs when viewing them on a regular monitor. The effectiveness of using print elements on the Web depends greatly on the device and goals of the website. For instance, a magazine-layout design will never work well in terms of usability on a corporate website with a lot of goals.

Does a column/grid layout inhibit creativity in Web design or enhance it?

Marcos: I see the grid layout as a set of rules that you have to learn; I don’t see it as something that inhibits creativity. However, it’s important to understand the rules so you know when you want to break them. Do that consciously. A great example of a designer who uses this principle is David Carson — he created his own style by breaking the rules.

Kara: Grid-based layouts are about structuring the content so it’s clean and organized, but they don’t work well for every single project. It depends on the project, how much content is involved, what technologies are being used and what you can be flexible on. Sometimes content, an ad or an image doesn’t fit perfectly into the grid and you have to be okay with breaking it or altering the content so it doesn’t break. You can still be creative within the confines of the grid but it comes down to purpose and what’s important. I know many designers, including myself, that design on a loose grid to ensure a clean structure and continuity across the site while remaining flexible to possible changes.

Chris: Proper use of a grid is very conducive to creativity. I think that Mark Boulton does an excellent job of summing up this argument concisely [when he says]: “Grid systems can facilitate creativity by providing a framework and already answer some designers’ questions such as ‘where should the folios go,’ ‘how wide should the measure be?’ etc. A well designed grid system will go some way to answer these questions and more.” It’s no secret that the most respected designers in the industry make use of some type of grid system on all their projects. Using a grid is essential to creating an effective composition, and this becomes even more true as the amount of content presented on a given page increases.

Joseph: A column/grid layout can limit creativity in Web design if it is followed strictly. For functionality, Web designers should use the column/grid layout as a foundation for audiences to easily digest information. However, Web designers should never be completely tied to the standard grid layouts. They have to always consider deconstructing grids to add more visual interest. Sometimes having an offset in balance can make a design look more dynamic. You always have to know the basic foundations through and through before you go crazy!

How does using print techniques effect the balance between usability, readability, interactivity and aesthetics? Does it create a better balance, worse balance, or is it ineffectual?

Marcos: In print, usability was solved a long time ago. A print designer doesn’t have to think about the user interface of a magazine. On the Web, you have to be conscious about navigation all the time. If you’re not, people get lost or don’t read your blog or website. As a Web designer, I try to be conscious about navigation. I always think about how I can get people from beginning to end.

Kara: Though the success of a website or app depends on many things, the most important things are still ease of use and the fulfillment of purpose. If a website/app can do those things and at the end of the day happens to use a few design techniques we normally find in print, then it could be considered a success, a well-balanced design. If those techniques are simply used for aesthetics – to create a ‘wow’ factor – and in the end a user gets lost and gives up, the technique means nothing.

Chris: A well thought out page layout with careful attention to typography would most certainly be more usable. Most users will also perceive it to be more aesthetically pleasing as well.

Joseph: Using print techniques creates a better balance for all of the above. In short, the exploration of Web typography and emphasizing different graphical elements improves a website’s readability and aesthetics. Breaking the grid and standard layouts may hinder usability and readability in some ways but this will rapidly change with the increasing popularity of tablet technology. I believe that creatives worry too much about categorizing a design with the stereotypical elements and aesthetics that belong in a specific field of visual communication. If more designers stick with the basic principles of good design while adapting to the rapid changes of technology, then we don’t have to worry about relying too much on a current trend that may or may not last for long.






RELATED ARTICLES


    LATEST JOBS

    ALSO IN THE NEWS

    Moving Millennials thumbnail Moving Millennials
    Thoughts from a Cannes Creative Effectiveness 2013 Jury member thumbnail Thoughts from a Cannes Creative Effectiveness 2013 Jury member

    MORE ARTICLES

    Agency Profile: Advico Y&R thumbnail Agency Profile: Advico Y&R

    IHAVEANIDEA ARCHIVE

    Copyright © 2001-2014 IHAVEANIDEA inc. All rights reserved. No material contained in this site may be republished or reposted.
    IHAVEANIDEA™ is a trademark of IHAVEANIDEA inc. Terms and Conditions | Privacy Policy

    Copyright © 2009 ihaveanidea inc. All rights reserved.

    No material contained in this site may be republished or reposted. Terms and Conditions | Privacy Policy