I’ve been mulling over the current status and the direction of GrandmasterB.com for awhile now, and it’s been a bit of a battle for me. I’ve contemplated weeding out content, starting over from scratch and at one point scrapping the entire blog for something different.

After careful consideration, I’ve decided that I took the site in the wrong direction trying to make money off of the site in the wrong manner. I tried to pump up the stats and page views with irrelevant content and compromised the integrity of the great content that I already had.So What’s Next for GrandmasterB?

What I didn’t realize is how quickly I would make a name for myself in the blogging community as a Wordpress theme designer. In the past year and a half I’ve cranked out twelve different Wordpress sites (not including this one) and I’ve learned a ton about what you can do with Wordpress. With every new site, I’ve tried to push the envelope and make something better than before.

I now feel that I have a firm grasp on how I can use Wordpress, not only as a blogging platform but as a content management system for small business applications. My plan for this site is to use it as a platform for building up my client base further, and eventually developing my own premium themes to offer to the masses.

Spring Cleaning

I have gone through all of the content on the site and removed all of the content that wasn’t relative to where I want the site to be. For instance there will no longer be posts about Kim Kardashian or monthly recaps about the site traffic appearing here. From now on, it will be graphics related content only:

• Design Reviews (mostly my own work)
• Web Development Tools
• Tutorials (Photoshop, Illustrator, Wordpress, etc)
• Freebies (icons, graphics, etc.)
• Mac Tricks
• Q&A with GrandmasterB

I really enjoy writing this type of content and that seems to be what keeps the readers coming back. To give you an example, my killer metallic text tutorial has consistently been the top article since being published in June of 2008. It’s obvious that readers enjoy that type of content.

I hope you all continue to follow the adventures of GrandmasterB and the new direction the site is taking. I’ll be interested to see where it all goes from here.

~ GrandmasterB

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.

From time to time, I get questions about how I start designing websites, and how I build custom WordPress themes for my clients. I’ve spent the better part of the last year trying to streamline the process of designing and launching a blog theme. The problem that I have is I tend to get a little carried away with trying to be perfect. Like most designers I start out with the basic tools…pencil and paper. I draw out the layout and figure out the basic positioning of all of the necessary elements before I even think about putting anything down in Photoshop. That drawing stays with me until the very end of the project, and sometimes even after just for reference.

How Does GrandmasterB Layout a Site for WordPress?

Recently, Forest from The Random Forest and Frugal Zeitgeist hit me up on Google Chat to ask me how I build a Wordpress theme and how I go from Photoshop layout to coding everything for Wordpress. Well, I know that I’m not the only designer/developer that works this way, but I build a simple HTML/CSS file that will serve as a template for the coding of the WordPress theme. In my opinion, there’s no reason to mess with all of the WordPress options and variables unless you have already solidified the design in it’s simplest form. I break down the design into the most simplest elements first:

1. Header
2. Content Area
   1. Left Column
   2. Right Column
   3. Any other Columns
3. Footer

In my experience, 99.95% of the websites you visit will be comprised of those elements. I have built a basic HTML layout and copied it over to a Clip in Coda that I can use for every new site and add or subtract items as needed. If you don’t use Coda, you can still make a template file to copy and paste whenever you need. Below is the basic structure of the file that I use…minus the standard HTML code.

Basic HTML Layout

<div id="wrapper"> <!-- wraps everything into one div tag -->
<div id="header"></div>

<div id="content-area"> <!-- houses the columns -->
<div id="left-column"></div>
<div id="right-column"></div>
</div>
<div id="footer"></div>
</div>

I know it looks simple, but that’s the idea…and it is simple! If you were to populate your divs with some content they will all just be stacked on top of each other. All of the detail like column heights, widths and position are determined by CSS. I had contemplated writing my own HTML/CSS layout tutorial, but that has been done a hundred times and there’s no sense in reinventing the wheel. One of the better tutorials that I have found was written by Steve Dennis on Subcide.com. It’s a very good tutorial, easy to follow and has great graphic examples to follow along with.

If you have any questions that you would like GrandmasterB to field hit me up via email or on Twitter.

~ GrandmasterB

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

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

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

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

Tool Number Four: Firefox 2

I LOVE FIREFOX! There, now that that’s out of the way I can concentrate on giving you details as to why I use Firefox to develop sites. I use Firefox for two main reasons. I code every site and test as I go with Firefox. The main reason is that the fine folks at Microsoft have discontinued Internet Explorer for Mac; which quite honestly is fine with me. I do have a standby Windows machine dedicated to testing once I am sure everything looks fine in Firefox. The other reason I prefer to do all of my work with Firefox is the great add-ons that you can download from the mozilla site. That’s the beauty of using an open source browser; the community of developers come up with some of the coolest add-ons to make your internet experience more enjoyable.My favorite add-on for Firefox is the Web Developer Toolbar by Chris Pederick.
This toolbar is un-freakin-believable! I found the toolbar perfect for creating my WordPress theme…or modifying the theme. I started using the Web Developer Toolbar when I designed my first Joomla! template. The ‘information’ menu allows you to display class and id details for an entire page. An invaluable tool for locating the classes that control the layout and look of the template. Another cool feature allows you to display the CSS used on the site…even if it’s a linked stylesheet.The other tools that I use are fairly straightforward and are installed more for convenience than ‘need’. ColorZilla is a great add-on that gives you a color picker when activated to get the RGB or HEX value of a color within the browser window. FireFTP is an add-on FTP client to upload and download files on your web server. I don’t use FireFTP as much as I used to, now that I use CODA. If you’re looking for a good FTP client, and don’t want to fork over money for it…FireFTP is a good option.

Tool Number Five: MAMP

MAMP (Macintosh, Apache, MySQL, PHP) is a program that creates a local server environment on your Mac. There is a windows equivelant called WAMP; which does basically the same thing as MAMP, but in a Windows environment. The reason I use MAMP is it allows me to setup a local version of a site (ie. my WordPress Theme) and do all of the testing locally. This saves a great deal of time, because I don’t have to make a change, upload the file, refresh the browser…and repeat if necessary. Since it installs PHP and MySQL within the application directory it’s a perfect fit for developers that desing Joomla! templates, WordPress themes and other CMS customization. Both MAMP and WAMP are free to download and we all know that free = good!

Well, there you have it. That’s my list of web development tools that I use and recommend to anyone that is either starting out in web design or is an established designer. If you have any comments or questions involving this list or anything else related to web design; please let me know. Also, if you have software that you would recommend please add a comment and let me know about it.

~ GrandmasterB

Tool Number One: Photoshop CS3

Photoshop is my favorite tool for getting my design from paper to pixel. It is by far the best imaging/paint software around. Yes, I know about Fireworks and PaintShopPro. Quite frankly, I’m more comfortable with Photoshop, and it’s set of amazing tools. There are many resources available for people that are new to using Photoshop. I understand that it can be intimidating at first, but if you start small you can hone your skills and become a Photoshop master (eventually). Check out Pixel2Life for great Photoshop tutorials that range from begginer to expert levels of difficulty.

Tool Number Two: Coda (Mac)

I just recently discovered CODA and all it can do. For the longest time I used Dreamweaver to do all of my coding work, but after finding CODA I dropped Dreamweaver like a bad habit. CODA is a Mac web development tool that has everything you could need for managing one site or multiple sites.CODA is divided into six sections: Sites, Editor, Preview, CSS, Terminal and Books.The “Sites” section allows you to setup the directory of your website files and establish connections to the server where they are hosted. The cool thing about “Sites” is that you have a cool graphic showing you what your index page looks like. All you do is double click the page and it connects to your server. Edit or Create your pages and click publish and your new content is updated locally and remotely.The “Editor” is very similar to most web development text editors that color the tags according to what type of element they are. The “Preview” tab is just that a preview of what your site will look like (in Safari). CODA does allow you to open a second area below the coding window to preview your changes on the fly. The “CSS” tab gives you more of a WYSIWYG approach to style sheets. Personally, I haven’t found much use for it yet, as Tool Number Two is my choice for editing CSS. The “Terminal” is a great addition to CODA. It gives you the ability to open terminal services (ie. Telnet, SSH) into your server to perform tasks such as building a MySQL database and queries. I didn’t think that I would use it as much as I have, because the Mac OS already has a terminal program. This one is a click away and easy to get to, and I can store my connection information right inside the site configuration. The “Books” tab section has e-book versions of the Web Programmer’s Desk Reference to HTML, CSS, Javascript and PHP. All of these great tools in one program and at a reasonable price (just $79 USD). That’s a lot of BANG for your buck!

Tool Number Three: CSSEdit (Mac)

CSSEdit from macrabbit.com is by far my most favorite tool for developing sites. The editor allows you to take the hand-coding approach or you can use the WYSIWYG approach to styling your site. The program window has three sections to make styling your site easier.The “styles” section shows all of the selectors within the css file and shows a preview of what they look like. The mid-section is where the beautiful CSS code lives. The right side of the window has the WYSIWYG portion of the program. CSSEdit also has a cool feature that allows you to save milestones in case something breaks; you can revert back to a milestone when the style sheet was working properly. There is also a full preview window that you can open an HTML file to see the styles in action. The preview window also has a feature dubbed “x-ray” that allows you to click on a section of the HTML page and see what styles are applied to that piece of code. Last but not least is a full fledged CSS Validator to ensure that your code is valid and doesn’t include any coding errors. CSSEdit is available for purchase online for $29.95 and in my opinion is a steal!These are the three major tools I use when developing websites. The other tool that I use is extremely important with all of it’s uber-cool addons. I will talk more about that in part two of “My Web Development Tools”.

~ GrandmasterB