Blog
Printer Blog Image

Web Design vs. Print Design

by Jason Holland, Interactive Graphic Designer

There are big differences between print and web design. Print is a static medium, whereas the web is an adaptable medium dependent on many variables. While both include text, various colors, creativity, and basic layouts; the process for creating these types of designs and the way the prospect or customer interacts with them is very different.

First, print is tactile. You can physically hold it in your hand. Print can include anything from business cards, brochures, and flyers to product packaging and magazine ads: in other words, all the things that enhance your brand and reach your customer, but that do not provide a way for them to participate or interact with your company. Print design is limited to physical space. You must use the space given to make a design that is attention-grabbing, pleasing to the eye, and easily readable.

Web, on the other hand, is virtual and variable. While a web design is generally constrained to the monitor size, pages are scrollable, linkable and interactive. A web page should also be attention-grabbing and pleasing to the eye, and isn't limited by available ad space or constraints by the publisher. It's an ever-changing way to communicate to your customers and in the case of Social Media, for them to communicate with you. While it's important that your design be consistent throughout the site to complement your brand, your content, images and text, can frequently change and you can often manage this yourself.

Browser & Operating System Configurations


The first and foremost consideration in web design is to be aware of the monitors and displays the end user will be viewing the site on. The website will be viewed on everything from small resolution mobile display to high resolution 30” monitors.
The key is to target somewhere in between. The standard these days is to target 1024x768 pixel resolution. Taking into consideration browser interface and operating system elements, this leaves us with a 990x550 “safe area” to work with. The 960 Grid System works within this assumption.

There is a school of thought that says anything below 550 pixels will be completely lost and the visitor to the site will never scroll to see the rest of the page. While the most vital information should be “above the fold”, the user expects to scroll down in order to self-select content.

Typography


Next, a web design should consider designated fonts. In the past, fonts were limited to those installed on the user’s operating system. In 2011, HTML5 and CSS support has expanded the horizon of fonts available with a feature called @font-face. This handy feature allows designers to use just about any font (type-face) available.

Unfortunately, the biggest hold-up on full capabilities are the licensing issues that come with using expensive type-faces on the web. In addition to a plethora of free web-fonts, more and more font foundries are providing fonts licensed for web use.

Designer’s Toolbox


The web also gives designers a whole extra set of tools. Considering how to communicate with your intended audience, it’s important to know not only what tools you can use, but when you should use it or how to use it.

The most common tools for print designers are Adobe Illustrator and InDesign, both used for the purpose in illustration and print layout but both become extremely impractical for the web where pixels, not inches, are key. When pixels are in question, Adobe Photoshop is king. While a design may look amazing in Illustrator, exporting to Photoshop can expose all sorts of issues now that the design is pixel-based.

Code, the Foundation of a Page


On the web, the code behind the design is the foundation of the page. The way a site looks on a particular computer/browser configuration is only one aspect of the design. The code has to be interpreted by many different browsers—on laptops and desktops to mobile devices and search engines. The only way to make the site visible to the widest possible variety of users is to learn how to code the site in HTML5 and CSS and learn the major browser bugs.

Target Audience


Finally, a web designer has to consider the target audience. Do they have a high speed internet connection? Are they likely to have the latest computer with the newest browser? Do they already know about you and your site? How will they find you— Search Engines, Facebook, or Twitter, for example?

Conclusion



Web design and print design are fundamentally different, with a different set of rules. While print design works in a tactile and fixed medium, web design is a fluid medium that must consider system and browser constraints, web typography limitations, the code foundation, and communicate the content’s message to its target audience.

Image Credit: http://tinyurl.com/jhv92r4
Are You Ready to Start Your Project?