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

From our sponsor: Jamf Now sets up and secures your team's Apple devices so you can get back to more creative work.

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

Tagged with:

Carrie Cousins

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.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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. I didn’t realize that using the same 3-4 fonts over and over was a good thing. Good typography was one of the first casualties of the web era. This is why so many print designers have a hard time warming up to the web. It’s frustrating to know that you have so many options available, that you can’t use.

    • You can use as many fonts as you like in web design, but you have to understand how to use the various tools and codes at your disposal. Not many do because not many actually have any skills.
      It seems that since the advent of desktop publishing anybody can call themselves a graphic designer, regardless of the a complete lack of knowledge or skill. All they need is a copy of photoshop. The newspapers , magazines and internet are now crammed full of designs done by totally unskilled but cheap “graphic artists” and secretaries with DTP apps on their PCS.
      I can’t imagine any other trade where this could happen. Imagine a chef that could not cook running the Ritz kitchen?

    • Keith. I agree. I had a former manager who swore that she could be a graphic designer if she knew how to use Photoshop, too. In her mind, knowing how to use the software makes one a graphic designer. Talk about a slap to the face.

      Regarding Greg’s comment, I think the idea is to use 2-3 fonts per project—not the same 2-3 fonts for every project. I say 2-3 fonts because in many instances, I think it’s best to use no more than 3 fonts. So, a website for should use no more than 3 fonts. It creates unity and cohesion, while being visually appealing and communicating the message clearly without getting lost in a myriad of fonts.

  2. This is a great article! I agree 100%. Hopefully one day they will merge some of the CS programs since most of them have very similar functions so that we can Design in Photoshop and have it automatically export as a fully functional Website! I am sure this will never happen since they would loose revenue but us designers can dream right?

    • Josh, there’s a lot more to web design than making things look good a Photoshop. There’s no way you could get good results by hitting an export button from PS to get a website. In fact, many web designers are now advocating that we design “in the browser” since Photoshop is such a bad web design tool.

  3. Are you kidding? Most of this is just plain wrong. Editor — please check content for accuracy… Most of the changes in print design came about because traditional print processes (which required much time, effort and money to implement) were replaced with digital processes that allow for simpler and quicker (less expensive) layout, production and printing. These technological changes made it possible for all designers to create more elaborate works within budget and on deadline, beginning with print.

  4. I would agree with a lot of the points in this article. Worth reiterating that online design is so much more accessible than print, so inevitably design features and styles are very visible every day, and from lots of genres. Being involved in designing both online and print it does make me appreciate the plusses of both; the tactility of print, and the ability to create movement and moving ‘stories’ online which can only be a good thing!

  5. This is the most ill-informed article I’ve ever read. College design students have better a better understand of design history than this. Before the author thinks this is coming from a “print” designer, I work in the web space and use both online and offline materials for inspiration. Through all of my designs the one thing I do know is my design history. Apparently this author does not. Talk about an embarrassment to the design community and the great designers of years past. Better writing? Not likely. New details? Do you really think CSS coding would have evolved without some push from designer who wanted to do more? Bolder look? Has the author even opened an art history book within the past century? Cleaning up the font mess? Do you know why there was a limited font pallet when visual based browsers first came onto the scene. Guess you don’t know technology. The lingo? Please check your facts before posting about them, there is a reason why certain terms are used and it’s not because it’s a “fancy designer” term. Also please do some research before you embarrass us all in the design community. Oh wait too late you already have!

  6. As a web designer, this article is too pathetic. The only bright bold colors I see is what I just threw up after reading this post.

  7. Sorry Carrie. I think you’re way off course. If this article was intended to ruffle some feathers, you’ve succeeded. I’m a trained graphic (and web) designer and I don’t even know how to comment. I see so many portfolios of kids that have no idea what design is. It’s much more than a design application…. really. And as far, ” Better writing”… my gosh… I have some trained folks who wrote for WSJ and other major publications who are getting out of the industry. One reason is that there is a shift to a lesser understanding or concern of good writing. Blogging is not real writing. Carrie, arousing article but misplaced. Sorry.

  8. SEO leads to better writing? You’re kidding, right? (Here’s a writing tip: You clutter the lede with the word “more,” which makes the point you’re trying to make difficult to follow.)

  9. … unless, of course, the word “more” is one of your search engine optimization target words, in which case you’ve done a fine job repeating the word high in the first three graphs of the story.

  10. And that is exactly what the problem is. In this industy, a lot of people who own photoshop and don’t even know any other programs call themselves a designer. Design is based on history, knowledge and experience. It has evolved and it’s quit easy for a lot of people to f*ck this industry up. I think that Evolving technology is oke. But in this industry it might screw things up instead of making it better.

  11. Under your Software Section you use the sentence, “Designers of all kinds must to work harder all the time to stay up-to-date with all the changes in technology.” This indicates to me that good design also needs to be backed up by good editing skills and not just a brief scan by spell check. Because getting your point across not only requires a great visual presentation, but diction as well. Too many times copy is ignored for the sake of the visual presentation and its expediting. More care needs to be taken in regard to proof reading an article, advertising or the like. Without that a presentation becomes less professional and more on the amateurish side. With today’s technology I fear that web designers and editors have become more complacent with its use.

  12. kerning ? letter spacing
    Web Design did not invented bold colors, and different formats for print or limited pallete of fonts (swiss design at the 70s used mostly only helvetica, akzident grotesk and univers and did it very well for instance)…
    There is a lot of things i can disagree too, but i’m not in the mood for writing…

  13. kerning is different than letterspacing, kerning is space between some critical letters, not entire all word…

  14. The author has clearly spent almost no time behind a mouse and has a minimal understanding of her subject. This is compounded by the fact that she did not bother to interview anybody to form the story.

    The author seems to have no idea that print design has been using these techniques for years and years.

    If there is anything that has changed, is it the overall design aesthetic, which is then interpreted to print and the web. And to paint colors. And to clothing. And to cars. I suppose the author thinks clothing design reflects the web now, too.

    This article, basically, sucks rotten eggs.

  15. ABSOLUTE BOLONEY!! I have never read such utter rubbish in all my career, and I have seen plenty. This is completely off the mark. Web designers are primarily technical people who use code. The visual to them is, and always will, be secondary. Designers have training and a keen eye for detail to get the best from images, typefaces and message. Something web designers all too often neglect. Design since day one has inspired and always used COLOUR without restriction, too say colour was limited is a joke beyond belief.

    I suggest you do your research into the history of design and come back and write an accurate article.

  16. I think this article while some of the points are debatable and up for discussion gives us a fresh way to look at things. I liked it! When new technology comes in we tend to see the 2 steps forward and one step back thing – however, things do generally catch up (desktop publishing for example-design using early software was tacky and atrocious but it got better – better than before! I was there before and after) When the web started in the early 90s, many of the sites were designed by web techies who would not know good design if they tripped over it. FYI – I am involved in both web and print.

    Designers are going through so many changes in the last 25 years (we now have all the prepress and web publishing responsibilities not to mention – designing) Come to think of it, our profession has always been changing in leaps and bounds. You have to learn to adapt in business and ours is no different.

    Frankly, I am a little disturbed at some of the comments posted here. I wonder if some of you would be saying the same things, so mean spirited to the writer in person? Just because you can hide anonymously behind the net does not give you the right to forget how to be fair minded and respectful.

    • I think most of the commenters your referring to could agree that this article is not fair minded or respectful to the history of the design industry and to the great graphic designers who have helped shape the industry to this day.

      The early stages of web were nothing pretty, and great print design was once ALL we had, we agree on those fronts. But the author’s points of how web has influenced print have no ground to stand on. I think that is where the frustration lies. I agree some people have said some harsh things, and thats not constructive. But this article itself is a let down, and a slap in the face to a lot of great designers.

      There was plenty of great design before and after desktop publishing. Desktop publishing just gave uneducated “designers” access to design tools.

      Some documentaries that display greatness across years and years of design:
      Art & Copy

  17. A history lesson is definitely in order. For example, there is a reason it’s called “leading” (and it isn’t because someone thought it sounded cool).

    To save you some research time, the term “leading” refers to the literal thickness of the metal strip of lead which was used for line spacing when type was set by hand using a “job case”. Obviously, the more strips of lead you added, the more space between lines. When utilizing a California Job Case each letter and space was placed by hand. For example, an “en” space was a piece of lead approximately the width of the letter “N”. An “em” space was the approximate width of… you guessed it… the letter, “M”. I could go on and on but research is fun and I wouldn’t want to deprive you of that experience.

    However, one statement that really caught my attention is the statement that print designers are learning from web design. Your statement should have begun with, “In my opinion…” because there is absolutely no basis for your observation. For the record, I design both but I dare say, IN MY OPINION many graphic designers would take issue with a blanket statement like that. The chicken and egg question comes to mind!

  18. As mainly a print designer, for 35-plus years, my opinion is that most of the changes Carrie is attributing to the influence of web design… were there before in print design, even before DTP and before Mac (right back to the days when paper outputs were pasted onto boards for artwork). I’ve just checked my samples and I have promotional bottle-collar designs from 1989 and 1991 that are in bright colours and feature curves and circles. Cutouts and rounded corners have been round forever, I recall the problem of matching up rounded-boxes-within-rounded boxes in Letraset. Print designers have always used the brightest colours where it was possible. And ‘line-height’ and ‘line-feed’ came in from photo-typesetting, long before Macs, but never caught on because it was just techy lingo while ‘leading’, the term that had a lot of history to it, was retained in the computer era. Strangely but pleasingly, Carrie retains ‘cutout’ and not the modern ‘clipping-path’. On the whole, I don’t think Carrie has got her facts right but I congratulate her enthusiasm for the topic. All the best from Glasgow, Scotland, UK.

  19. The title of the article should have read: The Importance of Knowing Design Basics in Web Design
    This should have placed a well intentioned piece in its proper light.