7 Lessons Web Designers Can Learn From Print

by on 27th April 2010 with 30 Comments

screenshot

Looking outside of your area of focus is an excellent way to learn a thing or two about design. Today we’ll see what value thinking like a print designer can bring to your website building skills.

Whether you’ve ever engaged in print design or not, these tips will provide you with some great ideas, ready to be applied to your next design.

Print vs. Web

I should begin by stamping out any suspicions that this article in any way presents one profession or design medium over another. As both a print and web designer, I’m familiar with the strengths and weaknesses of each as well as the challenges faced by designers in both industries.

I am not making any type of argument that print designers are more knowledgeable or have a more difficult job than web designers. This article could’ve just as easily been about lessons that print designers can learn web designers because the point here is that trends and techniques differ greatly across different design areas and there is therefore a lot to learn from looking outside of your own comfort zone and into another field.

With that said, let’s take our minds out of RGB and into CMYK and begin thinking like a print designer.

#1 The Power of a Brand

screenshot

Sometimes web designers are prone to approaching a design with a limited focus that fails to think outside the browser. It’s easy to see designing a website for a client as simply that and nothing else. However, for many small clients and new businesses the website can be their single biggest (and perhaps only) face to the world. The design of the site is therefore crucial in the development of the personality of the business: their brand.

Print designers are almost always forced to either create a unique identity, work within a strict existing brand, or develop ideas for how to evolve the brand to meet new challenges. By contrast, web designers can easily focus more on standard interface elements like buttons, icons and navigation panels that look almost exactly like those found on a thousand different sites around the web.

Giving a business a brand brings it to life. It makes it real and easily identifiable to the public and communicates the company’s principles, goals, and strengths. This process often starts with a logo but stretches well beyond to colors, fonts, messaging, and underlying psychology that are setup as absolute guidelines for everything the company has developed from television commercials to ink pens.

The next time you’re designing a website with no real brand direction, consider putting some thought and effort into the psychology of the design. Deliver more than a website by creating a written explanation of the intentions of the design along with some suggestions for how to develop the brand further through other materials.

#2 Target Audience

This one comes particularly from the marketing side of print design. If you’re creating a print ad, one of they key questions to ask is “Who is my target audience?” In other words, who is the person you’d most like to communicate to and influence through this ad?

Granted, over-specialization can lead to a dramatically reduced possible customer base but not openly targeting specific groups of people that are either the most likely to buy your product or are currently a segment with great untapped potential can likewise lead to missed potential.

You might be tempted to think, “Isn’t everyone my target audience?” However, this is incorrect for just about every service, product and website out there. For instance, this site’s target audience is designers. We encourage everyone to read the site but cater the content specifically to this target group. Obviously, this site has a pretty narrow and easily identifiable focus compared to something like Facebook, but even they have a target audience.

Though we can’t be sure who they secretly target behind closed doors we can at least say that Facebook seeks to appeal to people who want a better way to stay in touch with friends and family. They can narrow this distinction further by looking at their average user demographics to see who uses the site the most and the least. The Facebook designers can then focus on structuring the site to either appeal better suit the needs of their current users, and/or evolve to become more enticing to a particular set of non-users.

The point is, when you’re designing a site for a client, you shouldn’t choose a visual aesthetic merely based on a whim or something from you saw in a CSS gallery. Instead, you should consider exactly who the site is seeking to attract and create a design that has a high likelihood of appealing to that particular group.

Remember to use both demographics and psychographics in your consideration. Demographics are general characteristics such as age, gender and location while psychographics are more about how the person thinks, what they love and hate and why they buy the things they buy.

#3 Brevity & Limited Space

A web page and a physical page are two completely different beasts, each presenting a unique set of challenges and opportunities. For instance, a web page has the unique ability to expand to accommodate an increasing amount of content. If you want to use 1,500 words and 27 pictures to tell visitors what the site is all about, you are more than able to do so.

However, print materials provide a much different experience as they are limited by their physical size. There is no unlimited scrolling or content condensed into slideshows, only a few inches of paper. Working under this constraint can give you a renewed appreciation for how to limit your messaging to a barebones, necessity-only offering.

When writing copy for the web, remember that just because you have a potentially unlimited amount of space doesn’t mean that you should use it. This applies particularly to an online service or web app that needs to get a quick “what it’s all about” message across on the homepage. Under these circumstances, lengthy in-depth instructions and information should be placed elsewhere on the site in favor of a clear, concise homepage.

If you’re trying to explain a fairly complex site to users, try breaking everything down into three steps. This magic number makes the complicated seem manageable and won’t be intimidating to new users.

#4 Clever Design is Better Design

There are two tendencies that I see among print designers that seem to rarely make their way over into web design. These are the infusion of humor (which we’ll discuss next) and the art of being clever.

Being clever doesn’t require you to be a comedian or a genius, it merely requires you to look at your design and consider possible ways to enhance it with a little wit. The print ad examples below show exactly what I mean.

screenshot

These ads aren’t really funny; few people would laugh upon seeing them. They’re simply amusing coincidences communicated through shapes. It was “clever” of the designers to turn fries into Wifi and fireworks into a sucker. This little trick ads value to the visual and makes people enjoy looking at it.

This kind of subtle wit needs to make its way into more web designs. Your goal as a designer is to make websites attractive enough that people want to stick around for a while. Adding wit to your design arsenal is a great way to not only add to the time a user spends looking at a page, but also increase the likelihood that the visitor will share the site with someone else.

#5 Why So Serious?

screenshot

The second trend that we see a lot among both print ads and television commercials is the use of humor to engage viewers. For some reason, most websites seem to take themselves too seriously. A really useful online service with a website that makes you laugh out loud is a rare breed, and unfortunately so.

Despite the idea stated above that brevity in your messaging is a good thing, sometimes you can find real value in the superfluous. Advertisers know better than anyone that everyone loves a good laugh and are in fact more likely to connect with your brand if you can make them do so. You should consider taking this page out of the advertiser’s playbook and implementing it in the realm of web design.

Browse the endless funny ads at Ads Of The World and consider how you can infuse humor into your next web design project.

#6 The Value of a Good Photo

screenshot

Print designers use stock and custom photography heavily in their designs. Often the photo isn’t so much an element of a design so much as it is the design.

If you’re designing a site that doesn’t really need a lot of UI elements, consider using photography as the main design element. Not only does it look excellent if your photos are nice enough, it can actually be a lot easier than designing an attractive site from scratch.

Grab all of your design inspiration straight from the photo you’re working with. Use the eyedropper to pull colors from the picture and choose fonts that match the mood of the scene.

Some of my favorite web designs have forsaken the gradients, shadows, gloss and icons so common in web design today in favor of this technique. I recommend snapping your own shots, but if you lack the time, experience or equipment, stop by Flickr Creative Commons or SXC for some free photos for your next site.

#7 Appreciate Interactivity

The final lesson I suggest you learn from print design is to appreciate what you have to work with in the web. For all of its complications, endless troubleshooting requirements, standards, and limitations, the web is an amazing medium to work with as a designer.

I was almost exclusively a print designer for over six years but instantly fell in love with web design as soon as I began learning it. Compared to print, web design can seem down right magical. Little things like hover effects, scrolling, and the ability to hide and show specific content based on user interaction are enough to leave a print designer in awe of the possibilities.

Though I will always treasure print as the place where i began my journey as a designer, I see the web as a medium with infinitely more potential to really grab and interact with viewers in ways that will never be possible with paper and ink. Never lose sight of the richness of the tools that you have to work with in web design and always seek to maximize their potential to make the web a truly magical place.

Closing Thoughts

To sum up, the web design industry would do good to pay more attention to the power of a brand, who they’re targeting and when to refocus, and the value of humor, wit and good photography in design. Finally, web designers should never fail to appreciate and take advantage of the interactive nature of the Internet and the possibilities for better, deeper design that it presents.

Use the comment section below to let us know what lessons you’ve gleaned from other areas of design and how they’ve improved your work.

Comments & Discussion

30 Comments

  • http://www.ozoneeleven.com/ natasha

    useful read.thx a lot

  • http://www.patrickhazard.co.uk Patrick

    Thanks for that. It’s posts like that that make me glad I’m originally a print designer unlike all those posts that assume I cant think logically and design sites where every link is different or is all images!

  • http://rachel.learnless.info/ Rachel

    Interesting read. Appreciate your efforts in putting this together.

  • http://cyndypatrick.com cp

    thanks for saying this. my background is print, where it is for the most part accepted that “concept is king”. i’m finding this point of view to be a harder sell in web design, where more often than not, “technology is king”. let’s hope that as web design matures idea-based sites will become more and more prevalent.

  • http://www.squiders.com Web Design Maidstone

    There’s some cross over for sure and as bandwidth has improved so has the graphical element of the web, using pictures for words and taken us nearer to print

  • Terry

    This would be more useful if any of these points were limited to print…

    1. Web designers who work in an agency setting rarely get to design something outside of their client’s brand/style identity. In fact, usually, it’s called integrated branding for a reason.

    2. McDonald’s has black, Asian, and Latino ethnographic sites. Dell tried to have a women’s site. American Airlines has one for gays. I think targeted marketing is already understood.

    3. I can’t think of a single web designer who doesn’t try to design to a basic screen-resolution of a target audience. For instance, a financial website is more likely going to fit major content in 1024×768. Then there’s the concerns for “above the fold”. Also load time for our DSL and Wifi buddies. When did print designers have to figure in load time?

    4/5. I guess you never saw Immodium’s bathroom locator site? or Cottonelle’s “How do you roll?” campaign? Maybe you missed the integrated (web/print branding!) campaign by CP + B for Burger King?

    6. I’d actually say the better websites do a lot with photography because web stock is much cheaper than print stock. Lots of sites make use of full-screen photos.

    —-

    I seriously cannot believe you didn’t mention TYPOGRAPHY. An excellent eye for typography is really what separates most print and web designers.

    Yeah web is “just” 7 fonts, but that doesn’t mean typographic style has to be haphazard messes that forgo hierarchy.

  • http://www.freedomstudios.co.za Graham

    Nice points. Thanks for sharing these.

  • Joshua Johnson

    Terry, listing notable exclusions is great! But I never indicated that no web designer has EVER considered these principles. I was merely pointing out a few things that we could focus on more.

    And typography was the very first thing on my list. However, there have been SO many typography articles lately (including two here very recently) that I decided to focus on more original content.

    Thanks for your comments, I really appreciate the push back!

  • AbbeyF

    Great article! I think as web speeds get faster we will see more graphic heavy websites, print designers will certainly appreciate that.

  • http://www.chriskirkmandesign.com Chris Kirkman

    Interesting read. I do both print and web design but was able to gain some ideas I had not thought of before.

  • http://rolling-webdesign.com Theo

    Nice read, i really enjoyed this article.
    Thanks !

  • Anonymous

    Nice read. They are all good points, but I think the overall point that many web designers fail to understand is proper branding. As a web designer with a fair amount of print experience I learned everything I know about branding and corporate identity from the print world.

    It’s one of my pet peeves. When a web designer tells me they have a “strong brand”, but all they are referring to is a logo. A good-looking logo is such a small part of your brand. The brand is a vision, a feeling, an emotion, and so much more. It starts with a logo, but who you really are as a business gets communicated through it. Your logo should start as VECTORS, and work in black and white, color (RGB and CMYK), large, small, horizontal, vertical, etc. Your typography, colors, layouts, everything down to the buttons you use on your contact forms should stem from your “Brand”, and be documented in a “Branding Package” or a “Corporate Identity”. The way you communicate to your audience, the culture of your voice, all part of a Brand Strategy.

    You cannot have a “strong brand” without a clearly communicated vision. You cannot have a clear vision if you do not know who your target audience is. You cannot have either if you do not know who your competitors are and how you measure up against them. Without these things you will eventually get to a point where you lose what Brand presence you have, through dilution. Your users, clients, and employees should all be able to tell you “who you are” as a company, and THAT is what a “stong brand” is.

    If you ever want to grow your “Brand” to the level of those like McDonald’s, Nike, Sony, etc., you need to learn from them, and build a solid Corp. ID. It’s just how you run a business. As a web designer, hopefully you will already be working under a Corporate ID or strict Branding guidelines. But if they aren’t there, you have an opportunity to build them. If you can get the business to listen :).

  • Paty

    Thanks a lot, i am a print designer and i’m wanna be a webdesigner, i had to take notes, these was realy helpful

  • http://www.44pixels.com Jared Lindo

    Thanks for the post, some great points & observations. I especially liked #4 & #5. When focusing on a clean user experience its easy to forget to have fun with it!

  • http://www.omazingcreations.com Dhruv Patel

    great thoughts… branding definately plays a big role in design weather its web or print. i used diigo to highlight few of the points made here to come back later to them

  • http://www.koris.com koris.com web design

    very useful article for web deigners ;-) tnk u!

  • http://www.adnpost.com jashim

    I read nice article, i really enjoyed this article.
    Thanx

  • Sebastian

    On the other hand, people with a background in print tend to transfer those limitations onto the web. For example, I had a client who absolutely insisted on A4 sheet shaped pages, bordered by a thin line, with a ginormous background that wasn’t tileable. Try to make content flexible and dynamic inside an iron box.. Not exactly easy.

  • http://www.netbizde.com Hasan Tayanc

    Great article. Thank you!

  • http://www.blueoverblue.com Sean Tubridy

    These are all good points but really #6 bothers me. What you’ve suggested is the equivalent of saying “Head over to Template Monster and get yourself a nice template if you are going to make yourself a website”.

    And why do you recommend taking your own shots? Do you assume that just because you’re a designer, you’re a good photographer? I think this whole “good enough” attitude we take toward photography (and copywriting) is a bit hypocritical as designers, when we shun amateurs with Photoshop who think they are designers.

    Instead of taking the photo yourself or heading over to Flickr or some stock site, pay an actual photographer to take a good, unique photo if the budget allows. Too many people fancy themselves photographers these days just because digital is cheap and cameras have easy-to-use auto settings. And do you really want the same stock photo used by countless others?

    Sure, hiring a good photographer can be expensive, but if your design is relying on one image, isn’t important that it’s a great one?

  • http://www.onuronaran.com.tr onur

    very useful article for web deigners ;-) tnk u!

  • dustin

    kind of insulting to those who have spent a good deal of their lives studying interaction design. most of these points focus on the look of a website. which is exactly how i would expect a graphic designer to approach an interactive piece. problem is, that is a very small part of what actually makes a website useful. can we talk about usability?

  • http://doteduguru.com Michael Fienen

    I have to say, I really disagree with a lot of this. Not because it’s wrong, but because these things AREN’T issues for good web designers, and are equally issues for bad print designers. For instance:

    1: A good web designer will be ALL about the brand (though I would argue that’s not brand at all, but rather corporate/product identity, but that’s another argument). Issues with brand considerations are no more a problem for a good web designer than they are a good print designer, and a bad print designer will have just as much likelihood to have problems as a bad web designer.

    2: Same here. When I work with or talk with other designers, one of the top questions they’ll ask is who the site is targeting and why, and if it’s desired to attract others and how to do all that. Audiences are enormously important to us, and I’ve worked with more than a couple print designers that haven’t even given it a second thought.

    3: Every good web writer (because really, content strategy isn’t the responsibility of the designer), and I mean EVERY, will tell you less is more. People don’t read web sites, they scan. The less there is to scan, the more likely they are to see what you want them to. This is a well established principle in web.

    4: I don’t get one of your examples here. The fireworks ad looks like a dandelion, that’s the first thing I thought of, not a sucker. And ever after being told a it’s a sucker, I don’t buy it. That’s not clever, it’s confusing. It goes to show that being clever isn’t always a component of the designer, but can be driven by ideas from other members of your team, but that requires you to have a robust team, print, web, regardless. And it’s hard to be clever all the time. I’d never say either web or print people are more creative or clever than the other.

    And the rest of the points go on exactly this same way. Reading the post, it feels more like you’ve never worked with a real web design team, but rather the kid in the basement next door that did a site for your cousin once. The issues addressed here aren’t “things web should learn from print,” they are things good designers and marketers of all trades should know, and frequently do, if they are good at what they do. Treating it otherwise feels disingenuous, as if you’re saying print doesn’t have problems with these things, when it absolutely DOES and that web is inferior to print in these areas, which it’s definitely NOT. The main reason that this is perceived as a web problem is because there are more amateurs in web than there are in print. We can’t change that. We’re also quick to say that web isn’t print, and many people don’t get that, and attempt to push print principles (a couple noted in comments above) to the web without much consideration. They are completely different disciplines, that share some terminology. It’s hard to say “web should learn how to do better at this from print.” What should be said is “web should learn how to do better at this.” No qualifier.

    I’d almost go so far as to say you need to reverse this article, and make it about what print can learn from web. The student has quickly become the teacher, and the print medium (especially advertising) is one that is in the beginnings of a number of crises that ultimately threaten its livelihood, as it’s abandoned for the web.

  • D. Andrew

    The problem with Print Designers who think they can design a website is that they assume too much about the look and feel and spend very little time thinking about the interface and user interactions. This article couldn’t be more ignorant on the importance of the look of a site over it’s functionality.

  • http://binaerpilot.no/alexander/ Alexander Støver

    I pretty much agree with everything Mr. Fienen wrote. It’s a worthwhile read but the angle is a bit off.

  • http://gauravmishra.com Gaurav Mishra

    As summing up in one line
    “It takes a good memorable laugh to connect with the brand”.
    Nice article. Worth to read.

  • Pingback: beyondwords | a blog for professional writers, editors, and designers » Blog Archive » 140+ Tweet Feed: May 1-7

  • Pingback: Internet Briefing Blog / Wochenendsurf-Tour

  • http://CreareDesign.co.uk Vikesh Patel

    Interesting post. Coming from a print background, and then moving into web comment 5 makes some sense, print design seems to have less boundaries, and lets the designer be freer in their work.
    However I’ve found that recently web the inclusion of more complex flash and java web has become just as creative as print design. I think that paying attention to brand and target audience as you say is down to the designer rather than the particular field your working in.

  • http://www.brettwidmann.com Brett Widmann

    This is a great article. Thanks for all the important tips!

Subscribe
Membership
About the Author