24 August 2014

New website branding - 1st attempt

I think I've got the website header sorted sufficiently well to give it a public airing.

The idea is to keep the original colour sheme and to show the site name in roughly the same style as used on the current site. But now the font's changed and it's rendering text and CSS instead of using an image. It's coded using Bootstrap.

Here's the new header as it will display on larger tablets and desktops:

There's a change in the site navigation: the old site places it down the left hand side of the page while the new site uses a horizontal bar under the branding. I'm using the Bootstrap navbar but I've tried to change the appearance by moving the branding out of the navbar. I've also changed the navbar colour scheme to match the branding. The biggest change is the inclusion of a search box in the navbar.

Here is how the header appears on phones and small tablets:

The navigation moves into the drop down menu on the mobile version and the "strap-line" disappears. I've replaced the Bootstrap "hamburger" menu icon (which I'm not to keen on) with the more obvious "MENU" text. I would prefer to move the menu button up onto the same row as the logo, but haven't worked out how to do that yet!

Just for reference, here's the current website header:

Well, that's the hard part done. All that's left is to design, code and populate the content pages!

Any comments on the new styling will be appreciated.

No comments: