Chapter 6

A navigation system is there to guide the user through a website. The look and feel of the navigation should mesh with the overall personality of the site but the navigation elements should not overpower the content. Once a user has selected where they would like to go, the navigation should fade out of the user’s focus.

It is important to give consideration to the visual elements which make up a navigation system. High contrast borders around buttons may interfere with the intended visual hierarchy and detract from what the function of the button is.

A common practice in effective web design is to avoid large blocks of body text. When a user encounters a lot of text in one group, the tendency is to move on. Create body text in small sections and open it up by using a couple more points of leading than you might use in print design. The text becomes more approachable and more readable.

Visual hierarchy within the body text of a web page is important for communicating to the user different levels of importance of specific lines of text. To create this hierarchy, manipulate fonts, size, color, and weight and keep the choices consistent throughout the site so from page to page, the user will find that headlines are presented in a similar fashion, as are captions, footnotes etc.

Images are used as an important visual tool to help reinforce the personality of a site. In choosing images, be sure that they fit the personality decided upon for the overall website. Each individual image does not stand alone, but is part of the entire visual presentation.

Images may be used to create visual interest by reflecting geometric shapes found elsewhere on the page. This technique can help to tie elements together.

Most users will have a preconceived notion of what they should be able to find in a footer based on the conventions that have developed. A footer will usually contain information regarding the designer of the site, copyright information, the date when the site was last updated, basic contact information, or some combination of these things. If this information is not placed in the footer, some users may not know where else to find it and they may not try to find it.

Footers are usually fairly small and with the amount of information expected to be there, the designer should choose carefully what will be included and how it will be presented. If a footer is too full or has too much weight it will be out of its place in the hierarchy and become distracting to the user.

In creating a form, there are many different types of questions that may be asked of the user. It is the designer’s responsibility to anticipate all possible user responses and to choose the best form element for each question (i.e. a drop-down menu, text field, etc.). If the user is given the opportunity to enter information into a text field, the designer must clearly specify any formatting restrictions. In the case of a phone number, should they include parentheses around the area code and should they include hyphens between each set of numbers.

Forms should ideally be created with a nice visual flow. Often a user may make a mistake while filling out the form. If the form is created with consistency, it is easier to add in an alert element which will stand out to the user and allow them to immediately see what they have done wrong.

Atlantic Freedom Tour Mission Statement - Revised

This site will exhibit all of the planned port visits, the history and relevance of each port, the events scheduled at each location, and a google map displaying the current position of the schooner. It will offer two navigation options, a map with clickable markers and drop-down menus below the header. Short historical audio narrations about each port will be made available as the ship arrives at the corresponding location. The site will target the general public and aims to spread interest in the tour and the story of the Freedom Schooner Amistad.

Chapter 5

The personality of a website comes from its organization, interaction, and visual presentation. It is the website’s look and feel.

Personality is like a website’s own branding. If an appropriate personality is created to match the user’s expectations and the intended message of the site, it may help to create loyalty among users. If a user can connect with your site, they begin to trust your “brand” and may be more likely to return to your site later on.

If a website’s personality does not match the user’s expectations based on the site’s contents, they may leave the site immediately and look for information elsewhere.

Be as unique as you can when designing a site. Something that a user has not seen before will be more memorable and will create an immediate association with your site. It may also convey some of the designer’s personality.

Filling a site with quality content can make up for any shortcomings there may be in the visual presentation. Content that meets all of the user’s needs in a prompt and effective manner will generate credibility and loyal users.

A consistent personality throughout a site is important to tie all of the pages and content together with a single, unifying look and feel.

Typography is a crucial element in creating an effective personality. Every font automatically generates associations with the user and many fonts have strong historical connections. It is important to consider all of the baggage that comes along with a font choice. Typographical decisions have the power to make or break a design.

Color choice is also an important design decision in creating personality. Take into consideration the kinds of emotions that specific colors generate. You may also want to be aware of the different interpretations of colors from culture to culture if your site will be viewed internationally.

Analogous colors are colors that are near each other on the color wheel. These colors are low in contrast and generate a calm, soothing emotional feel.

Contrasting colors oppose each other on the color wheel and as the name implies, they are very high in contrast. The use of contrasting colors brings life and energy to a page. Knowledge of colors and color theory can really help in creating an appropriate personality for your site.

CT Campus Compact Mission Statement

The purpose of this website is to communicate information about the compact, its current members, and how to become a member. The site will exhibit the Campus Compact logo and the standard colors, maroon and green. The structure and layout will be reminiscent of the national compact page but will also be unique to the Connecticut Campus Compact with differences in navigation and subtle layout variations.

Chapter 4

Proximity of elements on a page usually creates a group of information from the point of view of the user. The designer should use this to his or her advantage and group elements that truly fit together. The association can be increased by manipulating size, shape, color, direction, and texture of specific elements and sub groups may be formed.

A well thought out hierarchy is crucial in the development of an effective website design. Images and content are prioritized and the attributes of each element are adjusted so the user will be guided through the composition in the order intended by the designer. This process helps to ensure that the end user will experience the website as the designer wanted them to and that all interpretations will nearly match the designer’s intended meaning.

In the process of creating a visual hierarchy, it may be easy to end up with a page that is not balanced. If the top of the page is heavier than the bottom, or the left is heavier than the right, it really stands out and can render the intended hierarchy completely useless. It is important to use different weights, shades, and white space effectively in order to achieve a balanced composition.

When creating a website, it can be very useful to create a set of styles that will remain consistent from page to page. Information that falls into the same group or in the same level of hierarchy may be the same font, size, or color. This assists the user in knowing where they are in the site and what they may find through each link. This idea of establishing a consistent style is one of the reasons that CSS is so useful.

As a fairly general statement, but an important one, hierarchy increases readability. If implemented effectively, it guides the user through the experience by presenting the most important information in the forefront and leaving the rest on lower levels. In order to harness the power of the hierarchy, again the designer must have a firm grasp on the expectations and needs of the end user.

Atlantic Freedom Tour Mission Statement

This site will exhibit all of the planned port visits, the history and relevance of each port, the events scheduled at each location, and a google map displaying the current position of the schooner. It will offer a map with clickable navigation points at each port as well as an alternative navigation system in the form of drop down menus below the header. Short historical narrations about each port will be made available as the ship arrives at the corresponding location in order to create insentive to return to the site. The site will target the general public and aims to spread interest in the tour and the story of the Freedom Schooner Amistad.

Chapter 3

Be conscious of the user’s experience and remember that there are still many different connection speeds in use. Page download times can be improved by cropping images, compressing with jpeg and/or gif formats, and using images, scripts or style sheets on multiple pages so they can be loaded from the cache.

When posting content that may take a while to download, it is important to give the user feedback so they know that something is happening. We have all had those experiences when we do not know if anything is happening or not and in that case, the common reaction is to simply leave the site. Provide a pre-loader or some kind of mini animation so the user can see how far along the download is.

There are scripts available that eliminate the navigation elements at the top of a page when content is loaded in a browser window. This can help save room on the page, however it may leave the user lost in your site. Those navigation elements are consistent throughout most of the web and provide some comfort and familiarity to the user.

There are a lot of advanced elements that may be added to a page in the form of plug-ins. When designing a site, be sure to use plug-ins for the audience’s sake. Many users may not have the plug-ins and will not be able to view the content unless they download the necessary files. Some users may chose to skip this step and move on to another site.

There are some basic elements that a site should have to remain consistent with the conventions of the web. There should be a page title, a site identifier, when the site was last updated, at least some navigation choices, and contact information. Keep in mind that these elements are to help the user through the site but the content and substance should remain dominant.