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

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

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