GrandmasterB dot com » design

26 Creative Approaches to Header Design

GrandmasterB — Mon, 09 Feb 2009 13:00:10 +0000

Following in the footsteps of my recent 26 Creative Approaches to Footer Design post; I thought that it would be cool to post twenty-six creative header designs. Creative header designs are quickly becoming a growing trend in website design. The header is still the default area for placing logos and navigation, but the manner in which they are being placed is a different technique altogether. Some of the sites that I found included all types of different design elements, information and one even included an audio player.

The thing that sets all of these designs apart from most, is that they all use a great deal of CSS to pull off the multiple layers of images. Take Pixel Criminals for example (#16 on the list), the header alone consists of four or five different images layered together and the main image is over 500K…that’s insane! Many of the designs included in the list of twenty-six creative header designs have a desktop theme, giving the feeling of the site being a workspace. They are really unique designs and feature items like sticky notes for navigation, paper clips, coffee mugs and other workspace essentials. One of the designs has implemented Flash to simulate a steamy cup of Java…BRILLIANT!

If you’re a website designer like myself, or just a fan of creative website design; I’m sure you’ll enjoy my list of creative header designs…ENJOY!

26 Creative Approaches to Header Design

Koko Digital

Revolution Driving Tuition

The Circumfrence

Star Catcher

Kreativa Unlimited

Gary Nock

Klei Entertainment

The Dollar Dreadful

Parallax Denigrate

26 Creative Approaches to Footer Design

GrandmasterB — Tue, 13 Jan 2009 11:00:24 +0000

In my day-to-day routine, I spend a great deal of time looking for and searching out new trends in Web Design. Lately, I have noticed on trend that is “Swiffering” the Internet…creatively designed footers. Over the past year or so, it has become apparent that the footer of a website is no longer an afterthought or a throw away item. If you follow conventional design principals, you put everything that is deemed ‘unimportant’ at the bottom of the page. If you look at most websites, you’ll notice that many of them have extremely boring footer designs. Most of them you can’t even call “designs”; they’re just static information that they needed to put somewhere…look at my footer. Guilty as charged!

So why buck the system and spice up your footer design? Well, many designer are looking to the footer of the website as valuable real estate to put information that’s not quite top content, but definitely “important”. I have noticed that this trend of creative footer design is especially prominent in the blogging community. With all of the tools available to bloggers from social networking and bookmarking you often struggle to find places to make everything fit and make it look good. Many bloggers are using the footer to place elements like their Twitter updates, FLIKR photos, blog archives, recent comments, latest posts and other elements that are generally left for the sidebar.

I’ve been working on a project for a client that will incorporate a more creative footer design, and eventually when I have time to design version two of GrandmasterB.com; I will be concentrating a lot more time on a creative footer design for the site. I have compiled a list of 26 website designs with stunning and creative footer designs to show you what you can do with your footer. In looking at these sites and their designs, they bring a sense of completion to the site. The entire layout ties the design together and makes for a creative and killer site design. Each of these designs have a unique and creative approach to utilizing the footer as a place to showcase a number of items. Check them out, comment and let me know what you think.

26 Creative Approaches to Footer Design Gallery

CSS-Tricks

Carsonified – Events

Edgepoint Church

Spoon Graphics

Seed Hunter

Amuki

Komodo Media

Blup

Wire Roses

Boagworld

Drawn to Pixels

Incubus

David Hellman

Flyin’ Web

Ten Thousand Things

Web Designer Wall

National Mechanics

Sam Rayner

CSSAddict

Veerle’s Blog

Tennessee Vacation

Matt Brett

Fling Media

StrawPoll

Legendary Aircraft

I Primi Dieci

A New Customized Theme for YepYep

GrandmasterB — Mon, 12 Jan 2009 23:03:47 +0000

Over the weekend, I put the finishing touches on another custom WordPress theme by The BlogFixers. Jeff and I were commissioned by Matt from YepYep to do a complete overhaul of his existing site and create a new theme from the ground up. We worked with Matt throughout the entire process from the brainstorming phase (how many columns, column widths, etc), through the design phase with Photoshop comps and finally the finished product which went live yesterday. The cool thing about this project is this was my first attempt at developing a three column WordPress theme. While I worked on the design with Matt, Jeff worked on getting his server configurations tweaked and dealt with some issues that Matt was having with the WP Super-Cache plugin.

Upgrades and Improvements

As I already stated the new theme is three columns now, as opposed to the previous theme which had only two columns. When designing the new header section I wanted to give the logo a little more flare, so I decided to place it at a bit of an angle and added in some gradient effects. The background behind the logo got a bit of a treatment as well with the addition of a few carefully placed graphic elements. Moving down we created a navigation bar with buttons for the many featured categories of the site. Previously, Matt didn’t have any navigation…this was a big improvement.

I decided to carry of the new look of the logo into other elements like the date badge and the RSS icon. Matt had specifically requested a graphic solution to the date badges after seeing the ones that I created for Cuzoogle’s new theme. The major difference with this version is that we have included the year below the date. Matt had a great idea for displaying the categories as a ‘tag cloud’, so we used the Category Cloud Widget from Lee Kelleher.

Looking Back at the Project

Although, the project took a little longer than anticipate to complete (thank you Holiday Season); Matt was extremely patient and easy to work with through the entire process. We have already received numerous feedback emails regarding the design, and we really appreciate the comments. This was a fun project to work on and I can’t wait to get rolling on the next one.

I really hate to admit it, but I need to buy a cheap PC for testing. No matter how great everything looks in Firefox or Safari…it always needs tweaking in Internet Explorer. We had some CSS issues with the footer not staying put on the YepYep theme in Internet Explorer, but after an hour of messing around I got it fixed.

Thank you Matt for trusting Jeff and I with the redesign of YepYep…we had a blast!

~ GrandmasterB

If you’re getting tired of that free WordPress theme you’ve been sporting, or want to migrate from Blogger to Wordpress; check out the Design Services page to see my portfolio.

A New Look for Cuzoogle

GrandmasterB — Wed, 12 Nov 2008 05:10:34 +0000

In my Week in Review post for October 20th, I mentioned that I had been working on a “secret” project for a client of mine and that we would probably be launching the site on or around November 3rd. Unfortunately, we didn’t make our November 3rd launch…but November 11th is just as good. The project as you might be able to tell was a redesign of Cuzoogle. Cuzzy had been talking about redesigning his site for awhile now and giving it a more updated look. We both sat down (cross-continent) and came up with an interesting layout that would allow for him to put in his necessary ad spots as well as something that looked fan-freakin’tastic!

While this project wasn’t a completely custom theme; we did start off with the basic layout from the Simple Red Theme from Easy Wordpress that Cuzzy had been using. The biggest challenge in getting everything looking as it should were the widgets that Cuzzy uses for advertising. They took some tweaking, but they all fell into place like they should. The new theme is in between Evolutionary and Revolutionary when it comes down to it. Since the original theme had a lot of good quality stuff already built-in, we didn’t need to revolutionize the theme…however, the design elements added were HUGE improvements over the old version.

This is a quick breakdown of all of the new added features…

New and Improved Header Graphic
- Larger Header to Incorporate Ad-Space
- Built-In 728×90 Ad
- Built-In 300×250 Ad (New Addition)
- Custom Cuzoogle Logo (New Addition)
- Streamlined Navigation
- RSS Button Designed into Header
Improved Post Styling
- Added Custom Date Badge (New Addition)
- Changed Title Font to Helvetica Neue Bold Italic
- Restyled Comments Section to Include Gravatars
Sidebar Improvements
- Restyled Search Box
- Restyled FeedBurner Widget
- Made Split Columns Wider
- Restyled Widget Text

There are a lot of really cool new features to the updated theme, but I think they add a lot of character to the site. The one thing that I might have done differently would be to make the header not as tall. However, I think it works and gives the site a unique element that you don’t see every day. I’m really proud of this new design…I think it’s going to generate a lot of buzz in the design community.

What do you think of the new Cuzoogle? I’d love to hear what you all think of it. If you’re interested in having GrandmasterB design something for you let me know. If you want to see some of my other work check out the Design Services page.

~ GrandmasterB

Freebies – RSS Feed Icons: Grunge Set

GrandmasterB — Tue, 09 Sep 2008 13:30:49 +0000

After the success of the RSS Feed Icons – Glassy Set that I released back in June; I have decided to release another set of RSS Feed Icons to the masses. I have been doing a lot of grunge artwork lately with paint spatters, scratches and stains so I figured I would try my hand at putting together a set of Grunge Icons. However, this time I decided to mix it up a bit and include not only the 128×128 icons, but a matching set of 64×64 as well. This set includes the colors that you see above: blue, green, purple, red, orange and yellow. The icons are saved in PNG format with transparency to fit into your design with ease.

Download: RSS-Feed-Icons_Grunge.zip (136 KB)

If you have any suggestions for future freebies, or would like to request a custom design of your own shoot me an email and I will get back to you ASAP! I have opened the doors to the GrandmasterB design center and I am now taking on new design projects. Whether you are looking for custom banner ad design, print or web design…GrandmasterB can do the job. Check out the new Design Services page and see the services I am offering.

~ GrandmasterB