Web Design Vs Print Design (There IS a BIG Difference)

It happens often. A graphic designer decides to expand their skillset and delves into web design. This is typically a good move. Anything that can make you more valuable as a designer is realistically a bonus. The problem however comes when the designer doesn’t have the necessary background or experience when dealing with web design and web development. Print is great because you can pretty much design as you want. You have a blank canvas and can place type, crop images, do sweet cut-outs and “photoshop magickery” as you please with little or no consequence to the overall project.
Letterpress Blocks
This is not the case for web.

When you design for a website one of the first things to tackle is the background. This is probably one of the easiest pieces to overlook because as a professional print designer your canvas is your border. You can bleed over it and it won’t matter because the visual ends at the edge of the physical page. When you design for web however, those elements that are left cropped or hanging off the page have to go somewhere. Since you typically do not know how large a viewers screen size is it is difficult to accommodate everyone so they all see the same thing. Some folks still use the 800×600 browser size while others go full screen on 30 inch monitors. If you have a web graphic that ends or is abruptly cut off at the 1600 pixel mark then you may get the “unfinished site” look when you expand past 1600 pixels. What you are left with is a 1600 pixel wide website with large colored bars and cut off images on either side that just don’t promote that professional look you were originally going for.

Another issue that plagues would-be-web-designers is the use of shadows and gradients. Now it is true that CSS3 and HTML5 have resources built in to show these effects but that doesn’t mean that you should use them for EVERY LITTLE GRAPHIC. Print designers must understand that the photoshop drop shadow isn’t necessarily going to look as good on web so it sometimes benefits them to avoid it if possible. If you want to add a little shadow to the page outline to show some depth, fine, but if you intend on putting a drop shadow on a drop-down navigation along with a gradient in the buttons, gradients in the background and shadows on all text, you are just making the job harder for the end developer.

Mario Then and NowResolution should obviously play a part in designing for web but sometimes gets pushed aside. Regardless of how big your screen is and regardless of how some devices may claim to be ultra high resolution, your screen is only (always) 72 dpi. Having your graphics at 72 dpi helps the load time of the page. The larger the images, the longer it takes to load the page. If you’re a print designer you know that nothing looks good that small and that anything with finer detail will virtually disappear. This includes backgrounds and graphic textures. Ideally you want to start with a canvas that is higher than 72 dpi and then “save for web” or manually “res-down” the images.

Finally, it is important to realize that different browsers will undoubtedly display your website differently from one another. A site viewed in Firefox is going to appear slightly different from one viewed on Internet Explorer. Sometimes the differences go beyond the visual interface and items in the CSS need to be changed on specific style sheets for those browsers. That being said, someone who is designing a layout for a website must take this into consideration. As we stated above, CSS3 and HTML5 have certain “effects” built in however they are not all fully supported yet by the majority of browsers. This may make those effects not show up and cause the consistency of your site to be lacking across multiple browsers.

At the end of the day we as designers all are able to “put pen to paper” but often times are called for us to expand our tool box and learn a few things to make our jobs, and the jobs of others, easier. If you decide to make the leap from print design to web design be sure to remember that your canvas is infinitely larger than the screen your working on, always res down (not up), and not all browsers are created equally!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.