P R O J E C T 2 // statement

My site explores the ways in which data can be arranged to suit what is of most importance to the user.

This non-linear navigation provides specialized arrangements of all the material by prioritizing it according to specific viewing methods.

I chose to modify the recycle symbol and use it as my primary navigation graphic because i felt it related to the content of the site and its directional quality seemed appropriate to the idea of navigation.

Once a method is selected, the arrows composing the recycle symbol shuffle to the new order and proceed into the first step.

From the main step pages, the user can navigate to the next and previous step and also reveal tidbits through the bottom graphics that change depending on the current step.

what i learned

Throughout the course of this project i became more aware of the tendencies of users when navigating through a webpage. I also gained knowledge of how to create a navigational system that provides ease of movement to all areas of the site.

Since webpages have to grab your attention quickly or else we move on, i feel that hierarchy plays an even more important role on the web.

what i would do different

Explore more color options and add more subtle animations that smooth the transition between the clicking of buttons and the actions that follow. 

P R O J E C T 2 // light bulb problem

During critic there was a general agreement amongst the class that my light bulb graphic was not recognizable as an energy saving bulb. What do you all think of the revision to the bulb?

[left] original

[right] revised

P R O J E C T 2 // color exploration

I have been debating if my original color palette is too obvious of a solution. Just because my site is about reducing energy doesn't mean it has to have the "granola" esthetic you see with so much work regarding green-living. However, it still seems appropriate to use natural colors for a site dealing with the environment.

Here are some "granola" alternatives...

P R O J E C T 2 // tidbit modification

The tidbit navigation lies within the same place for each step but the graphic changes. For instances, the tidbit navigation graphic below is green and has grass growing from the top because the step has to do with mowing with a reel mower. 

Once a tidbit is selected, that portion of the navigation raises and the tidbit is revealed below the main step information in the same color as the tidbit graphic. 

P R O J E C T 2 // tidbit modification

Refinement to the homepage navigation graphic.

I've chosen to use a modified recycle symbol with 5 sides instead of 5. Color is used as a means of distinguishing different steps without having to use the actual titles. 

I have integrated a non-linear navigation which allows the user to change how the steps are arranged based on certain criteria. 

The individual steps themselves are also interactive [illustrated through black outline on rollover.]

From the main step page, the user can navigate (non-linear) to any of the other steps through the buttons in the upper left corner, or advance to the next step from the current page (linear.) You can also navigate back to the homepage through the button in the lower right corner.

P R O J E C T 2 // initial digital sketches

Here is the first refinement to the homepage navigation. 

After critique I felt the circle was an arbitrary form and wanted to create something more appropriate to the content.