MyPrintResource.com Online Exclusive

Overcoming Obstacles: Learning to Design for the Web

As printing has evolved from manually creating color separations to digital artwork sent direct to print, the same tools you use to create and edit these files are the ones you use to repurpose this artwork for use on the web. There are obvious differences in print vs. web design, however, learning how to design for the web is relatively simple in comparison to the learning curve for print design.

Difference #1: Text and Image Resolution

Regardless of what platform you are designing for, when it comes to the original graphic, bigger is better. You can always reduce the resolution of a graphic for use on the web, however, you cannot increase the size without losing quality. If you are repurposing your print files for use on the web, it is recommended that you reduce the file and image size so the file will load quickly with the proper dimensions for the page. If you are fluent in Photoshop, you can use the image size option to reduce the image dimensions and resolution. For non-graphic artists there is a slew of free web based tools available to assist you in resizing your graphics.

Difference #2: Static vs. Dynamic

Proofing an item meticulously for print is essential. Once a piece is printed, making changes to text or graphics is costly and time consuming. However, with the web, revisions to a published site can be made quickly and easily, often by the business owner herself. What this means for design is a more fluid layout on the web. Restrictions imposed by the size of the printed piece are not there on website designs. This difference allows the company’s website to serve as a great educational tool, however, it can be a challenge to lay the page out in an aesthetically pleasing way when there are no real height or width restrictions.  Creating graphic divisions of text, sectional call outs and graphic based calls-to-action will all help break up a long page and make it more readable for the end user.

Understanding what may fall “below the fold” is as important in web design as it is in print.  A site may have a beautifully designed graphic header that takes up the majority of the page, however, if there are no calls to action or obvious signs that there is text below the graphic, the user may miss the content that is on the page.

Difference #3: Interactivity

In both print and web design, you are typically trying to get the reader to take action. On the web, you have a few more opportunities to grab their attention. Bits of animation, video, interactive quizzes and forms and downloads all offer additional opportunity to entice the user to stay on the page a little longer. Building these opportunities into the website’s design can make the difference between a site that performs and converts and a site that doesn’t.

Difference #4: Font Usage and Availability

A font that looks great in print may be much harder to read on-screen and not all fonts can be used for text in a web design. Browser defaults and preferences can override website font selections and not all users have the same set of fonts installed on their computers. So while you may see a selected font on your website, others may see something completely different based on preferences and fonts installed.  One way around this is to create a graphic using the non-standard font, however, that is both time consuming and more challenging to edit later on. Using a web-safe font (fonts like Verdana, Times New Roman, Tahoma, Arial and Trebuchet) or installing a font from a 3rd party, like Google Fonts, can help ensure that the site fonts look the way you want them to look regardless of preferences or system fonts.

While this isn’t a comprehensive list of the differences, it is a good starting point for graphic artists who want to learn how to design for the web. There can be a lot of carryover from a printed piece to a website design. Oftentimes a printed piece is the inspiration for the look and feel of the website.  Creatively slicing and editing a print design can provide a solid foundation for the website to be built off of. Keeping the goals of the website owner and ease of use for the customer in mind when creating the site will guarantee your web design is a success. And the good news is that if it isn’t an immediate success, you can always fine tune it without the expense of a reprint.

I’d love to hear from you. What has your biggest challenge been in trying to learn how to design for the web? Leave a comment below.

Loading