Metaphors And Image Maps

Call (800)770-0492, email david (at) naaip.org, request via chat or at daily conference call. Click eContracting Registration or eContracting Login (after registration).

Metaphor can be a productive conceptual tool for visual communication. Use of metaphors in visual Web design is quite popular, definitely on home pages. When we use the term metaphor and image map we are referring to image based navigation systems employed in Web pages. Metaphors provide theme based image maps with contextual value. Metaphors must have meaning. The image map/metaphor will guide the user action. For this to happen, the user must be familiar with the metaphor (Kristoff & Satran, 1995).

Identity

Identity is a crucial element to developing a strong visual relationship with the user. Personal touches whether business worthy (a department logo) or not (your hiking photo), should be part of your sites overall visual plan. Don’t go overboard with extensive clutter. The user will be bored and not persuaded. The identity elements help establish recognition of name and brand as well as providing a stable design element to enhance overall site consistency.

You can incorporate a personal logo (we will do this later in the web design tutorial) and develop simple page headers that are consistently placed on each page. By consistently putting the same graphic, in the same location, at the same size, in the same color on each page, identity and recognition are established. These are important elements in persuasion. We want the user to remember our great credentials.

Color Schemes

Color schemes are important in establishing credibility, mood, experience, and page readability. It is important to use colors that work to project identity, promote information, add style, and set a mood. Don’t pick colors that are annoying to look at — bright lime green, for example — unless they explicitly fit the theme of the site design.

Colors change user perceptions because they make a significant emotional impression on the user. Bright vibrant colors give users the impression of excitement or maybe even youth. Conversely, bright colors may be seen as loud or immature, or uncultured by some users who are from different backgrounds or disciplines.

Muted or dull colors may be seen as conservative or possibly be viewed as boring to a certain user population. Users may make emotional judgments on a sites content based on the color schemes employed. Keep your audience in mind when you think about color schemes. It is important that you prepare the Web portfolio color schemes to fit the audience preferences and possible perceptions as best you can (Kimball, 2003).

To get color scheme ideas you should explore different Web sites to find color schemes that appeal to you. Remember keep colors simple and geared to the specific audience you are trying to connect with during the Web portfolio experience.

Navigation Systems

You have established the functions and the structure of the site up to this point so developing a visual approach to a navigation system will be easier. As you have learned in past text passages, Web portfolio navigation should be simplified to provide seamless usability and serve to communicate a functional hierarchy. There are several types of navigation systems that you can use in your Web portfolio pages.

They all perform the same function, to get the user somewhere quickly and easily. Text-based navigation systems are easy to use and easy to update. They are great for bottom-page navigation and for simple communica- tion. Keep the text styles consistent. You can accomplish this by using CSS (Cascading Style Sheets). A web design lesson in how to create styles and style sheets appears later on in the web design tutorial.

Graphical based navigation systems use gif or jpg graphics to trigger events instead of text. Using metaphors and image maps are typical ways to integrate graphics. With these designs, you should be sure they have functional hierarchy, they have to mean something and be in the correct order of overall functions. Graphical navigation systems are more difficult to create and maintain due to the fact they originate in a digital imaging or digital illustration application.

You must design the artwork separately and then export it to your Web site directory. From there, you would need to import the graphics into Dreamweaver or whichever Web development application you use. With text-based systems, you create the menu directly in Dreamweaver with text tools.

Backgrounds

Have you ever gone to a Web page and seen one image repeated consistently as a background? Visually, this is not very appealing. You need to know what background image is so that later on he can avoid using one. Backgrounds, better known as background images, are resource hogs that serve no commu- nication purpose than to provide anguish to the user while waiting for them to load.

The only time that background images seem to be needed and can be used are when non-Web browser safe colors are used in a design created in Adobe Photoshop or another image-editing application. In this case, solid colors are used for the background and although loading time is slowed down, the background keeps an aesthetic decency due to the fact that solid colors tile seamlessly. You still want to use them very rarely.

Alternatively, the horrible tiling of one image creates an annoying pattern that ruins anything else placed in front of it. Bottom line: avoid background images. You can and will use a background color on your pages. And, you will use plenty of images. They just won’t be nested in the background tag of the Web page HTML code.

Pop-Up Windows

Windows and pop-up windows are the shells of Web pages. They should be considered and their use should be planned out when designing a site. The pop- up window can be used as a micro site to add another level of accessibility and functionality to your site.

Or, it can be used to provide an exclusive visual space to isolate and present artwork, video, animation, motion graphics, database the applications, lengthy text blocks, and your specific portfolio content. As mentioned before, pop-up windows provide containment. This exclusive containment can be important to showing off your most critical project samples.

We will be using pop-up windows in the Web portfolio site designed in this web design tutorial. I feel that using exclusive space for showing off important content is vital to isolating the attention of the user.

The trick is to make each window a valuable piece of the user experience. Pay close attention to details such as keeping window sizes consistent. Be sure that you are providing navigation inside the window that helps the user navigate the work and close the window. All the things we’re discussing here surrounding pop-up windows will be fleshed out with a technical instructions later on in the text.

Add a quote engine to your website for Free! We'll even create the website for you for Free!
There are No Catches! It's free and always will be.

"Best system in industry for insurance agents - anything less in not acceptable.

Step number #1 - NAAIP's technology helps producers project themselves as top level professional with minimal time and effort.

Step number #2 - Being among the largest brokerages in the insurance industry, allows agents access to top commissions and resources on every case.

Commitment to growing this relationship is nurtured by providing best in class service. Our attorneys, underwriters, case managers and sales experts will help you grow your business - one client at a time. Welcome to our team, a system that is uniquely suited for insurance professionals in this new millennium."

Aaron Levy - Website Owner, NAAIP.org

Moses Newman - Chief Technical Officer, NAAIP.org