Designing our site & widget, part 1
Created by Martin Angelov on Jul 23rd, 2009
The tools
For this tutorial, we will need the fundamental tool for any web designer – Adobe Photoshop. I am using version CS3, but the process shown here is version independent. So let’s start where we stopped the last time – creating our design.
The colors
After we have laid the basic concepts behind BloggyBits, we should now start creating the front-end. As you know, design is very important for a website.
The first thing we do is choose a color theme, which will be used both in the site and the widget. My tool of choice for the job is adobe’s kuler. If you haven’t heard of it, it is a free service, aimed at providing its members with the ability to create great color themes, or download ones already made by others.
You can also take a look at their AIR application too, which makes it even easier.
Choose color themes with kuler
After you choose a theme you can either log-in and download it, or you can copy the hash values of the colors for use in Photoshop or other software.
Designing the widget
We have to design both a website and a widget. And preferably, they should be uniform – we are preparing the website as an extension to the widget and it must have the same feel to it.
So lets start designing. First problem we face are the dimensions of the widget (width and height). If they are too small, content won’t be readable and if they are too big, the widget won’t fit in blogs.
For now we choose a size that favors the content – 250 by 350 pixels, but unfortunately, there are some blogs (or blog themes) that do not support that size of widgets on their sidebars.
However, if the need arises, a smaller version of the widget will gladly be developed for those scenarios.
In web development it is a common practice not to start with the fully-fledged service, but rather further-develop it later on. This helps you stay on schedule and not risk bloating your project with features, that may end up unneeded.
Now let’s create a blank photoshop document with a size of 250 by 350 pixels and start layering on our design.
Widget design & layers
This is just a mock-up of the real thing – some things were added later in development, but that is pretty much how the final design looked. You see the background as the bottommost layer named “bg”. It has a color overlay, set with the background-color.
Next are three sample posts, each of which contain a picture of a tree, a title, date, and a background rectangular shape.
Details make a design good, so we are using some nicely looking icons for the social sites tabs, and the backward/forward arrows. Those icons are free for use for both commercial and non-commercial projects. You can find those and many more on the iconfinder website.
A good practice in your design would be to name every layer, so you can easily find your way later on – it improves your effectiveness and prevents any accidental editing or deletion of a wrong layer.
We are ready with our widget design. The next step in the creation of the widget is to import it in Adobe Flash and start programming.
What are we doing next time?
Next time we start designing the BloggyBits website.
Related:
