This project will display the (jQuery/Javascript) interative elements that were added to the Stage 5 Staging Company website in an effort to increase the user experience.
The page above shows the active state for the homepage. Changing the color to yellow in relation to which page the user is on will help the user keep track of what page they are on at all times. I have added this functionality to all of the navigation links.
The page above shows the nivo slider functionality. As I mouse over the picture, a navigation bar appears. This allows the user to cycle thought the pictures at the own pace. The user can also skip to a particular image by clicking on the corresponding circle at the bottom of the slider. In addittion, the slider is set to automatically cycle throught the slideshow with different transitions in between the images.
The image above shows a read now button being rolled over by the mouse. The underline is a cue to the user that the words "read more" are a clickable link. I have styled all of the read more links like this.
The image above shows the about link in the footer being rolled over. All of the links in the footer are clickable. The campany pictures on the right side of the footer are also clickable.
The picture above shows the About button in an active state. This helps the user know where they are on the website at all times. The words "contact us" have an underline under them when the words are rolled over. This lets the user know that contact us is clickable.
The picture above show the Gallery link in an active state. Also displayed is a gallery item with the mouse rolled over the image. Each time a user rolls over an image in the gallery, the images dims slightly and a tool tip displays. Adding this functionality shows the user where they are and this gives the user and indication that the images in the gallery are clickable.
The image above shows what happens when an image in the gallery is clicked. The click image displays in a slideshow. I made two slideshows, one for the braces and one for the carts.
The image above shows the contact navigation button in an active state. The map with a location marker is also displayed. The contact forn is styled.
The image above shows some information entered into the contact form by the user. The emal field shows how it looks when the user clicks in any field in the contact form.
The image above shows what the user would seen when they mouse over the reset button. This also happens when the user mouses over the reset button. Changeing the colors with the mouseover shows the user that the buttons are clickable.
Here is some of the html code for the gallery page.
Here is some of the CSS code for the gallery page.
Here is some html for the contact page.
