Print Design vs Web Design

Multimedia Design

• Understand difference principles applied between print and web design

• Apply basic principles in web design

Instructional Goals

They are certain similarities between print and web design, but they are not same. Web design has its own set of challenge and design parameters.

ResolutionResolution 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).

All web graphics should be no larger than 72 ppi. Anything higher has no improved effect, and only creates longer download times.

Graphics

GIF (Graphics Interchange Format)

GIF's 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).

Use GIF "les for images that have a small number of colors. GIF "les are always reduced to no more than 256 unique colors. The compression algorithm for GIF "les is less complex than for JPEG "les, but when used on #at color images and text it produces very small "le sizes.

GIF format is not suitable for photographic images or images with gradient colors. Because the GIF format has a limited number of colors, gradients and photographs will end up with banding and pixelation when saved as a GIF "le.

JPEG (Joint Photographers Experts Group)

JPEG is superior in rendering color and detail found in photographs or graphics using blends, gradients, and other tonal variations.

It uses a complex compression algorithm that allows you to create smaller graphics by losing some of the quality of the image. This is called a "lossy" compression because some of the image information is lost when the image is compressed.

The JPEG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges. This is because when the image is compressed the text, color, or lines may blur resulting in an image that is not as sharp as it would be saved in another format.

PNG (Portable Network Graphic) Images

PNG graphics have a better compression rate than GIF images which result in smaller images than the same "le saved as a GIF. PNG "les offer alpha transparency as well as animation.

PNG images, like GIFs, are not well suited to photographs. The other problem with PNG is that its special features are not well supported by Internet Explorer.

Choosing the right "le format is not only important for the quality, but for keeping your image's "le size to a minimum.

Fonts

For your audience to view the same font (an 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.

Be more conservative with the choice of font. Use only what general public already has on their computer.

Use standard fonts like Helvetica or Arial, Times or Verdana. If you absolutely MUST have everybody see your creative font, then convert the selected text into a graphic.

Typography

The harsh reality of web design is that you simply don't have the kind of control over how your text appears. The choice of font, the exact size of the text, where the text breaks, and how the text reads - all are aspects of typography.

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.

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.

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.

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. You can't assume the viewer has seen previous pages or will proceed to subsequent pages on your web site.

Color

Understand and use color effectively on the Web. Technically, you can produce millions of colors 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.

Too much color on a web page can be distracting and counterproductive, use color 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 color - a perfect opportunity to showcase your promotional message.

Computer Monitors

A web site that looks clean on a monitor with millions of colors could look dithered and jagged on a monitor with only 256 colors. Colors 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, "rst 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.

Page Composition

In Print design, page layout are static designs. Web pages are more #uid, more dynamic, and the reader has more control over how they view pages.

Web page layout can be done in two different ways:

• Fixed Width LayoutsThese are layouts where the width of the entire page is set with a speci"c numerical value.

• Liquid LayoutsThese are layouts where the width of the entire page is #exible depending upon how wide the viewer's browser is.

Fixed Width Layouts Versus Liquid Layouts

Fixed layouts are layouts that start with a speci!c size, determined by the Web designer. They remain that width, regardless of the size of the browser window viewing the page. Fixed width layouts allow a designer more direct control over how the page will look in most situations.

Fixed Layouts

Bene"ts of Fixed Width Layouts

• A "xed width layout allows the designer to build pages that will look identical no matter who is looking at them.

• Fixed width elements such as images will not overpower text on smaller monitors, because the width of the entire page will include those elements.

• Scan length will not be impacted on large segments of text, no matter how wide the Web browser is.

Drawbacks to Fixed Width Layouts

• Fixed width layouts can cause horizontal scrolling in smaller browser windows. And most people don't like to scroll horizontally.

• They can also result in large expanses of whitespace in larger monitors, resulting in a lot of unused space and more scrolling vertically than might otherwise be necessary.

• Fixed width layouts don't handle customer changes to font sizes very well. For small increases in the font size, they can be okay, but for larger increases, the layout can become compromised.

Liquid layout based on percentages of the current browser window's size. They #ex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution. They are often preferred by designers who have a lot of information to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.

Liquid Layouts

Bene"ts of Liquid Layouts

• A liquid width layout expands and contracts to "ll the available space. • All available real estate is used, allowing the designer to display more content

on larger monitors, but still remain viable on smaller displays. • Liquid layouts provide consistency in relative widths, allowing a page to

respond more dynamically to customer-imposed restrictions like larger font sizes.

Drawbacks to Liquid Layouts

• Liquid layouts allow for very little precise control over the width of the various elements of the page.

• They can result in columns of text that are either too wide to comfortably scan, or on smaller browsers too small for the words to show up clearly.

• Liquid layouts can have problems when a "xed width element, such as an image, is placed inside a liquid column. If the column is rendered without enough space for the image, some browsers will increase the column width, disregarding the designer's instructions, while other browsers will cause overlaps in text and images to achieve the correct percentages.

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.

Reference:http://webdesign.about.com/od/graphics/a/aa100906.htm