The task at hand with this project was first and foremost a clean, professional new look for their corporate website. The second requirement that they had was the site had to be easy to update and add new content. We found that using Wordpress as the platform for the site would work perfectly for TSI’s requirements.

The Design Process

TSI wanted the new site design to have a similar color scheme to their existing site. The existing site was flat and the colors were a bit too muted, so I took the colors and tweaked them a bit to come up with something a little more bold and striking. I decided to also add silver/gray to the color scheme to add something more to the design.

I put together a new background and header that added a little bit more to the design to make it stand out more. The old design used a drop-down menu, which I wasn’t a big fan of. I opted to make a sub menu that would only appear when sub-pages existed. The main body of the site was rearranged to make the sidebar part of the content area.

The Layout

I’ve been using the 960 Grid System framework for awhile now, and I’ve found out it takes a ton of time off developing and laying out the structure of a site. The framework allows for you to layout the site within a 960 pixel wide container, and within that container you can have either 12 or 16 columns with which to create your layout. This particular layout uses the 12-column styles and is broken into a standard two-column layout.

If you’d like more information on using the 960 Grid System, check out these tutorials:

• Prototyping with the Grid 960 CSS Framework
• A Detailed Look at the 960 CSS Framework (video)
• 960 Grid System Toolbox & Resources

Featured Content

The existing TSI website had a clunky Flash animation in the header and the client wanted to keep that same type of element in the new site. I decided to use a jQuery slideshow animation that allowed for easy editing as well as optimizing the content titles for search engines. The end result was very well received by the client and should help their search engine rankings.

The Final Result

Below are links to screen captures from both the old and new design. I’m pretty happy with the way the the site turned out. I would have liked to have made the featured slideshow more dynamic and use custom fields to populate the images. The client chose to make the titles different from the page titles, so in the end we decided a static solution would be best. I hope you like the final result…I’d love to hear your feedback.

Holy Cow! It has been a long time since I’ve written any new posts on the site. I don’t know if any of you are still out there, but if you are I’m sorry it’s been so long. I know we all get busy and have a hard time finding the necessary time to write new posts, but I’ve been SUPER BUSY! The blog design/development business has really taken off and I have a lot of finished projects to add to the portfolio and a lot to show off. I have been working on a lot of projects simultaneously, and two of them are fairly close to 100% completion…but I’m not ready to close the book on them quite yet.

My latest project just finished up today, and I must say it is a huge improvement over the previous design. The sports blogging community has been kind to GrandmasterB and in turn, I have been turning out some of my best design work. Jesse from PistonsNationBlog.com contacted me around mid-June to work on a new theme design for his site. Before I go much further, I must mention that this theme is not a GrandmasterB original. Jesse purchased a template theme called “Bright” from ThemeForest.net and I added some of my flair to the design to incorporate his new logo and color scheme.

This is the first time that I have customized a Wordpress template from ThemeForest and I must say…they have some great stuff and the themes are well documented for customization. The new theme incorporated two widget placements in the sidebar and a section for ads to be placed by adding the code in the theme settings…very cool stuff! I decided to do a little modification and added a third widget placement below the ad section to split it up a bit.

Overall, the project was a lot of fun to work on and it was cool to see how other developers build themes. I especially liked that the theme had the Photoshop files included and they were also documented to make customization easier. I would also like to give a shout out to Jesse for trusting me to provide him with a new theme for his blog. If you haven’t already…check out his site at PistonsNationBlog.com.

~ GrandmasterB

BEFORE & AFTER

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

Hoimi

The Piss Biscuit

Bern Unlimited

Point of Entry

Parallax Denigrate

Rames Studios

Outdoor Italia

Pixel Criminals

Yeah Style

Ched Online

Larva Labs

UMEK

Emrahdüzer

Revota

Max Black

Paul Wallas

Gisele Jaquenod

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

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.

I’m not 100% sold on the 3D Skull collection, but I’m guessing with some tweaking and some experimentation they could be used very cleverly to create some cool artwork. The entire set has some really cool stuff in it which includes:

• 3D Skulls (mentioned)
• Robots
• Bound (Vines, Ropes, etc)
• Flow (mentioned)
• Too Sexy (sexy silhouettes – also seen on “Speed Network”)
• XTreme Sports
• Apparel

You would think that releasing the latest set of vector artwork would be enough to keep the fans of Go Media satisfied, but there’s more! Alongside the launch of Set 13 they launced a new Fingerpaint Texture Pack as well. I’ve used the freebies from the previous Watercolor Textures and they’re phenomenal and can be used in so many different ways. I’m going to download this set of freebies too, and see exactly what they’re like. The entire set contains 40 high resolution textures which include smears, swirls, smudges and my personal favorite splatters! These textures could also be used to create your own Photoshop Brushes too!

To celebrate the release of these two fantastic packs of artwork Go Media has released a special offer coupon code for a limited time. If you purchase any of the Go Media artwork and use the promo code thirteen you will save 15% off your purchase! That means if you want to purchase either of the new packs you can get them for under $30 each! That’s a freakin’ bargain…no matter how you look at it. Don’t forget it’s a limited time offer. If you want to see an example of using the Go Media vectors, check out my Grunge Styled Banner Tutorial.

~ GrandmasterB

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…

1. 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
2. Improved Post Styling
   • Added Custom Date Badge (New Addition)
   • Changed Title Font to Helvetica Neue Bold Italic
   • Restyled Comments Section to Include Gravatars
3. 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

Well, I’m not personally in the newest issue of ACCESS DIRECTV, but some of my work is…

A few weeks ago I eluded to the fact that I was going to have an advertisement that I designed published in the August issue of ACCESS DIRECTV. Well, I have received my copy of the recent issue and there it was in all of it’s splendor planted on page 16 right next to some clown that looks like the spawn of David Hasselhoff.

For those of you that don’t know yet; I am the web designer/developer for the MountainWest Sports Network. We were the first television networked solely dedicated to a college sports conference (Mountain West Conference). The network is now in it’s second year and is going to be available on satellite via DirecTV. We will now be the first college sports network to be covered nationally and this is very big news for us. The network will officially launch on DirecTV on channel 616 on August 27th, just three days before the 2008 Mountain West Conference football season starts.

I am currently working on some top secret stuff for our website at work that will be unveiled on the 27th to coincide with the launch on DirecTV. It should be a very big weekend for us and finally the 2008 college football season will be here with the NFL kicking off the season just a week later. I can’t wait!

~ GrandmasterB

iDesign Studios is a web design and development company owned and operated by Selene Bowlby. Selene’s original intention for her site was to use it as a showcase for her portfolio of previous work. From the moment that I first visited the iDesignStudio’s website I was impressed with the overall look and design of the site.

The entire site (blog, portfolio, contact page, etc) has the same look and feel throughout. You can tell that Selene has spent a lot of time working out every detail of the site’s design. My favorite part of her site is the color scheme. While many designers would frown upon the use of a dark background with light text; I think it works perfectly. The textured background helps add a sense of depth to the feel of the site; making the text stand out and easier to read. Selene uses a cool shade of green and hot pink to round out her color palette to highlight certain elements of the content which really works. The only thing that I would do to draw more attention to post titles or items of interest is make the text bold. Nothing extreme just a little more weight to the type to set it apart from the normal text.

Probably the most effective tool that Selene uses on her blog are the links to subscribe to her feed. You’ll notice if you’re look at the end of each post there’s a beautifully designed button begging you to click it and subscribe. There is also a section below that to add the post to any of the big four social networks. Personally, it’s such a great idea…that I may have to “borrow” it. This subtle design addition is what hooked me into subscribing to the feed.

The content of the blog is great too. Selene takes a lot of time on her posts and adds complimentary photos to each post that attracts the reader. If you are a web designer or want to be this is a great resource for helpful tips on being successful in your ambition. I honestly cannot say enough good things about this site. The one thing that I take away from sites that are this well done is inspiration for my next project. As a web designer myself I always find other things that I can do to improve my skills and push myself to another level. This website has definitely left an impression on me…nice work Selene!

~ GrandmasterB

The header of the new design can only be described as a very colorful combination of shapes and patterns that has been distressed to give it a rough feeling. It reminds me of wallpaper that you might find in your grandmother’s guest room, but much more tasteful. The distressed look is carried over into the different icons and buttons throughout the site. My most favorite example of this look is in the mouseover state for the navigation bar…a simple pencil scribbled circle around the text.

Of course being the inquisitive type that I am I had to dive further into the new design and how it was built. The entire theme is straight up coding mastery! The entire theme is built from only 23 images; which are all built into the style sheets. Using the web developer plugin for Firefox, I turned off the style sheets and the only images it shows are the ones displayed in the posts…it’s 100% XHTML/CSS no embedded images pretty impressive.

Matt has changed up and added some new features to the site as well. The photos in his image gallery are much larger now, some are around 840 pixels or larger. Matt classifies them as “Imagine it like going HD, you’ll definitely enjoy it more on broadband”. This is amazingly the first version of his site that is all Wordpress and WP2.5 to boot. Gravatars are more prominent in the comments section now and allow for the different iterations of gravatars: wavatars, monsterid and identicon.

There are many more features…too many for me to list here, but if you’re a website design junkie like myself I suggest you check out the new design for yourself.

~ GrandmasterB