Designing my Navigation Bar

In a preivous post i looked at a number of diffrent navigation bars to see how styling with css and images could be used to create intresting designs.

Design 1-

For my first design i just wanted to keep it really simple and just change the colours and also the style of the text when hovered over to show that it is a link.

The above print screen shows how i changed the colours of the navigation bar to match the colour scheme of my website. I just chnged the colour of the background and the text but i wanted to experiment by adding a boarder.

I added a yellow boarder to the right of each link to seperate each link.

I then experimented by adding a full borderaround the whole button. I think that the border is usful for seperating each button, however i do not really feel that it is appropriate to my webpage as there are quite a lot of strong lines within the back ground image and anymore may look too much.

 I then experimented with changing the style of the text when the link is hovered over. This is very simple but i just wanted to experiement with this for my first design just to see how easy it would be to change the design using CSS.

Design 2 -

For my second design i wanted to look at changing the colour when hovered over. So i changed the colours around so it appears inverted when hovered over. i actually prefer this much more than just changing the text as this is much clearer that it is actually a link.

Design 3-

For my third design i wanted to experiment with adding these images. I quite liked the idea of changing the colours before.

I created these opposite images to use in my nav bar. I plan to repeat the first image across the whole nav bar and use the seconde image when hovering over the link.

And these print screens show the images im use in my web page. I am really pleased with this design actually and think i will use it in my website. I love how using a simple image can be really effective.

Adding the Background Image

Adding the background image-

For My backgorund image i wanted to use the Gordon tarten that inspired my website. Below is the image i am going to repeat across the backgorund of my webpage. 

The print screen below shows the image inserted into the back ground, however i will need to write a rult to repeat the image across the whole back ground so it covers the whole page. Repeating a smaller image across the page will make the website quicker to load rather than using a large image to fill the whole page.  

The print screen below shows after i have repeated the image across the page to fill the background.

Here i added a rule so the image would only be repeated across the x-axis along the top of the page. I just wanted to experiment with diffrent ways i could manipulate the background of my website just by re-writting the repeat rule with the stylesheet.

And here shows the image just beign repeated across the Y-axis. I just changed the rule so that rather it repeating across the X axis it does along the Y.

After looking at how i could make images transparent to blend into my webpage when designing my footer i wanted to look at diffrent ways I could make the image blend into the back ground.

I faded the image out using a green colour on photoshop.

Below shows how just by making the back ground colour the same as the colour i used to blend out my image it looks like the image simply just blends into the back ground. This is a very simple yet effective technique to use if you want an image to blend into the background colour and look seamless.



Adding the background image/colour to content-

After looking at the main background image i wanted to look at the background i was going to use for the content which is the main body of my website where all of my important infomation will be.

For my content background I did quite like the idea of using a transparent image so that the tarten background could still be seen through.  

The above print screens shows me adding the transparent image into the content container within the style sheet. I do like the idea of using a trasnparent image for the background. However i do think that this particular background image is very strong and distracts away from the actual text quite a bit. So i think i may opt for a solid background in order for the background image not to distract away from the text.

Designing the Header and Footer

After changing my idea I had to look into changing my header designs to make them more suitble for the web site.

The dimentions i have established for my header and footer space are:

Header- 600 px by 150 px

Footer- 600 px by 50 px

Design 1-

For my first design I wanted to look at using celtic symbols. I done a google search and found some images of intresting celtic symbols that could be used as graphics for my site, below are some of the images i found.


http://www.tattoopilot.com/tattoodesigns/celtic-tattoo-designs/

 http://www.purplemoon.com/Stickers/flora.html

http://www.imethods.com/celtictattoos.html

http://www.imethods.com/celtictattoos.html

http://freewebs.com/picst/draw-celtic-knotwork.html

 http://www.celticsymbol.net/

I particually like the third image so i wanted to experiment furture to see how i could turn it into a logo that would be suitble to use for my site.

Using colours from the Gordon tarten that is inspiring the theme of my website i changed the colours of the celtic symbol to make them more appropriate. I really like the thrid experiment as the yellow really stands out from the blue background.

Becuase this was my favourite image i wanted to experiment by adding it into a web page on dreamweaver and from there create my header rather than just creating the whole thing on photoshop as an image and adding it in.

The above screencapture shows me imserting the image into a webpage in the space where the header is. i did not repeat the image across the banner (although this could be done) because it is a very strong image and i also wanted the text to be easily readable as it is the name of the website and people need to see this clearly in order to see which website they are viewing.

Above shows me changing the back ground colour of the header so it blends in with the image. An advantage of having just a small image and the rest background colour is that the site will load quicker than having a larger image across the whole header space.

And the last screencap shows how I changed the colour of the text and aligned it to the left of the header space so that it can be easily read.


For the footer i stuck to the same colour scheme. i used the same blue as the backgrounf colour for the space and used the same colour for the font also. This is a simple yet effective footer design.

I do really like this header and footer as they are simple yet strong and stands out. However i will look into design a couple of more headers and footers.

Design 2-

For my second design i was quite intrested in looking at adding texture. I thought about using textured papers so i done a google search and below are some of the images that came up.

I really liked the first texture. So I decided to crop it using photoshop so it was 600 px by 15 px as these were the dimentions i had established for my header space.

Below is the image i will be using for the back ground. i really like the texture of the paper and hope that this will give my website a more textured feel.

I have cut away the white background to create a transparent background and saved the image as a PNG 24 so that the background will be transparent.

I also done the same to create a image for the footer space. I just rotated the image and cropped this image so that it fit footer space.

 This shows both the header and the footer images inserted into the webpage. For the text i just used a shade of dark blue from the Gordon tarten so that it stands out from the textured background. I do like this as it does give the website a tactile feel but i am not sure how weel it would work overall in the compositon of my webpage, i don't know weather this and the tarten would be too textured.

Design 3-

For my last header and footer design i decided to combine the previous two designs by adding the celtic symbol onto the textured paper.

This is the background image that i have created for my last header design. I used the textured paper off my previous design but incorporated the celtic symbol from my first design to create my last header deign.

The above print screen shows my thrid header design in the website. I inserted it in with the back gorund image and the other colours that i pretty much want in my website just to see how it would look. However i do think it looks to textured and think the header and footer design that i will use for my web site will be the first one as it is the most simple yet most effective i feel because it is a nice slick header and footer set to contrast with the heavy background image.

In my next post i will show you how i inserted the background image.

Changing Direction

I decided to change my mind from making a tatto website aimmed just at women to a more specialist tattoo website aimmed at both men and women. I just feel that I can include more historical conntent into this website. And also if i were to create a web site aimmed just at women this would litrally half my target audience, so i feel making a website aimmed at a wider auidence will help me when i comes to designing my website.

This will be my inspiration for my celtic website. I was thinking the name of the website could be Gordon's Celtic tatto studio. The above traten is the traditional tarten for the Gordon klan in scotland so i think it is quite fitting use this as inspiration. i was thingking i could possibelly use this as a background image, or in some other graphic.

Task 3 - Research into horizontal navigation bars

Throughout the previous tasks I have experimented a little bit by changing the colour of the navigation bar. But before I went any further I wanted to carry out some research into navigation bars to see how it could be made more of a feature, rather than just been there.   

On this website below i found a number of intresting examples of horizontal navigation bars: 
http://sixrevisions.com/design-showcase-inspiration/50-stylish-navigation-menus-for-design-inspiration/

I picked out a couple of the designs that I though were most intresting.

This is quite a simple nav bar however I really like how well it works with the page. I quite like how it's transparent and how you can still see some of the background image. This is quite interesting and I think helps it blend in more to the page. I also quite like the shape of the buttons how they are rounded, I think it makes it look very sleek and tidy. (http://www.anderbose.com/

I chose this example because i really like the use of the roll over image to show that it is a link. It is quite simple but it really alerts the viewer that this is in fact a link. I also like the use of the grey strip along the bottom this really helps separate the nav bar from the webpage in contrast to the above example that blends in more. However I think both examples work and are appropriate to each design. (http://www.netdreams.co.uk/)

I really like the use of imagery for this nav bar. this is most likley a repeated image, hoever it looks very effective. Also the drop down shadow helps to make this a real feature on the page. I also think it is intresting how it has a drop down menu to allow for easier navigation around this site as it appears this website will have many pages. I do not think that this will be appropriate for my web site as i am planning for it to be quite small, but it is a feature to consider if ever designer larger website. (http://www.skialpine.com/)

I again quite like the use of a roll over image here. This image really fits in with the theme of the website. Also below is a second nav bar, kind of like the drop down menu on the preivious example this aids navigation around quite large websites with many pages. (http://www.cognigencorp.com/index.php/cognigen/our_services/)

I really like the creativity of this navigation bar. I really like how it is slightly slanted and not a traditional horizontal nav bar. (The link to this website went dead so i can not accsess this page to see how well the navigation works, but i really do like this from an asthic point of veiw.)

Again i really like the asthtic quality to this nav bar. I think the hand written writting really gives it a more personal feel. For this nav bar they simply change the colour of the text to grey to show the link highlighted. This is quite a simple yet effective way of showing this. (http://www.thomasprior.co.uk/)

I feel that i have established some intresting features of nav bars through this research. However some of my favourite features have been rather simple but are very effective in communicating things like links for example.