Print vs Web – The techy bits

by Carrie Swift


Posted on May 22, 2019


Blog post4

Print and web designers have a lot in common… however, there are some important differences that people often don’t understand.

Print design is any design which the final outcome is intended to be printed. For example: brochures, flyers, labels, business cards, posters, book covers – t-shirts and large banners.

Web design is a collection of skills that are used to created websites / digital graphics. Web design has so many levels –– it isn't just about the graphics but also the overall look of the webpage and the user experience across all devices.

A major difference between print and web design is how people view them. Holding something physical in your hand — a piece of paper, a folding brochure –– is much different to viewing something on a screen. How designs are viewed play a big part in the designers’ decisions.

Size and layout for print design determines how the designer will use the space… in terms of font size, design elements, etc.

For web design, size less restricted. Although responsive design is currently in high-demand so web designers have to keep in mind use for all devices.

Resolution

So many people don’t understand the basics of resolution for both print and web. Resolution determines image quality so it’s important to use the correct terminology.

DPI (dots per inch) – This is used in the printing process and determines how much ink is used. The higher the DPI the better the quality.

PPI (pixels per inch) – This is the number of pixels (squares) in a digital image/ photo and determines how much screen space is used.

File types

Some common file types, their characteristics, and what types of projects you can use them for:

Print only:

  • TIFF: high image quality and large file size (compressing image does not reduce quality, unlike with JPGs); Widely used for final artwork
  • Web only:

  • GIF: supports graphics featuring animation and/or transparency effects; colour capabilities not as good as JPGs –– ideal for simple web graphics/ icons since as low-res files help page loading speeds
  • SVG: vector format that can be scaled up or down to any size without loss of quality
  • Both print & web:

  • JPG (or JPEG): Most people will be familiar with this one, the default file format on many digital cameras. JPGs must be saved with an appropriate resolution and in the correct colour space (CMYK for print & RGB for web)
  • PDF: widely used; preserves the original content and appearance of a file regardless of where or how it is viewed
  • EPS: popular for saving vector graphics to preserve their scalability
  • PNG: high image quality; supports transparency/ opacity
  • Colour

    Colour displays differently printed on a piece of paper as opposed to viewing it on screen, as it involves different colour spaces: CMYK for print and RGB for web. If a project includes designing for both print and web — say, a logo for a website and a business card, the designer will need make sure colours appear consistent throughout.

    The most popular way is to use the Pantone Matching System. Pantone colours have their own reference numbers, which are different to the codes associated with CMYK and RGB. The Pantone system makes it easy for designers, clients, and printers to collaborate and ensure that the final product stays consistent.

    This is a very simplified guide, but I hope it gives you an initial understanding and sheds some light into the designers world.

    Back to Blog

    See what inspires me...