The document provides guidance on key differences between print and web design, including resolution, file formats, fonts, typography, navigation, color, monitors, layouts, and use of plugins. Some key points are: 1) Web graphics should be no larger than 72 ppi to avoid longer download times. GIFs support transparency while JPEGs are better for photos. PNGs have good compression but limited browser support. 2) Web fonts must be common or text converted to graphics. Navigation must accommodate nonlinear viewing. 3) Layouts can be fixed width for control or liquid for efficiency, with tradeoffs between the approaches. Careful testing across devices is important.

1. Print Design vs
Web Design
Multimedia Design

2. Instructional Goals
• Understand difference principles
applied between print and web
design
• Apply basic principles in web design

3. 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.
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).
All web graphics should be no larger than 72 ppi. Anything higher has
no improved effect, and only creates longer download times.

4. 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 files for images that have a small number of colors. GIF files are always reduced to
no more than 256 unique colors. The compression algorithm for GIF files is less complex than
for JPEG files, but when used on flat color images and text it produces very small file 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 file.

5. 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.

6. PNG (Portable Network Graphic) Images
PNG graphics have a better compression rate than GIF images which result in smaller
images than the same file saved as a GIF. PNG files 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 file format is not only important for the quality, but for keeping your
image's file size to a minimum.

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

8. 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.

9. 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.
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.
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.

10. 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.

11. 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, 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.

12. Page Composition
In Print design, page layout are static designs. Web pages are more fluid, more
dynamic, and the reader has more control over how they view pages.
Fixed Width Layouts Versus Liquid Layouts
Web page layout can be done in two different ways:
• Fixed Width Layouts
These are layouts where the width of the entire page is set with a specific
numerical value.
• Liquid Layouts
These are layouts where the width of the entire page is flexible depending upon
how wide the viewer's browser is.

13. Fixed Layouts
Fixed layouts are layouts that start with a specific 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.
Benefits of Fixed Width Layouts
• A fixed 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.

14. 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.

15. Liquid Layouts
Liquid layout based on percentages of the current browser window's size.
They flex 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.
Benefits of Liquid Layouts
• A liquid width layout expands and contracts to fill 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.

16. 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 fixed 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.

17. 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.

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