Web site design
We continue our step-by-step tutorials about the creation of BloggyBits. Last time, we finished the design of the BloggyBits widget. Now we have to create the homepage of the service, which shares some of the design ideas that stand behind the widget.
Needed tools
As in the first part of the tutorial, our arsenal consists of Photoshop and all its glory.
Designing our site
Designing a site first in Photoshop, and later in a HTML editor gives you the flexibility to rapidly change the looks of the site in the early stages of development, without risking to throw away HTML and CSS code. It is also a lot quicker to build your layout and have an idea of what you are doing early on. Also with the tools that will be demonstrated in the following examples, you will easily export all the graphics and start coding right away.
The first step is to create a blank document with dimensions 1000×1000 pixels. Sometimes, when you design a site, you find the need to use an even bigger canvas, but you can always enlarge it later.
Work version of the design
As you see from this work draft, we have decided the main layout of the site, where the logo, heading and menu items will go, the look of the site and that is about it. A lot changed since, as you can see if you visit BloggyBits and compare it to this first version.
You may ask why I have included the navigation buttons twice. The top row is their normal state, and the bottom is the hover state (we will talk more about this in the tutorials later on).
But lets inspect the design in details to see what’s what.
Our layers
On the top of the stack of layers is the logo of the site – in this case the text “BloggyBits” with a gradient.
Next are some great social icons, found through iconfinder. They are used to replace the default graphic of the AddThis social bookmarking manager.
Bellow you can see the navigation buttons, which are displayed on the Menu bar.
A few paragraphs to the bottom of this article, you can see a dissection of a navigation button. The interesting part here, is how the “round_Bg” layer is clipped by the “rect_body”. This shows how, just by using simple shapes, to create a navigation button, that also acts as a progress indicator (it shows the steps needed to complete a certain activity on a site).
Every button has a corresponding hover state. The main difference between them, is that the hover version is a little bit lighter and the text in the button is underlined.
In the final HTML/CSS design, the menu buttons will be positioned as anchor elements inside a unordered list and the transition between the states will be pure CSS.
After those, there is the label for the sharing icons, the Menu bar, where the navigation is positioned, some sample text, the right content area, where a screen shot and some info about the widget will find place and finally the background layer.
Dissection of a button
Exporting the graphics
Now, that we are done with designing, it is time to export what we’ve done, so we can continue coding the site in a code editor. Luckily, Photoshop has the tool necessary for the job – the slice tool.
Exporting our slices
We slice ‘em up and export them via File → “Save For Web & Devices”. After you choose a file type and click “Save”, be sure to select “All User Slices”, or your slices will be exported along with automatically generated ones.
Final words
In this tutorial we completed the design of our site, and exported it, so that we can continue with the real web development. Next time we start using Adobe Dreamweaver to create a real website from a bunch of images.
