Week 06

Topics: Midterm Project assignment, Design Comps/Mock-ups, Wireframes, Prototyping, Prototyping Tools, Web Graphic Formats, Dreamweaver Intro.
Studio Experiment: Using HTML as prototyping tool. HTML & CSS exercise
Project: Choose client for your midterm project and be prepared to discuss next week. Update process blog and make sure you have added your most recent navigation project. Watch the videos below and come to class next week with any questions you have about web graphic formats, slicing, and the Dreamweaver interface.

Reading for For Next Week
Stylin’ with CSS: Chapter 5: “Basic Page Layout” (pg.134-173)
Watch the following video chapters from “Photoshop CS4 for the Web with: Jan Kabili” on lynda.com.
Chapter 4. Optimizing Images for the Web

  • Touring the Save for Web interface
  • Optimizing photos as JPEGs
  • Optimizing graphics as GIFs
  • Optimizing graphics as PNGs

Chapter 10. Slicing

  • Why slice?
  • Creating user slices
  • Creating layer-based slices
  • Adding slice options
  • Optimizing and saving slices

Watch the following video chapters in their entirety from “Dreamweaver CS4 Essential Training” on lynda.com.
Chapter 2. The Dreamweaver Interface
The Welcome screen
Windows and Mac interface differences
The Application toolbar
The Document toolbar
Arranging panels
Managing workspaces
The Properties Inspector

Chapter 6. CSS Foundations
Chapter 8. Working with Images

Midterm Project

Specifications: Design a prototype website home page and first-level page for a client** of your choice. Create a sitemap for the complete website and be prepared to present the sitemap for your presentation. Focus on implementing the thought process we studied in class and creating an interesting navigational interface that allows the user to navigate the site in multiple ways . Use HTML and an external CSS file to build the prototype for your home page and first-level page of your site. Post your thoughts and decision-making process for this project on your WP blog.

Deliverables:

  1. Sitemap for entire site
  2. Home page
  3. First-level page for one of the sections. (Commonly referred to as the “landing page.”)

** Note: For next week, please be prepared to discuss the client you have selected for your midterm project. You will need my final approval to proceed with your chosen client. Please pick a client that will allow you to explore ways to effectively design useful delivery of content for  both an online and mobile environment.

Design Process
Sitemaps

Sitemap example

Wireframes

“Wireframes, also referred to as content layouts or page schematics, are non-design oriented sketches (don’t worry about colors or button shaped, this is all about information) of unique pages showing rough navigation, copy layout, graphic allocation, key headers and any other elements that need to appear on a page. Wireframes show a certain hierarchy of information but do not dictate exactly how something should be represented.”

“Wireframes should rough out the form of the product. Form is shaped by three factors: the content, the functionality, (“form folloes function”), and the means of accessing or navigation to those two things, Thus the wireframe needs to include placeholders for the content and functionality as well as the elements for navigating them (buttons, switches, menus, keystrokes and so on).”

Wireframe examples:
Example 1
Example 2

Template: to use when you create wireframes for your Midterm Project
Wireframe template in Illustrator

Design Comps/Mock-ups

We have already used Photoshop and Illustrator to create the design comps or mockups for our weekly projects in this class. Normally the Design Comp or Mock-up is created after the sitemap has been developed and finalized and the Wireframes have been created. As the designer, you may need to base a design on the the information contained in a series of final wireframes for a project.

Prototyping
Most Common Prototyping Methods 1

Todd Warfel ran a survey investigating a number of things related to prototyping. One of these was a question of the type of prototypes people are often creating.

In order of most common to least common, here they are:

  • Paper — 81%
  • Hand coded html — 58%
  • Auto generated (e.g. Axure, iRise, Visio, Fireworks or similar) — 39%
  • Clickable Screenshots (using HTML) — 34%
  • Interactive Flash, Flex, AIR, Blend, or similar — 27%
  • Keynote or PowerPoint — 24%
  • Clickable PDFs — 21%
  • Production Environment (e.g. Rails, PHP, .Net, Java, Xcode, C) — 9%
  • 3D Models (e.g. Cardboard, Foam Core, Circuit-boards) — 1.2%

Participants were allowed to select any and all methods they used. Close to 200 participants responded, representing a mix of researchers, designers, developers, product managers, and business analysts.

1 http://toddwarfel.com/archives/most-common-prototyping-methods/

HTML for Prototyping
HTML Cheat Sheet

http://lesliefranke.com/files/reference/htmlcheatsheet.html

CSS Cheat Sheets

http://lesliefranke.com/files/reference/csscheatsheet.html
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

Web Graphic Formats

Okay, now let’s talk about how to prepare images for the web. But before we get started below is some information about downloading files from this site. You will need to download a zip file to complete the exercise at the end of the class notes so please be sure you know how to download a file from this site.

Okay, now before we get started let’s first talk a little about web-safe colors versus non web-safe colors.

Web-safe colors

Are they necessary? There is a standard set of 216 colors that are known as the “web safe” colors. Long ago, web designers used only colors in web safe palette. The reason for this is that many older computers could only display a total of 256 different colors, and there were only 216 common colors between the Mac and the PC. Using colors other than those in the web safe palette would cause those colors to be displayed with dithering. (i.e. a few of the 216 colors are mixed to create a substitute for the actual color.)

But these days, less than 1% of web users use computers that only display 256 colors–either because they have very old computers that “compresses” the images down to the web safe colors. These users can still view web pages, but non web-safe colors will look dithered.

Given that so few users have this problem, and what they see still works, there is simply no reason to worry about the web-safe colors anymore. You are free to use of the millions of colors available to you. (But this is my opinion, and others disagree).

To see a chart of all the web safe colors, see this page on the WebMonkey site

For more information about the percentage of users viewing the with with 256 colors, see Browser News

Basic image types
RGB images

RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used for your master Photoshop files.

RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).

Bit depth = The number of different colors available for each pixel

  • 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
  • 24bit = 16,777,216 colors
  • 16bit = 65,536 colors
Indexed images

Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).

Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image’s palette.

index palette

Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

  • 8bit = 256 colors
  • 6bit = 64 colors
  • 4bit = 16 colors
  • 2bit = 4 colors
  • 1bit = 2 colors

Dithering

Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.

no dither dithered
Non-dithered image (2382 bytes) Dithered image (3598 bytes)

These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

Web image types

GIF format

A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

  • Best for – Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
  • Transparency – Defines one color to be transparent
  • Animations – Format supports multi-frame animations
  • Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.
JPEG format

A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

  • Best for – Photographic images, complex images, images with soft edges
  • No transparency or animation
  • Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.
PNG format

A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.

About the PNG‑8 format

The PNG‑8 format uses 8‑bit color. Like the GIF format, PNG‑8 efficiently compresses areas of solid color while preserving sharp detail like those in line art, logos, or type.

Because PNG‑8 is not supported by all browsers, you may want to avoid this format when you are distributing the image to a wide audience.

The PNG‑8 format uses more advanced compression schemes than GIF does, and a PNG‑8 file can be 10% to 30% smaller than a GIF file of the same image, depending on the image’s color patterns. Although PNG‑8 compression is lossless, optimizing an original 24‑bit image as an 8‑bit PNG file can subtract colors from the image.
Note: With certain images, especially those with simple patterns and few colors, GIF compression can create a smaller file than PNG‑8 compression. View optimized images in GIF and PNG‑8 format to compare file size.
As with the GIF format, you can choose the number of colors in an image and control how colors dither in a browser. The PNG‑8 format supports background transparency and background matting, by which you blend the edges of the image with a web page background color.


PNG‑8 with 256 colors and no dither (left), and PNG‑8 with 16 colors and dithering (right)

About the PNG‑24 formatThe PNG‑24 format supports 24‑bit color. Like the JPEG format, PNG‑24 preserves the subtle variations in brightness and hue found in photographs. Like the GIF and PNG‑8 formats, PNG‑24 preserves sharp details like those in line art, logos, or type.

The PNG‑24 format uses the same lossless compression method as the PNG‑8 format. For that reason, PNG‑24 files are usually larger than JPEG files of the same image. You may want to avoid PNG‑24 format when you are distributing your image to a wide audience.

In addition to supporting background transparency and background matting, the PNG‑24 format supports multilevel transparency. You can have up to 256 degrees of transparency from opaque to completely transparent, so you can blend the edges of an image smoothly with any background color. However, not all browsers support multilevel transparency.

More information about the PNG format can be found here.

Making images

Download and extract compression_test_accd.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs

To make a GIF, do the following to an RGB image in Photoshop:

  • web settings - gifShow and hide any layers to get the image you need
  • Determine the color of the web page background that the image will be displayed against
  • Select FILE>SAVE FOR WEB…
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
  • Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
  • Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
    Perceptual – Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
    Selective – Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
    Adaptive – Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
    Web – Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
  • Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
  • Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
  • If you want the image to display while downloading,select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

  • Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
  • If you have created a mask for transparency, and want the background of the web page to show through the mask area, checkthe TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
  • Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.
JPEGs

To make a JPEG, do the following to an RGB image in Photoshop:

  • web settings - jpegShow and hide any layers to get the image you need
  • Select FILE>SAVE FOR WEB…
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
  • Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
  • Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
  • Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
  • If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

Dreamweaver introduction

Dreamweaver is an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application (e.g. GoLive or FrontPage).

Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop or other applications to create images, sounds, etc.

Creating a new web page in Dreamweaver
  • Select FILE>NEW
  • Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
  • Give the file a name. This name should be all lower case, and have no spaces between words.
  • SAVE the file
  • There are two windows to use when creating web pages:
    Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
    Code Inspector. This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).
Previewing in the browser

Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox). Alternatively, you can simply press the shift + F12 function key.

Dreamweaver Windows

Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

Page properties

Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:

  • Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
  • Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
  • Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
  • Page margins. There are settings which control the margin at the top and left of the page. Most designerslike to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).
The document toolbar

The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

document toolbar

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

  • Design View – where you see how the page will appear in a browser
  • Code and Design View – a split page view where you see the code at the top, and the design at the bottom
  • Code View – where you see only the code that describes the page

Web page weight

Recommended page weight: total size (html/images/flash) for a web page should be around 60-100K although we often visit web site like Amazon and Ebay where page size is often much larger.

Some typical download times under ideal conditions, which rarely happen:

Size of File 56Kbps Modem 256Kbps DSL 1500 Kbps Cable
20Kbyte 3.2 secs 0.6 secs < 1 sec
50Kbyte 8.0 secs 1.6 secs < 1 sec
100Kbyte 16.0 secs 3.1 secs 1 sec
1meg 160.0 secs 31.3 secs 6 sec

Note: s Nielsen/ NetRatings reported (Feb. 2006) that 32% of US home users have dial-up connections, and 68% have broadband.

CNET Bandwidth test

Checking page weight

You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.

Working with images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To steal an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

flowerflower.jpg flower.gif

Image: FreeDigitalPhotos.net

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
  • Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
  • Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
  • Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
  • Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the

lower right hand corner of the palette. Experiment with the following:

  • Change the height and width of the image
  • Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
  • Change the alignment so text wraps around the image
  • Set the alt attribute of an image
  • Make the image a link
  • Change the VSpace and Hspace to change the margin around an image when text if flowing around it


Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01