Web Design Tips and Tricks

Print Design vs Web Design - Part 1

Get Web Design Tips and Tricks on mps-web-design.com. Print Design vs Web Design - Part 1 topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

Despite the lucrative business opportunities on the web, many web site design companies create web sites that receive such low sales that do not even cover online costs. The problem here though is not the web, but an inability of inexperienced graphic and web site designers to distinguish web site design and promotion from everything that's come before it.

When some people turn on their computer, they actually think they're seeing a printed page on their screen. They then assign print strategies to a web layout. But many of the rules of print simply don't apply to the web, so the end result is usually a mess, and the original promotional message of the business lost.

To avoid these same pitfalls so many businesses have faced, this 'Print Design vs. Web Page Design' guide will help you identify some common problems involved in the creation of a web page and how to keep the focus on promoting your online business effectively:

Resolution, GIFs & JPEGs, Fonts, Typography, Plug ins, Navigation, Colours, Computer monitors, Conclusion

Resolution

Resolution is the image quality measured in terms of how many pixels make up your image. It is commonly referred to as 'ppi' (pixels per inch). Because your images are to be viewed on a screen, all web graphics should be no larger than 72 ppi. Anything higher has no improved effect, and only creates longer download times

GIF's and JPEG's

GIF is short for Graphics Interchange Format. GIF's advantages are that it is supported by practically all web browsers, can include transparent backgrounds, supports interlacing (providing a low-resolution preview of the graphic to the viewer while it downloads), and can be used as an image map (allowing the viewer to click on the graphic as they would a regular link to another site).

JPEG is short for Joint Photographers Experts Group. JPEG is superior in rendering color and detail found in photographs or graphics using blends, gradients, and other tonal variations.

Sometimes it's obvious that a graphic on someone's web page was saved in the wrong file format. Photos may look too grainy, or flat-colour images may look too fuzzy. When selecting GIF or JPEG for your graphics conversion, it is important to consider the type of image you will be working with. Use a GIF format if your graphic consists primarily of line art or flat colors without gradients. JPEG-converted graphics are best for photographs or images with fine tonal variations in colors, such as images with gradients or metallic images. Choosing the right file format is not only important for the quality, but for keeping your image's file size to a minimum.

Fonts

For your audience to view the same font (a unique set of type characters) you see on your own screen, they must also have the same font installed on their own individual computers. Otherwise, their browser will instead show a substitute font, which designers have no control over.

For this reason, be more conservative with your choice of fonts. Display only what the general public already has on their computers. If you're looking for a contemporary look, use standard fonts like Helvetica or Arial. If you're looking for a more sophisticated look, use fonts like Times or Verdana. If you absolutely MUST have everybody see your creative font, then convert the selected text into a graphic. Use this option sparingly, though, since it will increase your web pages' download time.

Typography

The harsh reality of web design is that you simply don't have the kind of control over how your text appears. It is far less sophisticated than what is possible in print media. The choice of font, the exact size of the text, where the text breaks, and how the text reads - all are aspects of typography. And on a web page, they are mostly determined by the web browser, not by the creator or owner of a web site.

At a screen resolution of only 72 dpi, text is nowhere near as sharp on screen as it is on a print publication. For this reason, be very careful not to overload your readers with too much text and allow for some open white space.

Plug-Ins

There are several mistakes designers can make when it comes to adding plug-ins (a software extension that provides added capabilities to the browser) to their site. They may:

1. fail to include a warning to the visitor in advance that a plug-in is needed to view the site and where they can download it, or

2. create a link to the plug-in creator's web page but the visitor is no longer at the original company's web site.

Some solutions to keeping your visitors' attention: code the link to the plug-in so that when it is clicked a new browser window will appear, rather than losing your web page. Better yet, try to obtain direct access to the plug-ins FTP site so that people will only see your web site while the plug-in downloads.

Navigation

The web is a much more interactive experience than a print publication. The viewer controls the sequence of web pages and jumps from page to page using links. As a result, the web designer must organize the content on the web pages very differently from the way one might organize them from a brochure, newsletter, or book. Remember, your web site is not a document your audience can physically hold. You can't assume the viewer has seen previous pages or will proceed to subsequent pages on your web site. Each page must be able to stand on its own. Your audience always needs to be reminded where they are and how to get to anywhere else on your site.

Colours

The advantage of colour on the web is that it's cheap. Technically, you can produce millions of colours on your screen, provided your monitor and video display are a decent quality. The disadvantage is that there are actually only 216 web-safe colors - meaning that these are the only colors that appear the same on all monitors and operating systems without dithering, be they PCs or Macs.

It is important to understand that colours from a print piece cannot be effortlessly transferred to a computer screen. Many print variables - paper thickness, texture, colour, absorbency; inks - are not available for a computer monitor - a convex glass surface producing a screen flicker to project the image you see.

Also, too much colour on a web page can be distracting and counterproductive. The most successful strategy is to use colour sparingly. Adding too many colorful items can create the visual equivalent of noise. Instead, leave room for white space. This will help your visitors focus on the items that are highlighted in colour - a perfect opportunity to showcase your promotional message.

Computer Monitors

A web site that looks clean on a monitor with millions of colours could look dithered and jagged on a monitor with only 256 colors. Colours that appear bright and sharp on your screen may appear dark and dull on another's. A web page that appears well suited for a 17' or larger screen will appear cut-off on a smaller one. Even the operating system can affect your monitor display. Macintosh computers, for instance, have a higher gamma display, and web pages show up brighter on them than on Wintel PCs.

Before making any design revisions, first view your web page on several computers. If you only have one computer, go somewhere off-site and view it. See how the web site reads under poor lighting as well. All of these factors can be observed before reaching an acceptable medium.

Conclusion

A successful web site requires not only individuals who are skilled in their own particular fields, but a cohesive team effort where everyone performs their work with the other partners in mind. For the client, it means trusting in your designer's experience and an understanding of what are the realistic possibilities and limits of the web page. For the designer, it requires switching from the mentality of 'look what I can do,' to 'look what I can do for your business'

More Articles: