How Web Design Has Changed Print

Not only do web designers learn from their print peers, but print design has evolved a great deal thanks to web design.

How Web Design Has Changed Print

Print design – from newspapers to magazines to ads to books – and web design are often linked because of their differences. The two often come up in conversation at the same time as opposites.

But there is more to the story.

Print and web design are more alike than ever before. The lines are fading and the concepts that dictate good design are becoming more universal every day. Designs in the two mediums also look more similar than ever before and more designers are working in both digital and print.

And it is not just because web designers are learning more about design theory from the world of print. More and more print projects (and designers) are learning from the web. Some of this is because many designers work in environments where both skill sets are necessary but moreover more print designers are looking for inspiration and learn from their digital-publication peers.

New Shapes and Bolder Look

There was a time when almost every layout in a print publication came in the shape of a rectangle. Most were designed horizontally, some vertically and occasionally you would find a square in the mix. Colors were limited in most print design – it has only been in the last decade that many newspapers have began using full-color presses that allow for more than just black and white outside a handful of pages.

No more.

Welcome to the world of new shapes. Many metro newspapers are experimenting with an upside down L-shaped layout that breaks the box mold. Others are using circular shapes for text on feature pages and using more color for an increased “wow” factor. Look at the baubles coming out of the block on the Oliver Russell site; this style of design is where the trend started.

The brighter, bolder color schemes are a direct take-away from web design. While many digital designers have scaled back on the use of animation and bright flashing colors to grab your attention, print designers have evolved with the trend. More ads appear in full color (and bright color), newspaper pages are built using color navigation tools (similar to those on websites) and sport brighter color palettes than in the past.

New navigational tools are also borrowed from web design. Print design has long used forms of indexing but simple navigational keywords (sometimes matched to specific colors) really gained popularity and functionality on the web.

New Details

Rounded corners, more transparent shadows, cutout images and even streamlined typography are just a few of the common web techniques that are becoming more prevalent in print design.

The rigid rectangular form that was used to outline individual stories was also used for all elements in print design. Each photo had corners that came together at 90-degree angles. There were no soft shadows to help “lift” elements off the printed page. These effects, which have been prominent features on websites for a while, can be found in almost any book, magazine or newspaper you pick up now.

Print designers can also thank their web counterparts for eliminating the font mess. There are few restrictions to the number of and type of fonts you can use in print work; this is not the case on the web. The limited font selections used by web designers for years, has helped print designers reign in their desire to use a plethora of typefaces.

The more minimal font palette makes for a cleaner, more streamlined project.

Better Writing

Yes, search engine optimization techniques have helped people working in the print realm write better, sharper, more focused copy.

It has happened over time because most of us publish some form of our print work on the web where keywords of search are key. Rather than rewriting every bit of copy (double the work), designers and writers are using words that provide more information and more description for all of their projects.

Gone are the days of what newspaper editors called the “label headline,” a two- to-three word punch for each story. Now headlines have to sell you each bit of content and filling them with action verbs and impactful keywords are the new norm.

The Lingo

Print designers are learning a whole new set of words that describe things they have been doing for years. Some of the terminology is also changing to reflect the increasingly mainstream web variations as well.

Print designers have always worked in kerning and leading. (Kerning is the space between letters and leading is the space between lines of type). But these terms are becoming replaced with letter-spacing and line-height.

Not only do the web terms sound less jargon-y, they are more easily understandable. There could even come to be a time where letter-spacing and line-height are the common design terms for print and web designers while the terms kerning and leading disappear from the vocabulary.

Software and Technology

Not only are print designers learning more (and emulating) more web design because they are looking at it, they are also using many of the same tools.

Because of products such as the Adobe Creative Suite, which contains software for print and web and tablet design, designers from both disciplines are able to easily learn software that might have otherwise seemed intimidating. Having a set of tools with a uniform look and feel helps encourage designers to cross those borders and work across platforms.

Designers of all kinds must to work harder all the time to stay up-to-date with all the changes in technology. This affects print designers just as much as those working on the web because of cross-platform software. Each update a print designer gets all the same new tools and options that web designers have come to rely on; all designers would be wise to learn and find ways to benefit from those feature updates.

Further, the web world has helped print become more efficient when it comes to file sizes, saving and compression. Working with images that are sized to fit and load quickly is a key part of any web designer’s job – a site that won’t load (or loads slowly) will lose hits. Print designers, too, are learning to better size, scale and package files.

Personal Experience

I spent the first part of my career only designing for print. I have learned firsthand how the design industry as a whole has changed and continues to evolve.

At one point, I thought I would be left behind because I was not labeled as a web developer. But what has become increasingly clear is that design skills are design skills. If you have the eye, and a willingness to learn how to work across multiple platforms, you can create beautiful things.

They may have different names, but the concepts are all the same. It’s just the paper, or screen, that’s different.

Credits: featured image background by Anatoli Nicolae

Previous:
Next:

Tagged with:

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

View all contributions by

Website: http://about.me/carriecousins

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 65

Comments are closed.
  1. 1

    Oh I have seen this trend happen so much throughout the last 4 years and I am so glad it is happening! 3D effects, beautiful typography on web look stunning..and best of all – here you don’t need to worry about print services, so much about color brightness and differences. On web everything is happening easier, more space for possibilities!

    But I think you feel Carrie, how much print experience is helping to become better web designer right? Lovely post – shared on Twitter!

  2. 2

    Dainis:
    Oh yes. My background in print has helped me learn so much and work so much better on the web. And it goes the other way too. Techniques I have used for web design are popping up in some of my print projects!

  3. 3

    I for one am happy to see this trend. As a front-end guy, I find my print publications easier and more enjoyable to ingest when they follow these web-based practices.

    Great article!

  4. 4

    I love the connections between print and web design, because I find that both industries are working to emulate the other, creating this beautifully cohesive, yet individual, presentation across the platforms. You can see this on publication websites like the New York Times or Vogue. We’ve in a dynamically creative time right now where the ante has been upped for writers, wherein content quality must be first rate. It’s exciting!

    Thank you for this refreshing article, Carrie.

    Cheers,
    Sarah Bauer
    Navigator Multimedia
    http://www.navigatormm.com

  5. 5

    I enjoyed this being both a print designer and web design.
    I hate to be a troll, but need to point out that kerning and letter-spacing are not the same.
    Kerning is the spacing around an individual character, tracking is a closer equivalent to letter spacing.
    Cheers,
    Tristan

  6. 7

    My first impression is “self indulgent rubbish” – read your history books! I still have a copy of Print Magazine Awards Annual on my shelf from 1992 and I can find all of these so called “new techniques” and “details” represented in the pages. Just because it happened before you went through school doesn’t mean it didn’t exist. Granted, it wasn’t as easy to do then, but to credit the web for somehow inventing things I was copying from other designers 25 years ago, puhleeez!

    • 8

      agree 100%. This article is rubbish. Thank web designers for teaching print designers how to use a limited font pallet correctly? What? Sounds like glorifying the handicap of web. I have yet to see a well-set paragraph on the web, let alone a decent looking header that has been “linespaced” without the benefit and necessity of kerning. Its a shame that articles like this are floating around and worse, being endorsed by linkedin/design taxi etc. Cart before the horse is exactly what this is. Trends don’t come from Print, they don’t come from from web, they come from lazy designers.

    • 9

      Agreed. That was exactly my reaction. It is true that everything influences everything else and therefore web will influence print. But to say it’s teaching print designers things they known well before computers even existed? Seriously?

    • 10

      Thought I was the only one remembering great “pre-web” design…so glad I’m not alone.

  7. 12

    Hi Carrie

    Great article, I think having knowledge across multiple platforms like web and print is a great advantage when designing new layouts for either medium. As a web designer I at first found my lack of layout and typography knowledge a real hinderance. The collection of websites you have put together here are a great source of inspiration.

  8. 13

    I do agree that both print and web design learn from one another, but if you strip away the fact that they are both visual design, you are left with two very different mediums. For me, web design is more about usable design; how things function, how content flows to guide users through pages. Also I think that web designers should have a grasp of front-end build – that is, how document flow works. From my experience working with designers from a print background, this is a very different way of thinking which often doesn’t hit home, because of the differences in the medium. For example, overlay objects in print is simple, but in web, we have to wrestle with absolute positioning which defies the natural flow of the document. There are also other factors, such as what can and can’t be done with CSS and how you can enhance interaction with JS. It’s something of continual debate.

  9. 15

    Good article, Carrie.

    I agree with Tristan on the subtle, often-overlooked difference between tracking and kerning.

    Having worked in newspapers for more than a decade at the start of my career, I’d have to take exception with one thing: I don’t think the web has led to “better” writing. Concise writing, as you pointed out? Sure. A change in headline-writing style for SEO? Absolutely.

    But “better” writing? I don’t think so. If anything, the web has had a negative affect on writing and grammar (this coming from a copy editor). We all make spelling errors from time to time, and perhaps mess up a grammar rule or two (or else the Autocorrect on our iPhones mucks up things!), but in general, web writing is sloppier than anything you’ll find in print.

  10. 16

    I agree that print and web influenced each other a lot but one important issue is ; print and web designer need to consider that design for each should have their own planning and consider their own unique user experience. Then you can borrow some elements from your print knowledge (or vise a versa) but it is wrong if you duplicate it.
    Thanks for the article

  11. 17

    Spot on, Carrie. I’m a classically trained print professional looking to broaden my expertise into web design. The first step is learning not to be intimidated by all things web I don’t know…. nothing can diminish 23+ years of success in print design. For me web design is new inspiration!

  12. 18

    Great article, Carrie.
    I started my career as an illustrator and graphic journalist and completely agree that the depth of experience I gained in print definitely helps with the web design, but as Matt says, they are very different mediums. Embracing both makes the journey all the more exciting though!

  13. 19

    I like your approach to the article and you make some good points Carrie – but drop shadows, rounded corners, cutout images and typography being borrowed from web design? Really? In my experience it’s the reverse. I’ve been waiting years to be able to pull off some of my go-to print effects on the web. And it took new versions of Dreamweaver and hours of CSS training to pull it off. And don’t forget, regardless of the terminology you use, design concepts like spacing between lines of text was started with print before the web was even created. I love the new stuff going on in web design. I think it’s great and I welcome it, but let’s not put the cart before the horse.

  14. 20

    I think this article is really mis-informative and is extremely bias towards web-design.

    Saying things like… “Print designers can also thank their web counterparts for eliminating the font mess. There are few restrictions to the number of and type of fonts you can use in print work; this is not the case on the web. The limited font selections used by web designers for years, has helped print designers reign in their desire to use a plethora of typefaces. The more minimal font palette makes for a cleaner, more streamlined project.”

    …is just flat out not true, and totally dependent on the designer. This isn’t an idea that was started by the principles of web-design. People have been advocating restraint for years.

    Furthermore, letter-spacing and line-height are not direct replacements for industry standard terms such as kerning and leading and do not encompass other forms of type-manipulation, such as tracking.

    IF ANYTHING, the web is slowly starting to adopt the principles of print, and improve on them through simplified and consideration for restraint. The new Rdio website is a perfect example of this distilled form of design.

  15. 22

    Do enjoy this article very much as it gave me a new perspective of looking at web and graphic design. An inspiration for me to look beyond the classic views we have on things and look for more new perspectives.

  16. 23

    I like this site—a lot. It is a great resource, but one thing is keeping it from being truly remarkable. I’ve noticed two patterns:
    1. Authors seldom respond to comments, especially negative ones. If a comment isn’t glowingly positive, it usually won’t get a reply, OR
    2. It gets a very harsh retort from the author (not you Carrie).
    I’d like to suggest admins and authors view David Airey’s logo blog (www.davidairey.com). He makes it a point to interact with all readers and all comments. As a result, he has an incredible following and immense amount of respect from his peers. Just some food for thought…

    • 24

      Hi Josh, thank you for your honesty and I want you to know that I really understand your point and appreciate your suggestion.

      I would like to invite you to follow me for one day so that you can understand why a pattern like that emerged: Every day we receive around 100 comments and contact form submissions, of which more than half are questions about how to change/integrate our code. A common example would be something like “Is it possible to have autoplay for this slideshow?” This kind of question is extremely hard to “answer” to since this would basically mean to add autoplay. As you might understand we simply don’t have the capacity to offer support like that.

      The comments that we do answer to, which, how you have correctly pointed out, are mostly the positive ones, we answer for a very simple reason: We just want to say thanks. I would feel bad when releasing a tutorial and everybody says they love it and I don’t at least say “Thank you”.
      But that’s not the only things we answer to. We’ve created whole solutions, modified demos, example code for our readers; it’s just not possible to do it all the time. Just yesterday I added a new demo with sample code to achieve what a reader asked for. Believe me, I’d love to do that all the time but that would mean no time whatsoever to do new stuff.

      Then there is a type of comment which is the “doesn’t work” type: “It doesn’t work in IE”, “It doesn’t work in Opera”, “It does not work when used with X jQuery plugin” etc. Again, there is simply no time to look into every “not working” feedback. If it comes with a detailed description (the OS, the browser etc.) we can work with that but we can’t spend time in asking people over and over again to give us details on “what exactly does not work for you and what’s your OS and your browser?” Sometimes I get frustrated with this kind of unconstructive feedback and I might have answered in a rough way (I did answer once “Do you want you money back? 😛 “).

      We are in a very difficult position: either we do engage more with our readers which simply translates to giving support or we spend that time on creating more things. We’ve opted for the latter a long time ago and unfortunately this leads to some kind of seclusion that looks like as if we don’t care. I’m truly sorry about that and I wish there would be a way that we could somehow do both. The nature of our blog does not help solve this problem; our blog is not about simple topics, we try to push limits every day and it’s not easy to balance this.
      I hope I could give a little more insight, I’m not trying to give excuses, you’re feedback is very valuable and I can guarantee you that we’ll do our best to offer more engagement possiblities – for us and our readers.

      Thanks,
      ML

    • 25

      Hi Mary Lou. Thanks for the reply. I’ve been wrapping up projects and taking vacation, so I’m just getting around to reviewing your response.

      Let me clarify a few things: First, I totally understand what you mean concerning comments to what I’ll call “code” or “tutorial” posts. I still think an acknowledgment (even when trolls post) is a positive thing to do. You can always address multiple or similar comments with one response. It really goes a long way in readers’ minds when authors are engaged. I don’t equate engaging readers with offering more support. I think in “code” posts, as long as you all have clarified what you’ll be able to answer, a simple acknowledgment would have to suffice. Or maybe ask others making comments to weigh in.

      Secondly, there is the other classification of posts, which I’ll call “list” or “opinion” posts, such as this one. In my opinion, these are the ones that should receive the most engagement. Sure, a writer has listed their “top 10” list of some topic or opinion about a trend, and sure, it’s obvious what their opinion is. But, there are some thoughtful questions being asked and comments being made that should probably receive further comment.

      I think at the end of the day, it might be helpful to review the purpose of opening stories to comment. Do you want to engage readers and dialogue? If not, I can’t help but ask, why give the option to comment (aside from it helping SEO)?

      Anyway, I would love to see more dialogue. I think it’s possible, and I think there are plenty of blogs you can review to see this in action. It builds your credibility and trust among readers—even if you both agree to disagree on a topic or point.

      Thanks for listening to my ramblings. You guys have a great site. I truly enjoy it. If you want to dialogue further, feel free to email me. I feel bad for hijacking Carrie’s article like this!

      Take care,
      Josh

  17. 26

    Probably, as others have posted, one the most ill-informed articles recently posted.

    I would like to ask where you acquire your facts from, ‘but moreover more print designers are looking for inspiration and learn from their digital-publication peers’ for example.

    Will we now all be calling a Sans Serif type faces the : straight up and down font. The Serif type faces: the ones with curly bits on?

    Also, ‘it has only been in the last decade that many newspapers have began using full-color presses.
    A quick search on the web; (oh the irony), The UK’s first colour newspaper was “Today” launched in 1986 by Eddie Shah.

    Yes, its easy to sit here and critique others, but please if you are going publish your opinion, and has you will know from being a print designer, get the basics correct.

  18. 27

    Seems like some of the people who indicate that this post is informative and eye-opening are relatively new to the world of design in general. Drop shadows, bright colors, rounded corners, cutout images and typography being borrowed from web design? Do your research. FYI cutout images have been referred to as “silhouettes” for as long as I’ve been in the business. I started out in print 33 years ago and utilized all these techniques since my first project. You have this article quite backwards. All competent web designers borrow from techniques and theories established by print designers many decades ago. A web page shouldn’t be any different than a printed page if the objective is to quickly communicate ideas or information. The web (on the whole with exceptions of course) presently lacks communication disciplines that are essential to effective presentation. Web designers must draw upon the knowledge and experience established by previous and current print design professionals. There is nothing to be learned from a web designer that a good print designer doesn’t already know.

    • 28

      “There is nothing to be learned from a web designer that a good print designer doesn’t already know” Is this your site: http://tonycorbitt.com/ ??? Cause if it is you really need one! 😛

Comments are closed.