Review
The Pre-production Phase deals with planning the site, including making the various decisions that will lead to the design of the pages and the site. Part of that prepraration is desiging--the site, the pages, the content.
The second phase--Production--is where content, the pages, and the site is created and assembled as show by the activity list below.
Production Phase
The following are the stages and activities involved in the second phase of design and developing web projects.
- Creating the media / content
- Scripting / programming
- Assembling the pages
- Testing / checking the site
- Optimizing the site
- Finalizing usability
Stage / Activity |
Documents |
|
Creating the media / content |
All the documents previously created are referred to during this process |
|
Scripting / programming |
|
Assembling the pages |
|
Testing / checking the site |
|
Optimizing the site |
|
Finalizing usability |
Usability testing materials |
| |
|
Content Design
The two major aspects of designing the content deal with graphics and copy (written matter).
Watch Your Copy
Copy—that's what you read. And reading on the web is different than reading print. Resolution is an issue, interactivity is an issue (readers are used to clicking and jumping around), and the impatience of the user is an issue.
The core user experience is affected by the text and the headlines within your pages. Yes, it's important to have good grammar and correct spelling (always spell check—shift-F7 in Dreamweaver), but there are some issues different from preparing copy for print.
Guidelines
- Be succinct (web users don't like to scroll)
- Write for scannability. Use short paragraphs, subheadings, bulleted lists.
- Multiple pages for long passage. Use links (hypertext) to break up long information into multiple pages.
- Use plain language
- Put most important information first
- Create headlines that are accurate and short
- Make sure text is legible
Be Succinct
Big word for the concept of being short and to the point. People read 25% slower on the computer screen than they do from paper (according to research). So keep the text short. Don't use more than 50% of the words you would use for print.
Think Scannability—chunk your copy
Skimming instead of reading is a fact of the Web.
Chunking is dividing online material into small segments. Since screens are hard to read and have limited scope, "chunks" have to be small. Use fewer words to say what you need to say. Also creating logical chunks are more effective.
Subheadings, short explanations, bulleted lists are ways to make the copy easier to scan and read. Highlight and emphasize.
Structure articles with two or even three levels of headings.
Long explanations can be removed from the basic text and hyperlinks to additional pages.
No more than one thought or idea per paragraph. If you cover more than one topic in a paragraph it is likely it will not get read.
Use meaningful rather than "cute" headings.
Example below is taken from Jakob Nielsen's Designing Web Usability showing how much more readable (scannable) text can be if the text is kept concise, with a scannable layout, and objective language.
|
Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Par & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prarie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). |
In 1996, six of the most-visited places in Nebraska were:
- Fort Robinson State Park
- Scotts Bluff National Monument
- Arbor Lodge State Historical Park & Museum
- Carhenge
- Sthur Museum of the Prarie Pioneer
- Buffalo Bill Ranch State Historical Park
|
| |
The above structure of text was shown to be 124% better than the text on the left. |
Use Plain Language
Use simple words and simple sentence structure.
Limit your use of metaphors and humor that many may not understand. You may be taken literally and therefore be misunderstood.
Present the most important material first
Use the "inverted pyramid" form of writing. Most of the information is up front with fewer and fewer new ideas being presented as the text progresses.
Think micro when writing headlines
Headlines should be short and to the point—an ultra short abstract of the text.
Use plain language; don't be clever and avoid teasers. It is too painful to wait for a misleading headline link to load only to discover it doesn't not accurately relate to the text.
Make the first word important; avoid beginning headlines with the same word (cuts down on scannability).
Avoid illegibility
Make sure the type is readable by making sure it is legible. Here's how to do that:
- Use colors with high contrast between text and its background.
- Use plain colors or extremely subtle patterns/textures for the background.
- Avoid small type, especially for large amounts of text and important information.
- Left justified should be used for the majority of the text. Use centered and right justified rarely and then only on small amounts of text.
Graphic Sources
No matter what the original artwork is, for it to be posted on the web it must be in a pixelated format. Web images come from basically five sources
- Scans of existing photos or artwork
- Digital camera photography
- Stock photography and clipart (canned) from CDs or Web
- Computer-generated vector graphics
- Computer-generated bitmap graphics
Scanning
Scanners convert an analog image into a digital one. Whether you are using a flatbed (the most common), a transparency, or a drum scanner, you will basically be converting the original images into pixels (a digital image).
While bitmap images posted to the web are 72 ppi (pixels per inch), you should scan at 300 dpi (dots per inch) resolution at 100% the original size so that you have a lot of detail to work with.
This is usually done in Photoshop using a TWAIN interface or a scanner plugin accessible from the Import item on the File menu.
TWAIN is a popular program that scans an image directly into the application, such as Adobe Photoshop. The output format of the scanned image files depends on your image editing software.
Without TWAIN, you would have to close an application that was open, open a special application to receive the image, and then move the image to the application where you wanted to work with it. The TWAIN driver runs between an application and the scanner hardware.
TWAIN usually comes as part of the software package you get when you buy a scanner. It is also integrated into Photoshop and similar image manipulation programs.
You can import scanned images directly from any scanner that supports the TWAIN interface. If you cannot import the scan using the TWAIN interface, use the scanner manufacturer's software to scan your images saving the images as TIFF, PICT, or BMP files. Then open the files in your image editing software.
Digital Photography
Digital cameras contain a two-dimensional array of detectors that convert tone and color into digital values using one of two types of detectors:
- CCS—charge-coupled devices (higher quality)
- CMOS— complementary metal-oxide semiconductor chips (less expensive; much more prone to noise and distortion.
The size and quality of the detectors determines how much data can be collected and converted.
Digital cameras usually create the following image files:
- JPEG (Joint Photographic Expert Group) abbreviated JPG
- TIFF (Tagged Image File Format)
- PICT
- PCX
Stock Photography
Also referred to a image libraries, this is a good source of high quality image material if insufficient or no materials are available and the cost to create custom photos is too high.
Companies that publish image libraries hire professional photographers and artists to create photographs and illustrations. The images are published on CDs or are available, for a fee, online.
Stock photography offers the advantage of obtaining dozens of high quality images for a fraction of the cost it would take to hire a professional photographer or illustrator to produce a single custom image. The disadvantage is that you run the risk of using the same pictures as another designer who has purchased the same library.
The images are usually published at several resolutions or sizes to accommodate most publication requirements and are, for the most part, excellent quality. They are usually topic specific. You have a choice of several dozen photos of a particular theme like wild animals, household objects, or studio models. Archival images are also available in this form.
Check out the resources in the sidebar.
Computer-generated artwork
You are a staff artist can create your own artwork generated using two types of software applications:
- Vector (used to create high impact, sharp edged color graphics with smooth blends and intense colors, for logos, charts, graphs, maps, cartoons, and highly detailed technical and architectural plans and illustrations)
- Adobe Illustrator
- Macromedia Freehand
- Corel Draw
- Bitmap (used to define shapes to produce tonal and color variations, for editing, manipulating, and composing scanned photographs and images from digital cameras and photo CDs)
- Adobe Photoshop
- Macromedia Fireworks
- Corel Photo-Paint
The choice of software to use will largely depend on the type of illustration you want to produce and the overall look and feel of the site. Vector and bitmap graphics use different techniques to produce images and each type is best for different kinds of images.
Preparing Graphics for the Web
Once you have an image file, you will need to prepare it for the website.
The following steps are used to prepare images:
- Optimize the digital image file to improve its quality.
- Edit the image to change the composition or apply effects.
- Resize or crop the image file in order for it to fit in a certain space on a web page.
- Save the images in an appropriate image file format and compressed to reduce the file size.
Optimizing Images
Preparing photos and graphics for the Web requires different skills from those to prepare them for print. Photographs used on the web usually cannot be of the highest quality possible since their file sizes need to be considered.
Adjusting the overall quality of your photos—improving details, correcting colors, and removing flaws—is probably the most important step in image optimization.
The following tasks should be done to optimize the image [commands in Photoshop]:
- Straighten the picture (de-skew) [Image>Rotate Canvas>Arbitrary…]
- Remove noise, dust, and scratches [Filter>Noise] or [other photo retouching methods]
- Adjust tonal range (brightness/contrast) [Images>Adjustments>Brightness/Contrast]
- Adjust highlights and shadows (levels) [Images>Adjustments>Levels]
- Adjust focus [Filter>Sharpen>Unsharp Mask…]
Editing Images
Using filters and effects tends to be the fastest way to turn a snapshot into a personal artistic statement.
They require no real special instructions to use; whether you are a pro or a novice, the only way to use filters effectively is by trial and error.
Of course, some programs provide a broader variety of filters or more interesting sets of effects than other programs.
In addition to filters, you can get creative when editing images by creating compositions or using transparencies, drop shadows and colored backgrounds.
Manipulating Images
Three ways to change the look of the graphic without editing:
- Cropping,
- Rotating
- Resizing
Cropping—eliminates all unnecessary image areas—will not affect image quality.
Cropping an image properly is an art. On the one hand, you want to eliminate as much unnecessary image surface as possible to optimize the file size. And on the other hand, you want to preserve the essential elements of the image and maintain a strong, dynamic composition.
NOTE: it is more efficient to size the image in image editing software than to size it in HTML code or WYSIWYG editors.
If you make the visual size of the image smaller in the code or software, the browser will load an image of a greater file size than necessary, increasing the download time.
If you increase the image size, you are reducing its quality because you will not have the optimal resolution to display the image.
A better solution is to size the image to 100% of the size that you need or reduce it to the correct size in the image editing software.
Rotating—simply moves each pixel to a new location in a grid by rotating it around the central axis.
Rotating an image can help you bring the main aspect of the image into an area that might be easier to crop.
Resizing—the underlying calculations that the program makes to execute this operation can make a big difference in the quality of the final image.
Most often you will want to resize an image by a certain percentage. Instead of doing this by calculating pixels or inches, change the units to percent
Saving Images
The two most important aspects to consider when preparing web graphics are the quality of the image and its file size.
These two characteristics work in opposition to each other. A screen-sized, high-quality image may take a long time to download due to its excessive file size; conversely, a small image that downloads quickly on the browser may be visually compromised.
Resolution: The recommended resolution for web images is 72 ppi
Usually the image is scanned and edited at a higher resolution (150 dpi or higher) and at 100% of its original size. The higher the resolution and the bigger the image, the easier it is to edit and change image content.
After editing is finished, the resolution can be adjusted to 72 dpi, which will also shrink the image size to about half of the original size. You should account for this when creating the image. This setting will preserve the image quality and keep the file size relatively small.
File Format: Save two files in two formats.
- Once the resolution is adjusted, the file should be saved in the image editor's native format so that all layers remain intact and editable in case you need to modify or tweak the image later.
- The next step is to save the image in the best web format (see below).
Usually this means determining the appropriate file format:
- JPEG for photographs
- GIF for illustrations
You should test out which compression setting will achieve an acceptable file size while maintaining image quality.
Formats for the Web
JPEG (Joint Photographic Experts Group)
- lossy compression
- works best on continuous tone images (e.g. photos, gradients)
GIF (Graphic Interchange Format)
- lossy compression
- works best on graphics with few colors or large areas of the same color
PNG (Portable Network Graphics) (check out this reference)
- loseless compression (no loss of data, smudging or blurring)
- one of best compressions (up to 841:1)
- offers transparency like GIF, but also up to 254 levels of patrial transparency
Choosing a Format
- For photos and scans JPEG will almost always be more compact than 24 bit PNG format.
- For true color images containing text and sharp color transitions 24 bit PNG could turn out smaller, and will certainly provide the best quality. Ideal for maps, charts and diagrams with more than 256 colors.
- If the quality is acceptable, converting true color images to a 8 bit palette can often produce a smaller file. Dither the colors if necessary.
- For converting GIF images, use 8 bit PNG. With the right image tools only tiny GIF files remain smaller than a PNG equivalent ( see below ).
- Use single-color transparency if alpha-channel transparency is not really necessary. It works in Internet Explorer and the file size will most likely be smaller.
- There's a small overhead for PNG's versatility: the minimum file size is 67 bytes for an opaque single pixel. The box below contains a transparent single pixel PNG using white as the indexed transparent color ( 95 bytes ).
|
