 |
| Site menu bar |
The real test after creating this Menu Bar was to put it with the header in a mock up web page. Fortunately it has turned out well and looks like this so far: (click to enlarge).
 |
| Basic site so far. |
Showing posts with label header. Show all posts
Showing posts with label header. Show all posts
Saturday, 8 January 2011
Header + Menu Bar = Getting there.
After creating a header image, I needed to think about the menu bar for the site. After using blue and white as the header colours, I wanted to use a colour that fitted in with Mario but contrasted the blue and white well enough to split the page clearly between content and header. I chose a deep red as this colour and think it has turned out well:
Obviously the generic page names will be updated to show different content pages once I have decided upon the site's content. There also may be more or less pages depending on how much content I feel needs to be included.
The real test after creating this Menu Bar was to put it with the header in a mock up web page. Fortunately it has turned out well and looks like this so far: (click to enlarge).
The real test after creating this Menu Bar was to put it with the header in a mock up web page. Fortunately it has turned out well and looks like this so far: (click to enlarge).
Friday, 7 January 2011
Possible Header Design
After coming up with some designs for headers in my sketchbook, I decided to try and come up with a design for the website on Photoshop.
After looking through my design ideas, I decided that using a simple header would probably be most effective, as this seemed to be the case on other plumbing websites. When visiting the website on plumbing, the only things people really want to see at the top of the page are the company name and the phone number. With this in mind I created a simple blue header which fades to white in order to focus the audience's attention onto the company logo. At the other end of the logo I have clearly included the phone number so that it is visible straight away.
Although the header design I have come up with is not necessarily artistic or fancy, I think it is clean, modern and uncluttered - which is important in website design.
Whilst there is no border or anything on this yet, I think it could fit into my website layout in a couple of different ways...
If I choose to have a plain background colour, such as white, then blue could be the secondary colour used for content boxes and other things. So, by adding a border around the header, it would be able to sit nicely at the top of every page as it would fit in with the sites two main colours.
There is also the possibility of using this blue as the background colour. If I do this then the header would then be able to simply blend into the background - provided the background image was designed in such a way that the top left corner faded into white convincingly. If I did this when creating my website, then the header image may need to be altered slightly.
One other thing that I thought of doing with this header would be to use some sort of Flash or Java (?) to make the text for the phone number fade into other pieces of information so that it would rotate between the number and something like "open 24 hours a day." I think this would be a useful tool on the website and would also look good too, without it being too over the top.
After looking through my design ideas, I decided that using a simple header would probably be most effective, as this seemed to be the case on other plumbing websites. When visiting the website on plumbing, the only things people really want to see at the top of the page are the company name and the phone number. With this in mind I created a simple blue header which fades to white in order to focus the audience's attention onto the company logo. At the other end of the logo I have clearly included the phone number so that it is visible straight away.
Although the header design I have come up with is not necessarily artistic or fancy, I think it is clean, modern and uncluttered - which is important in website design.
 |
| Header design. |
If I choose to have a plain background colour, such as white, then blue could be the secondary colour used for content boxes and other things. So, by adding a border around the header, it would be able to sit nicely at the top of every page as it would fit in with the sites two main colours.
There is also the possibility of using this blue as the background colour. If I do this then the header would then be able to simply blend into the background - provided the background image was designed in such a way that the top left corner faded into white convincingly. If I did this when creating my website, then the header image may need to be altered slightly.
One other thing that I thought of doing with this header would be to use some sort of Flash or Java (?) to make the text for the phone number fade into other pieces of information so that it would rotate between the number and something like "open 24 hours a day." I think this would be a useful tool on the website and would also look good too, without it being too over the top.
Subscribe to:
Posts (Atom)