For the past few years I have been working a lot with Adobe Fireworks, a great graphics and web-design software. After several use, I loved the software so much that I made a full transition to it. I quit using Adobe Photoshop and used Fireworks full time. Working with this software, I noticed that not many designers (specially web designers) have seen or have understood the quality work Adobe Fireworks can produce. Several web developers have taken the initiative to help others understand this software more by providing free tutorials and graphics created with this software. I have joined this cause three years ago but have become a little idle over the last year. To help make up for it, I am releasing this piece I call Adminitor.

Adminitor is a design I made for a design competition over at WebDesignerForum for bragging rights. The contest brief basically stated that a fictional hosting company is looking to brand their service with a custom look. Since most cPanel themes are not that great, this contest provided us designers with an opportunity to let our imagination run  while keeping in mind that it is an administration panel. During the contest, I uploaded the design on Forrst for a little feedback and several response made me want to provide something back to the design community. Since I did not provide much support for the Adobe Fireworks community, I promised few friends and eager followers that I will provide this design as free download for educational purpose. Now here it is.

I am an engineer and really love K.I.S.S. (Keep It Simple Stupid). For this layout I wanted to make something that is simple but still up to the standard. But even when staying simple, I wanted to use up quite a bit of the tools available in Adobe Fireworks. So there are a variety of shapes, shadows and gradients used in the design (don’t worry, nothing too complicating).

Unlike other cPanel layouts, this does not align center, rather to the left. I purposely made this option so that developers can make this a fluid layout with the ability to flex based on screen resolution. So if you’re using a 19 inch monitor, you don’t have 400px of empty space on your screen. I feel this will make it work for a vast group of users.

One thing I do hate about most layouts that designers make is that they focus on only one page or provide one page of the design without giving a hint of what the other pages or other sectioned contents will look like. So for this layout, I put all forms, graphs and icons that are typically found in cPanel in one editable file. This way I’m not leaving you the designer without a hint, rather suggest, what the other pages of the design would look like. But at the same time, I am not taking away your complete freedom to design the remaining page or even the current page to your liking.

When you design a template for a client, nearly all clients would like to see how organized you are with your work. The best way to show organization is through layering. In this design, I have layered all contents based on the section they are part of. Example: the sidebar contents are all placed in a layer titled “Sidebar.” Similarly the main content/body has it’s own content.

For the heck of it, I made up a company name Server eXchange. The name, to the best of my knowledge, is not registered to any company or organization and I made it for the heck of it. It comes free with the design and you have the right to do as you wish to/with it. Just like the template, the logo too was created using Adobe Fireworks. The font used in this logo is called “Swatch IT” which I did provide in the Zip Archive below.

I wanted to stay simple with the overall font. The first version of this layout contained a variety of fonts. After a few feedback and a little time thinking, I decided to make the majority of the layout free fonts based and use only one to two fonts. Being a long time Google supporter, I decided to use the Lato Font Family from Google Web Fonts. I think the design looks much better and cleaner with this change. The font can be downloaded from Google Web Font, but why make you work for it? I included the font in the archive as well.

The icons were not created by me, rather I just used FindIcons to find those icons. All credits for the icons go out to their respective designers and a special thanks goes out to FindIcons community for putting them all there.

• Adobe_Fireworks.png
• Adobe_Illustrator.ai
• Adobe_Photoshop.psd
• LEGAL CODE.pdf
• Preview.jpg
• ALL FONTS USED

Now the ever so important copyright information. I am providing this layout under the Creative Commons Share-Alike license. This basically means that you are free to do as you wish with the design as long as you share your changes. I am uploading this layout to help you guys/gals understand the beauty of Fireworks and I would like for you to do the same.

The file hosting for the archive is provided by Box.Net. I decided to host it there to help me save some bandwidth.