After receiving a pair of questions about the details behind the design of this forum I figured I'd post a little information about it and vBulletin designs in general so you can gain a perspective on how they are done, what makes them work and what steps I took.
Bryant and I agreed that maybe we could or should share some details.
vBulletin is essentially a tabled layout application as some may know and the challenge for many is figuring out what goes where in order to change the look of a stock vBulletin template or develop a custom design.
I'm a real fan of tabs and in fact, I have a few proprietary tab features on many of the vBulletin sites I design because tabbed interfaces can be tuff to create using vBulletin so I figure I had a niche. With WebMasterPost.com I decided that I'd take a stock item and remove the tabs for a cleaner and lighter look for the design.
My method is essentially the same in all vBulletin designs. I start with a set of master vBulletin layouts I have in Photoshop and change colors, features and foundational items prior to cutting apart and placing them into a template.
Now some designers follow the same format using photoshop to get the overall look down by taking a snap shot of vBulletin and doing overlays on a layer by layer basis until the design is changed enough to NOT look stock. This is fine as I do the same thing most of the time.
Budget dictates procedure sometimes but doesn't have to be harmed by it. So it is still considered a professional option;
Design is usually perceived as different from the foundation or the core layout. Many of my designs are in fact customized to fit a collection of foundation layouts.
So where do foundations come from and how are they designed? Well, that depends. I have a collection of maybe 10 or so vBulletin and 50+ standard web site foundations that are truly different and unique from modified stock examples we see around the web. I gain them from many places,
many I design from the ground up, some are a per site license type deals I keep in separate folders and a few are open-source variants I always modify, and sometimes I buy full ownership licenses commercially giving me full rights to the design. As designers all know, to have a good collection of examples to work with and to have a lofty inventory is essential to be competitive. I've attached a screen shot of my working directory structure to give you an example of how I organize my collections and design inventory based on license, rights and structure.
The
WebMasterPost.com template is partly based on a commercial template I purchased quite a while ago that I had in my archive inventory
and never used on a domain before. With that unused resource we took my design, altered it to fit some of the parts of that foundation and design this forum in a method befitting of its target audience.
My original design of WebMasterPost.com was a bit darker and did not have rounded corners above each category. In fact I had planned to use a few CSS tricks to make each category header a bit different so when each category was closed it would create a composite image. I scrapped the idea as time was pressuring me to get something published. If you would like to see a very nice and clean example of the original commercial template I took parts from, you could visit
http://www.forumthemes.com Keep in mind this is a commercial product and licenses should be respected as such.
Now a person had asked me if the design for WebMasterPost.com was custom or stock. The answer is that the visual design is fully custom, laid out on a partly commercial stock foundation, which is the rounded category headers and a few other elements that I took out of other stock foundations I had designed last summer which I had in inventory.
I hope that answers some ideas as to how this forum design came about as It appears that it looked familiar to some people and were curious how we could call it a custom design for WebMasterPost.com The design is custom even if it shares elements from commercial stock layouts we purchased.
~ Jared
Below is an example on my system how I structure my design and development.
JaredRitchey
Moderator: Design TeamShared Hoster
