On October 23rd, 2014, we updated our
By continuing to use LinkedIn’s SlideShare service, you agree to the revised terms, so please take a few minutes to review them.
Instructional Goals• Understand diﬀerence principles applied between print and web design• Apply basic principles in web design
They are certain similarities between print and web design, but theyare not same. Web design has its own set of challenge and designparameters.ResolutionResolution is the image quality measured in terms of how many pixelsmake 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 hasno improved eﬀect, and only creates longer download times.
GraphicsGIF (Graphics Interchange Format)GIFs can include transparent backgrounds, supports interlacing (providing a low-resolutionpreview 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 tono more than 256 unique colors. The compression algorithm for GIF files is less complex thanfor 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. Becausethe GIF format has a limited number of colors, gradients and photographs will end up withbanding and pixelation when saved as a GIF file.
JPEG (Joint Photographers Experts Group)JPEG is superior in rendering color and detail found in photographs or graphics usingblends, gradients, and other tonal variations.It uses a complex compression algorithm that allows you to create smaller graphicsby losing some of the quality of the image. This is called a "lossy" compressionbecause 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 simpleshapes 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 inanother format.
PNG (Portable Network Graphic) ImagesPNG graphics have a better compression rate than GIF images which result in smallerimages than the same file saved as a GIF. PNG files oﬀer alpha transparency as well asanimation.PNG images, like GIFs, are not well suited to photographs. The other problem with PNGis 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 yourimages file size to a minimum.
FontsFor 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 ontheir own individual computers. Otherwise, their browser will instead show asubstitute font.Be more conservative with the choice of font. Use only what general publicalready 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 theselected text into a graphic.
TypographyThe harsh reality of web design is that you simply dont have the kind ofcontrol over how your text appears. The choice of font, the exact size of thetext, where the text breaks, and how the text reads - all are aspects oftypography.At a screen resolution of only 72 dpi, text is nowhere near as sharp on screenas it is on a print publication. For this reason, be very careful not to overloadyour readers with too much text and allow for some open white space.
NavigationThe web is a much more interactive experience than a print publication.The viewer controls the sequence of web pages and jumps from page to pageusing links.Web designer must organize the content on the web pages very diﬀerentlyfrom the way one might organize them from a brochure, newsletter, or book.You cant assume the viewer has seen previous pages or will proceed tosubsequent pages on your web site.Each page must be able to stand on its own. Your audience alwaysneeds to be reminded where they are and how to get to anywhere elseon your site.
ColorUnderstand and use color eﬀectively on the Web. Technically, you can producemillions of colors on your screen, provided your monitor and video display area 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 monitorsand operating systems without dithering, be they PCs or Macs.Too much color on a web page can be distracting and counterproductive, usecolor sparingly. Adding too many colorful items can create the visual equivalentof noise. Instead, leave room for white space. This will help your visitors focuson the items that are highlighted in color - a perfect opportunity to showcaseyour promotional message.
Computer MonitorsA web site that looks clean on a monitor with millions of colors could lookdithered and jagged on a monitor with only 256 colors. Colors that appearbright and sharp on your screen may appear dark and dull on anothers. A webpage that appears well suited for a 17" or larger screen will appear cut-oﬀ on asmaller one. Even the operating system can aﬀect your monitor display.Macintosh computers, for instance, have a higher gamma display, and webpages show up brighter on them than on Wintel PCs.Before making any design revisions, first view your web page on severalcomputers. If you only have one computer, go somewhere oﬀ-site and view it.See how the web site reads under poor lighting as well. All of these factors canbe observed before reaching an acceptable medium.
Page CompositionIn Print design, page layout are static designs. Web pages are more fluid, moredynamic, 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 diﬀerent 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 viewers browser is.
Fixed LayoutsFixed 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 inmost 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.
Drawbacks to Fixed Width Layouts • Fixed width layouts can cause horizontal scrolling in smaller browser windows. And most people dont 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 dont 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 LayoutsLiquid layout based on percentages of the current browser windows size.They flex with the size of the window, even if the current viewer changes their browsersize as theyre viewing the site. Liquid width layouts allow a very eﬃcient use of thespace provided by any given Web browser window or screen resolution. They are oftenpreferred by designers who have a lot of information to get across in as little space aspossible, as they remain consistent in size and relative page weights regardless of whois 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.
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 designers instructions, while other browsers will cause overlaps in text and images to achieve the correct percentages.
Plug-insThere are several mistakes designers can make when it comes to adding plug-ins(a software extension that provides added capabilities to the browser) to theirsite. 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 creators web page but the visitor is no longer at the original companys web site.Some solutions to keeping your visitors attention: code the link to the plug-inso that when it is clicked a new browser window will appear, rather than losingyour web page. Better yet, try to obtain direct access to the plug-ins FTP siteso that people will only see your web site while the plug-in downloads.