1. Technology

Pixel Perfect Design Does Not Necessarily Equal Good Web Design

Web Designers Should Not Ignore Good Design Practices


At this point in the timeline of the Web anyone building Web pages who doesn't recognize the differences between print design and Web design is hopelessly outdated. It's obvious that Web pages are not print pages, and many companies create special print style sheets so that their Web pages will print as nicely as they display in the browser. But there are still a lot of graphic designers out there who would like to force Web pages to have the static nature of a print design, and that is flatly impossible.

One of the hardest things for designers who straddle the two media to do is to relinquish control.

-- Mark Boulton

This is very true. If you learned how to create designs in a medium where once it's sent to print, you can't change it, it can be very difficult to wrap your head around the fact that Web pages will look different in every browser, monitor, and computer that views them. There is no feasible way to test for every possible browser, monitor, computer, and OS combination available and accessing the Web. Trying to do so will just result in frustration and insanity.

But Don't Throw the Baby Out with the Bathwater!

There should be moderation on both sides of the coin. Just because you can't control every aspect of a Web design doesn't mean that you shouldn't strive to control any aspects of it. And just because the Web isn't print doesn't mean you shouldn't use print design techniques where appropriate.

It's difficult to be a Web designer - whether you're trained in print design initially or Web design from the get-go. Web browsers are very hostile places for design. Even if you get a design pixel-perfect on your machine, the likelihood is that your neighbor in the next cube over will see differences in the design.

Where Web Designers Go Wrong

Web designers sometimes hide behind the technology. Using the facts of the media as an excuse for poor execution of your Web designs is a bad idea. It's important to base your designs on sound design principles that have been evaluated and refined for hundreds of years in the print world. Web pages have the same elements of design as print, and so the same problems can occur.

It's much easier to create a bad design than a good one. And learning from those who came before is a great way to avoid their mistakes.

Where Print Designers Go Wrong

Print designers tend to want their designs to remain static - like they would if they were sent to the printer. Spending hours, days, or weeks trying to get the pixels to line up exactly the same on Opera for Windows and Safari for Macintosh is a recipe for heartache and wasted time. It's important to create designs that degrade gracefully and handle less common situations well.

This quote from "Figgy" in the comments of Mark Boulton's article sums up exactly where print designers go wrong:

What a designer designs in Photoshop and presents to the client on paper should be exactly what the client sees on the screen after you complete the front-end coding.

Figgy then goes on to imply that it's just a simple matter of knowing HTML and CSS. But that's just it. Photoshop is a print designer tool, it creates designs that will remain the same no matter what. The only way to take a photoshop designed page and have it be "exactly what the client sees on the screen" afterwards is to save it as an image and load that as the Web page. And even then, there are browsers in use today that would still display the image differently or incorrectly. (Have you ever tried viewing these types of pages on a Web-ready cell phone?)

What print designers should strive for is to make the pages look good, and as close to the design spec as possible. While understanding that it's impossible to get it identical to a Photoshop design spec in every situation.

Good Designers Consider the Audience

Another quote from Mark, this time in the comments below the article:

Good graphic designers consider the brief and try to solve the problem regardless of the delivery medium.

I would extend this to all designers. If you're a good designer, you're going to consider the audience and what the goals are for the project. As a Web designer, you have to think about:

  • layout, navigation, and flow
  • interaction design
  • content, both images and text
  • scrolling and linking
  • user agents and operating systems of the customers

Good Web designers think of all those things and more when they are working on a design. As a designer you need to decide how much time is reasonable to spend making a design identical on various platforms. But you should never sacrifice design principles in working to get your design identical to the print mockup.

Printouts Have Their Place in Web Design Mockups

I feel strongly about printouts when working with customers because I've found that the printout feels more "real" to many people. In other words, I've had clients complain about things like the colors not matching from the printout to the screen. I do agree that giving clients printouts to write on and evaluate ideas is a good idea, but you need to be very clear in your presentation about the differences they can expect.

©2014 About.com. All rights reserved.