Nav Progression

After designing my logo it inspired me to finalise the design of my nav element in a similar fashion. I really liked the flowing ribbons I had created at the bottom of the logo badge and I wanted to apply a similar effect to the background of the nav element to create somewhat of a visual focal point. This is important because I plan to have my nav element be sticky. This means that it will scroll normally until reaching the top of the page at which point it will stick and stay the top of the page, over the top of everything else.

I originally had somewhat of a stringy design for the nav which I wanted to thicken out and bring to life. After playing around with the design of my logo and adapting the techniques to a flat banner (as apposed to a curved one).

I managed to turn this:

Into this:

I much prefer the graphical style of the second design. I prefer it's blocky style. The way the flowing is conveyed and the overall look of it. It fits infinitely better with the new logo and creates a strong visual impact. The only problem I foresee having to overcome is the issue of scaling. The element being a rigid size cannot really be shrunk as it will throw all of the proportions off and lead to warping and other nasty side effects. I may have to re-create a version of this using CSS at a later date that will scale smoothly to smaller sizes. Luckily the main body for the nav isn't too complicated so that shouldn't be too challenging. 

The shadow underneath I added in Photoshop because the shadowing tools within CSS3 are somewhat limited and I couldn't get this level of specificity within the shadow using the rules I can apply. The shadow will help to blend elements beneath it in a realistic and intriguing manor.