Bridging the Gap: Difference between Print and Web Design


It’s becoming more and more common for modern-day graphic designers to take on more than one role. In the area of design, many have to be familiar with both print design and web design, which doesn’t sound like a hard task. However, don’t be fooled into thinking they are essentially the same thing; the truth is they are extremely different and any designer who focuses on one sector will more than likely have difficulty becoming comfortable in the other.
Bridging the Gap: Difference between Print and Web Design
We can take myself as an example: I am a print designer that can whip up a business card or flier for you in a few hours. My clients almost always ask me for help with web design and I found myself having to turn it down constantly. Eventually I decided to try my hand at web design and I found it extremely difficult. It’s a completely different development process that takes a while to get used to and I could never really create anything I was happy with. I ended up doing a bunch of research and worked on my technique, and while I’m still not 100% there, I would definitely say I am improving.
Knowing print and web design standards shouldn’t be something you learn in order to be functional in them, but to be able to provide a product to your client that can be easily transferred between sectors. I’ve put together a little list of some of the things I think are most important when dealing with print and web design.

Print Design

Image by: Brian Lary

Freedom of Print Design

File Size – When one goes to get, for instance, their business card printed, the printer usually does not have a limit on the size (megabytes, etc.) of submitted designs. When doing print, and really getting into bigger projects (like full color booklets, folders, etc.), it is extremely typical to see files sizes reach the gigabyte mark. This has a lot to do with setting your document up to print at 300 dots per inch. This creates a bigger file size because you demand a higher quality print than you would using the standard web resolution of 72 dpi.
Bigger Canvas = Bigger Design – Not that it is not acceptable to do really huge designs with web, but this is where the idea started from. You will almost always be able to see a huge design in one viewing rather than having to scroll and slide around websites and piece it together in your mind.
One-Size Design – When you design for a standard business card, that design is only going to appear on that size. When you design for a standard folder, that design will only be on that folder. There is no need to really try to make sure everything in a design is in such a way that it can be printed in different sizes. There are a few exceptions, but most of the time the design you create will only be viewed on the paper size it was created for.
Paper or Printed Factor – Sometimes when you design for print you have to design with the entire finished product in mind. For example printing with a letterpress or spot-UV technique, is an added element to your already magnificent design. Printing on matte paper is another technique that can take your design to another level, as well as using a die-cut.
Fluid Layouts – In my research, web design is a bit boxy; you have to kind of think of elements within boxes and lined up correctly. In print, there is a similar quality but I don’t believe it’s as boxy. You can essentially put everything wherever you want it go. For example, fliers and postcards are almost always designed to wow you and take design to another level sometimes without regard to a box or standard set up.

Limitations of Print Design

Color Selection – You have to be careful when choosing your colors in whatever design program you use. Every time I send something to be printed I’m always anxious and nervous to see the print, because the colors can sometimes end up being way different that what was picked in your design program. To be safe, you want to get a hold of a Pantone Color Picker and pick colors that way. It’s almost impossible to pick really bright, neon colors with a traditional printer, as well.
Technique Translation – Some techniques that are heavily used in web, aren’t easily picked up in print design. Do your research to figure out what does and does not work, especially if you find yourself doing the technique a lot in web design. Things that I found don’t work too hot are subtle gradients (for example medium gray to dark gray/black) and hair lines (1 pixel lines), which I depend a lot on in website design. There are ways around it, but just be sure before you try a different technique in print.
Measurement Limitations - If you want your image to be printed to the edge (with no white border), you must set up what is called a ‘bleed’ in your print design. This is usually 1/8 of an inch of dead space around your design so it can be cut off. With that you have to make sure the rest of your elements are within a safe distance of the bleed so nothing is cut off. You may also have a gutter when creating booklets that is the part of the page that will be coming from the spine. This isn’t the biggest print limitation but something that can alter the appearance of your design if not taken into consideration.

Web Design

Image by: Ben Lancaster

Freedom of Web Design

Infinite Color Selection – The color difference between your mock up and your finished product is almost always the same. The aren’t a ton of limitations on color (not as much as in print) and you can do a bunch more with your colors. The only issue here is hoping other monitors have similar settings to yours in order to translate the design correctly.
Easier to imagine things in motion – I think this was and still is my biggest hurdle with web design. As time progresses integrating web design with motion is becoming more and more standard. This isn’t just another technique but a way to really make your website pop and get your audience to really engage with it.
Technique Translation – Much like the opposite in print design, you can do a lot of your more intricate techniques in web design. Hair lines, gradients and pixel perfect art really work well with web design. If you have more flat colors used in print, you can really use your web design to really add some extra character to the designs.

Limitations of Web Design

One-Size Fits All – When you are creating for the web you aren’t just creating for your monitor’s size, but you must create something that will look good in every monitor size, and presently, you have to even keep in mind the small sizes of iPads and Android cellphones and such. Once this is understood it isn’t a huge deal, but starting out this is one of biggest things newbies skip; optimizing designs for all monitor sizes.
Loading Sizes – Another opposite of print design, you almost always have to optimize your designs for the web. File sizes are to be as small as possible so that can load for your audience as quickly as possible. The trick here is lowering your file size and keeping the quality of your pictures.

The Importance of Bridging the Gap

The biggest importance here is what the client wants. If you’re a web designer and you create a site for your client, it needs to be something that can be easily translated into print design, especially if your client asks you to create the print design. This, in short, is a part of branding and brand recognition: having an audience be able to connect an image or colors or a logo with a company. Knowing the two, even if you are just a web or print designer will allow you to create in a way that can be beneficial for both sectors, and ultimately, your client.
What are some other freedoms and limitations you’ve found in either design sector?

Comments

  1. Really interesting topic… many people are not know that Print and Web design is different thing. I hope people will understand about it from your blog.

    ReplyDelete
  2. You can learn all about bridging the gap difference between print and web design with help of the information given in the article here. The post is very useful
    Web Designer

    ReplyDelete

Post a Comment