Designing for the web versus designing for print can be a completely different experience for a graphic designer. Embracing the medium as something different from print, and understanding how design works in digital media is the first step that most designers need to take. Specifically, come to grips with the fact that, on the Web, design is not a method for implementing narrative, as it is in print, but rather it's a method for making behaviors possible.

I had to take this step when I got the opportunity to work at dynamIt after undergrad. I ventured out into the design world gripping a degree that was based in print, with little knowledge of design on the web, but eager to get my feet wet. I’ll admit it, I wasn’t very good at what I do now a couple of years ago, but I can say that now because I have learned and embraced the intricacies of designing for web. Given this experience in the web industry, and specializing in user interface design, I have grown to appreciate the differences between print design and web design. The reality is that the web is not print, it’s not a great big graphic, and trying to force it to be that is just a bad idea.

If you’ve designed more than a couple sites for people, you’ve almost certainly heard a comment or two that sounds something like this: “That would look better if you moved the graphic down about 5cm or so.” or “I’d really like that blue to be as rich as it is on paper, can you do that?” The problem with this attitude is that it is based on a fallacy. That fallacy is that you can design a web page that will look identical and pixel perfect no matter where you view it. With most print projects this theory would most certainly be true, but that’s not the case with web design. What most fail to realize is that there is going to have to be compromise from the PSD (or whatever program you, as the designer, choose to use) to the final product. These compromises are inevitable and are most apparent in categories like audience, layout, color, fonts, and graphics.

Audience

Whether the web designer is working on an interface design, email newsletter, or banner ad, he or she is going to have to consider the audience and how they are going to interact with the design. When beginning a project, it is important to think about the experience of your audience, which differs greatly between print and web design. At the most basic level, the web is interactive and print pieces are usually not.

In print, the designer is focused on getting the marketing message across, and these usually turn into forced tangibles like business cards, magazine ads, or product packaging. One of the benefits of print design is that you are dealing with a physical product, so physical properties such as texture and shape can help you achieve your design goals.

On the web the designer has to think about the overall experience, putting themselves into the user’s shoes. The overall goal is typically to keep the user on a page/site for as long as possible, while also making the experience easy, user-friendly, and visually appealing all at the same time. While I classify print design as being somewhat of a ‘forced tangible’, I see web as being even more difficult as a ‘voluntary intangible’.

Layout

Both print and web design require clear and effective layout. In both, the overall goal is the same, use elements of design (shape, line, color, type, etc) to present content to your audience. The differences start in the available space to create your design. I have always said that print design is designing with boundaries, and web design is designing to infinity.

In print, the designer knows what space, measured in inches, that they have to work with. This could be as small as a business card or as large as a roadside billboard, but the designer knows the space allowed from the start, and that the finished product will look the same to everyone who sees it. There is a lot more to consider than just the bleed line and safety areas when designing for the web.

First off, web designers live and die by the pixel, inches are erroneous. Second, a web designer is faced with the challenge of designing a site that looks good on all monitor sizes and monitor resolutions. Since the space with which a web designer has to work with is an estimate, you have to cater to the statistics, while keeping in mind the people who haven’t embraced newer technology. Over 50% of people who own computers have their web experience at 1024px by 768px or higher, and a mere 9% are at a lower resolution (800×600 pixels or lower).

Color

Dealing with color can be tricky for both web and print designers. It’s first important to understand the color models such as CMYK and RGB. The RGB color model is used when designing for the web, while the CMYK color mode is designated for print design.

In print the designer must consider how the colors look from the monitor to paper, but print proofs can ensure the desired result. When preparing the file for print, the designer will often choose ‘spot’ or ‘process’ colors for the printer to use. These are colors you choose from a palette and identify with a pantone code that you provide to your printer.

Now when a web designer tackles a color palette and carries it throughout a design, there can’t be a guarantee that the end user will have the same experience. Colors on the web are not referred to by pantone codes, but by hexadecimal values (6-digit numbers), for example: black (000000) and white (ffffff). A web designer has to consider the difference in colors from monitor to monitor, and how color will be affected by brightness and contrast changes. If you use a CRT monitor the colors you see are much more washed out than others see on a newer laptop or LCD flat-panel displays.

Fonts

When a print designer adds the typography touches to a poster or package design, they can dig through their font libraries without any inhibition (unless the project has specific specs). When designing for print there are really no worries with what fonts the designer chooses to use, because in the end the final product will be seen the exact same by everyone who views it. Another small, yet overlooked difference between print and web design.

Choosing fonts for a web design is a much more delicate process, and unlike print design, there is no guarantee that the end user will see it the same way. Since there is absolutely no way one could predict what fonts the end user has installed, the web designer is forced to stick with ‘web safe’ fonts. These are fonts that are present on a wide range of systems, and are used to increase the chances that the content will be displayed in the original font. There is a work around, but it takes some programming from a developer, and it’s an open source Javascript and Adobe Flash based technology called sIFR. The reality of web design is that unless you’re planning to make every page of your site one large graphic, your page will have text on it.

By now, you’re probably thinking “but why not go the easy route and make the site all images?” After all, with a bunch of images, you can control the fonts and layout. There are several reasons why this route is a dumb idea.

Graphics

Sure using an entire page of images would be super easy to lay out, and you could use any font you desired, but there are things that most print designers fail to realize:

1. File size and download time. With a site that is 100% graphics, yes, the HTML file size would be small, but unless you create very tiny Web page graphics, it will take forever to load.
2. Accessibility. Images are fairly inaccessible without alt text, and unless you’re planning on reproducing your entire site contents in one giant alt tag, your site will be completely blank to the typical screen reader.
3. Search Engine Optimization. For much the same reasons as accessibility, if your site is a giant image, search engines will not read it, or won’t read it very well.
4. Links. Sure you could use image maps, but that’s just a pain.
5. Maintenance. If you find a typo, you have to find the original image, edit it, resave the image and then reupload. With text, you’d just edit the text directly and be done.

Web design is not print design. The styles are different, the way each are executed is different, and the way the end user interacts with each type of design is different. Not understanding, appreciating, or acknowledging the gap between web and print can cause a lot of headaches, especially for developers (I have seen it happen…a lot!). While it is possible, with CSS, to get very precise layouts, it will never be as precise as print. Take the time to educate yourself a little before diving into a web design, there are plenty of resources out there to get you up to speed on best practices and trends. Here are some of the sites I use daily to keep up on design and the web, check them out:

http://www.smashingmagazine.com/

http://www.abduzeedo.com/

http://www.webdesignerwall.com/

http://www.sixrevisions.com/

http://www.webdesignledger.com/

If that’s not enough and you want some more, check out these sites that showcase even more invaluable resources for design, inspiration, and productivity.

Dynamit was honored as one of the “Best Places to Work” in 2010 & 2011 by Columbus Business First newspaper and Interactive Agency of the Year. Times are even better in 2012 and we’re hiring a Web/Graphic Designer for our aggressively growing team.

This is an exciting opportunity to work on cutting edge projects for well-known brands in a dynamic, entrepreneurial and highly creative environment. Please email resumes/cover letters and portfolio information (documents or links to online examples) to Gary Moneysmith via gmoney@dynamit.us.

A web/graphic designer on the Dynamit team will:

• Be well versed with Adobe Creative Suite: Strong knowledge of Photoshop, experience with Illustrator and InDesign.
• Have a strong understanding of Usability & Web Trends: Experience with user interface design, knowledge of best practices & examples of this in a portfolio or live site/application design. They will also be up-to-date on web trends and design tactics with examples.
• Have experience in user experience design (UXD) designing application and system interfaces. This experience is crucial for this position.
• Have Basic Programming Knowledge: We’re not looking for a developer here, but the designer should have the ability to design for web with a knowledge of the boundaries and how to design for execution by a programmer.
• Have a Strong Portfolio: We’d like to see much more web work than print.
• Be eager to learn, with a passion for design & the web. The designer should have a strong internal drive for industry knowledge and be committed to furthering the craft.

Experience is important, but personality is key. Our culture is what drives us, and we’re looking to build our team with someone who both fits and contributes to it.

The position is full time at our office in the Arena District in Columbus, Ohio. We offer a competitive salary and benefits package as well as a fun, high-energy, intellectually-stimulating work environment.

Benefits Include

• Competitive salary (compensation will be based on skills and experience)
• Fully paid medical/dental insurance for employees
• Paid parking
• Unlimited vacation time (within reason)
• Office bar + climbing wall — not recommended together

Don’t sit back. If you want to work in a fast paced work environment with great people who love what they do, apply today.

About Dynamit
Dynamit is a digital agency based in the Arena District in Columbus, Ohio. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce. Client work includes Hilton Worldwide, Charley's Grilled Subs, McGraw-Hill, British Broadcasting Corporation (BBC), E-Z-GO, American Electric Power (AEP), Columbus College of Art & Design and the Ohio State Medical Center (OSUMC) to name but a few.