Shannon Bedena McGivern: Task 4: Navigation Menu Bar Design

Task 4-Navigation Menu Bar Design

Research behind the button bars:-

I have looked at different button bars on various websites, I have found that the button bar is usually placed below the website title, this is probably so that it is easy for a user to find, also the button bar is sometimes stylised to suit the page.some of the designs i looked at were very complicated with search bars and tools, i thought that those desighns wouold be too complicated for a design on a childerens website which is obviasly going to be used by mostly childeren, therefore i will be going for a simple design.

This is a button bar that i have print screened from the hobby craft website , as you can see it is a very innovative design which allows you to select a button from one of the tabs which have been made to look like some kind of filing system. this image of a navigation bar was taken directly from :- www.hobbycraft.co.uk

The first image is an example of a button bar / navigation bar which takes up the side view of the page, it has a different layout position from other button bars that i have researched.the second example only uses images as its buttons in the navigation bar,i believe that this could cause some problems in deciding where they would navigate you to therefore it is too simple.these images of navigation bars were taken from :- http://www.awwwards.com/31-examples-of-icons-in-navegation-menus.html

I would like my button bar to be friendly and easy to use and find, this is because i am designing it for the childerens music website that i designed earlier.I will try to design it around the HTML page that i designed so that it fits in with the webpage.

Making my button bar:

To make my button bar i created the first layer of the button bar , which will be the object you see first, i then created a second button bar with different colour writing , this was to be the rollover button so that when you went to click on the buttons on the button bar each would change colour so you knew which one you were about to click on.

I then proceeded to place it into my webpage in dreamweaver which you can see in the screen shot below:-

In this screenshot you can see my work in the dreamweaver stage , as you cans see i have used CSS and HTML code to place the button bar into my webpage.