Class 04

class 04 – assignment 2: tables assignment due, design process, rollovers, image map,  Quiz 2

Design process
Developing a methodology for designing web sites.

There is a definite process for designing web sites. The web design process is similar to print design but is different in some very distinct ways. Organizing and designing navigation is one of the most distinct differences between print and web design. As a designer you need to be conscious of the user experience and design with that in mind. Below I have outlined the design process for smaller, personal projects and then I detail a more professional approach called the “Core Process.” For those of you how are interested in working for a design studio or agency, it will be a benefit to understand this more complex process. Most larger firms use some variation of the Core Process as outlined by lynda.com and Kelly Goto.

It’s useful to develop your own standard methodology for designing web sites. This helps you be efficient, and able to produce consistently good work even when inspiration doesn’t come. There are many approaches to designing a web site. The following is one approach:

1. Project Research.
   The beginning of the design process is the research phase. In this phase, the designer immerses themselves in the project requirements, client needs, and the fields related to the web site.
   1. Define the client goals and requirements
   2. Define the audience
   3. Define the scope of the web site
   4. Compare and contrast existing web sites with similar characteristics
   5. Educate yourself about the field(s) related to the web site
   6. Define the attitude of the web site and organization/brand it represents
      Read : Client Survey
      Read : Communication Brief
2. Information Design.
   Before visual design can begin, it’s important to understand how the material on the site is going to be organized. This requires study and planning in the following ways:
   1. Define the most clear organization of content, featuring the most important categories and achieving the requirements defined in the research phase. Keep in mind the 7+-2 rule discussed previously.
   2. Consolidate similar sets of content under one category
   3. Don’t assume that the client’s current organization is the best one for the web
   4. Consider how the categories relate in terms of importance and quantity of content
   5. Create sub-categories if necessary, but keep the levels of hierarchy to a minimum
      
      
3. Design Research.
   Before you start the formal visual design, collect and develop a broad range of design elements to work with and gain inspiration from. The idea is to have more than enough material to experiment and sketch with.
   1. Collect magazines, web sites, and other materials that have great design ideas. They should be both related and unrelated to the field of the web site. Use these design concepts for inspiration.
   2. Get photographs/drawings/etc. of products or concepts used on the site
   3. Based on your project research, develop several themes, concepts and rules that will inspire and constrain your design choices.
   4. Brainstorm design elements
      1. Sketch design elements and layouts
      2. Gather or create logos, shapes, forms, and other graphic elements that can be used in the design
      3. Develop several possible color palettes
         
         
4. Sketch page designs.
   Experiment with elements you’ve gathered and create several different sketches of the site
   home page.
   1. Try pencil and paper as well as Photoshop/Illustrator. Don’t use Dreamweaver–it’s not meant to be used as a web design tool.
   2. Select a major theme or concept for the home page, considering your research and information design — visual
      style, audience, attitude, site goals, navigation, and categories
   3. Consider how the home page will relate to the sub-pages
   4. Tie all the elements together on the page
   5. Don’t incorporate every element and idea — be willing to throw out good ideas that don’t fit.
   6. Remember the basic principles of design, including proximity, alignment, repetition, and contrast
   7. Cut, refine, simplify, and clarify your designs
      
      
5. Produce the home page.
   Select your best design sketch, and create a formal version in Photoshop.
   1. Select the design that best communicates the attitude and goals defined in the project research phase
   2. Refine the page composition and color palette as you create the new version
   3. Consider download time
   4. Consider how the page will be sliced
      
      
6. Produce the sub-pages. Incorporate some major design elements into the sub-pages designs.
   1. Sketch several sub-page designs, using important design elements from the home page
   2. Modify home page elements to fit the sub-page — reduce, change color, rotate, stretch, cut up, etc.
   3. Make the navigation clear, functional, and out of the way of the content. Consider making it smaller (navigation is often too large)
   4. In most cases, content should dominate sub-pages more than on the home page
   5. Select the best designs and implement them in Photoshop.
7. Slice the images and build the pages in Dreamweaver. Building the pages in Dreamweaver is the last step of the process.
   1. After building the design comps in Photoshop, slice the images and optimize them for the web. (We will talk about this later in the semester.)
   2. Set up a proper file structure. Create an folder named “images” and place your optimized images in this folder.
   3. Create the index.html page in Dreamweaver.
   4. Create the rest of the page using the index.html file. You can use the index.html and do a “save as” to create the remaining pages.
   5. Use the navigation you created in the index.html file for the additional pages. (Once you’ve created your index.html page, you shouldn’t need to re-create pages from scratch.

Learn about a more in-depth design process for the web called the Core Process by the author of ReDesign 2.0, Kelly Goto. Click on the link under number 2 called Core Process Overview.

Core Process
Phase 1: Define the project
Phase 2: Develop the site structure
Phase 3: Design the visual interface
Phase 4: Build and integrate
Phase 5: Launch and beyond

Additional Resources
Designing Web Graphics.4 by Lynda Weinman
Web Aesthetics
Navigation

Preparing Design Comps
As we discussed, Dreamweaver is not a design tool so therefore, the design of your site must be created in Photoshop. Download a sample design comp and note the following:

• Be sure to set the width and height of the document in pixels , the color mode to RGB, and the resolution should be 72 dpi for most web files.
• Be sure to create a Photoshop file with elements on separate layers. This is important because you may want to edit certain elements separate from the rest of the document, or turn specific layers on or off.
• Insert any photographs or graphics into the design file at 72 dpi. This will prevent the weight of the Photoshop file from getting too large.
• Notice the navigation “buttons” have both an “off” and “on” state on seperate layers. Again this is important when you are slicing– you want to be able to turn specific layers on or off.
• Any HTML text should also be added to the file on a separate layer. Remember you will use this Photoshop file to get final design approval from a client so you’ll want the page to represent the look of the final HTML page as closely as possible.

Required Reading:
Grey Box Methodology

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Next, let’s review how to insert images into a web page. Then we’ll go over how to insert a rollover image into a page. This is important because many times your navigation will be built using rollover images. And finally, I show you a way to insert a “swap inage” into your web page. You may want to design your web site using this behavior. If so, the instructions below will be helpful.

Insert images

Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

gorilla.jpg

gorilla.gif

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

Make the graphics for Insert Rollover example below.

Download: rollover.zip (18K)

The download contains two Photoshop files needed for creating the images used in the rollover and swap image exercises below.

Open these files in Photoshop, and save out the following files: rollover1.gif, rollover1_over.gif, rollover2.gif, and rollover2_over.gif. The files with the “_over” suffix are the highlight files that show when the cursor is over the graphic.

For the rollover1.psd file, you’ll need to copy the text layer and change it’s color for the highlight version. For both files, turn layers on and off as appropriate for the normal and highlight versions of each image. Use Photoshop’s FILE > SAVE FOR WEB function to create the images.

Insert Rollover

Create a rollover the easy way

• Position the cursor where you want the graphic rollover to appear in your page, and click to set the insertion point.
• Click on the “Insert Rollover Image” icon in the objects palette
• Type in a name for the image (the name should have no spaces or special characters). This name will be used to reference this image from the JavaScript that is performing the rollover behavior.
• Browse to the “Original Image” file. This is the image that is shown when the cursor is not over the graphic.
• Browse to the “Rollover Image” file. This is the image that is shown when the cursor is over the graphic.
• Normally, you check the “Preload Rollover Image” box. This ensures that the rollover image will be downloaded when the rest of the page loads. If this checkbox is not checked, the rollover image will download when you first rollover the graphic.
• Type in the alternate text associated with this graphic
• Browse or type in the link you want associated with this graphic. If you don’t want to link anywhere, just put a “#” in this space.

Required Resources – Please read and view the following:

Dreamweaver CS3 Hands-On Training by Garrick Chow: Learning the Basics

Adobe Video: Inserting images

Adobe Video: Creating rollovers in Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Image maps

links inside of images

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

1. Click on the image
2. Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
3. Select a shape (rectangle, circle, or polygon) from the lower left
4. Draw a shape with the drawing tool
5. Dreamweaver will create a translucent shape for your hotspot
6. Enter a URL or local web page file name in the Link section
7. If you want a link to open in a new browser window, set the “Target” selection to “_blank”
8. Set the “ALT” section to the desired alternate text
9. Create additional hotspots by repeating steps 3-8
10. When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.

Explorer Blue Lines

You may find that when the user clicks on an image map in Microsoft Explorer, an outline appears showing the shape of the image map. To remove this outline, edit the HTML and add a small amount of JavaScript.

1. Find the <map> tag associated with the image you want to fix.
2. Within the <map> tag, find the associated <area> for this hotspot.
3. Inside this <area> tag, add the code onFocus=”this.blur()”
4. For example,

<img src="table_files/lit_side.jpeg" width="140"  height="320" border="0"usemap="#mymap" align="left" hspace="10"><map name="mymap">

<area shape="rect" coords="2,115,138,152"

href="http://www.brickmag.com/" onFocus=”this.blur();”>

<area shape=”rect” coords=”0,166,143,204″

href=”http://www.thinkoutside.com/” onFocus=”this.blur();”>

<area shape=”rect” coords=”1,219,138,253″

href=”http://www.jacketmagazine.com” onFocus=”this.blur();”>

<area shape=”rect” coords=”1,273,144,307″

href=”http://www.artcenter.edu/” target=”_blank” onFocus=”this.blur();”>

</map>

Exercise

Download the imagemap.zip file.

Using the enclosed Photoshop file, complete the following:

1. In Photoshop, crop the top header including the logo and navigation and optimize the image.
2. In Photoshop, crop and optimize to save the center photos.
3. In Dreamweaver, build the page using tables, use the “Image Map” properties in the Property Inspector for the logo, main navigation, and sub navigation.
4. In Dreamweaver, add a nested table in the main body and add HTML text.

Additional Resources:

See my CSS video(s) posted here:

http://www.youtube.com/everythingaboutweb

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment: Quiz 2

Also, answer the question in the attached Quiz 3 and upload to the “Dropbox” on smconline.org site by noon on Monday, January 26. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

Specials Announcement:

Midterm Project: Must be posted to the class server (see week 02 notes) by midnight onFriday, January 30.

You have a lot of work to complete this week. This is always true for a 6-week class. Please do not fall behind. And let me know if you have any questions.

copyright © 2006-2009, jamie cavanaugh

Advertisement