Welcome to part 2 of this tutorial series! In part 1 we covered the planning and design decisions involved when starting a new project for a client. This week will build upon our planning and produce a design mockup in Pixelmator. Let's begin!

• Part 1 - Planning and Design Decisions.
• Part 2 - Design Mockup in Pixelmator.
• Part 3 - Coding using HTML5 and CSS3.
• Part 4 - Creating a WordPress Template.

Step 1 - Setup

Go ahead and open the 960 Pixelmator Grid that was included in the previous tutorial. You’ll notice that a layer called Thirds appears above the background layer with 3 vertical columns in red. You can go ahead and hide this layer as we will not be using it. I start most of my projects with this base grid and I often work with 3 column designs, therefore for ease of use in the future I included the columns. Feel free to use them in your own projects as 3 column designs are very much in trend at the moment.

In order to get a better feel for how the design will look in the browser I like to extend the Pixelmator canvas horizontally from the center. Let’s also add some height to the bottom so that the design can extend vertically.

With the canvas extended we now need to fill the background layer with a color. In our design we’re going for a clean white background. So let’s fill the background layer now white (Edit > Fill or CMD ALT F).

Step 2 - Navigation

After playing with various designs in Pixelmator based on our design sketches, I decided that the navigation should be the first element on the page. I chose to go down this route as I wanted the header to simply contain the clients name at 100% of the designs width and use the same font and color as the homepage. This would result in the navigation sitting much further down the page than I originally planned. Having the navigation sit at the top of the page would also allow us to have a floating menu fixed to the top of the browser.

Go ahead and grab the Text Tool (T). Select Museo Slab as our font and set the font size to 18px. The font color is #333. Type out the navigational elements using a single text layer. When we’re aligning various text elements horizontally I find it easier to have them all in the same text layer, however you may prefer to have each element in a separate text layer for more control. Feel free to use whichever method you prefer.

Between each text element I have left 4 spaces and a bullet special character. I have chosen a square bullet opposed to a rounded bullet to match the crispness of the text (it’s the little details that can help tie a design together). To add a special character in Pixelmator goto Edit > Special Characters and double click on the desired symbol, which will be inserted at the current cursors position.

Using the Move Tool (V), position the navigation on the right hand side and 20px from the top of the canvas edge.

Now add a new layer to hold our simple line divider. To help keep things organized group the navigational layers together (select the layers, right click and select Group).

Using the Row Marquee Tool (you may need to add it to your Tools Palette in the preferences) add a 1px selection 20px below the navigation. Fill the selection with #eee.

Use the Rectangular Marquee Tool (M) to select the ends of the divider that overlaps the grid and delete them.

To complete our navigation let’s simulate a user hovering over a link. Simply change the color of one the navigational items to #f60.

Step 3 - Header

As mentioned earlier, our header is simply going to consist of the client’s name stretched full width across the design. Go a ahead and add the text using Museo Slab in the color #f60. The font size does not matter as we will adjust that in the next step.

Now using the Transform Tool (Edit > Transform or CMD F) adjust the size of the text to fill the grid. Notice how Pixelmator automatically adjusts to the appropriate text size.

Use the Move Tool (M) to position the text so that it sits 60px below the navigation divider.

Finally, add a divider as we did in the previous step, however add it 60px below the text’s descender line.

Step 4 - Blog Post

With our navigation and header in place it’s time to design how the list of blog posts will look.

Let’s begin by adding the post title using the Text Tool (T). We will be using Museo Slab at size 48px and the color #333.

Use the Move Tool to position the text along the leftmost grid guide and 120px below the header divider.

Just below the title we’re going to add the post meta data (publish date and tags). Because this information is complementary we do not want to take the focus away from the title, the easiest way to do this is to reduce the font size and lighten the font color.

With this in mind add the text 30px below the title, however set the font size to 22px and use the color #999.

Below the post meta we want to include the post excerpt. We’ll use the same font size as above however go back to the default text color of #333. We also need to increase the line height of the text to aid readability on multiple lines of copy, set it to 1.5 and position it 40px below the meta data.

To finish off the post preview we need to add a read more link. Add this to the end of the excerpt using the font color #f60.

No let’s duplicate the post preview a few times and position them in 120px increments.

Step 5 - Footer

First, let’s add a divider 120px below the last post preview, as we did below the navigation and header.

Our blog page will list 10 post previews at a time therefore we need a way to navigate between pages. I’ve decided against using the traditional pagination and instead opted for simple Older and Newer links.

Add these 20px above the divider line using the Text Tool (T). The font size is 18px and the color #f60.

To complete the design we need to add the copyright information to the bottom of the design. Add the text (18px, color #999) 120px below the divider and center it within the design.

The copyright symbol can be found in the Special Characters window under Letterlike Symbols.

Conclusion

Our design in Pixelmator is now complete. I've pretty much stripped down the design to the basic page components, allowing the content to take center stage without too many distracts. I decided against a mega style menu and instead opted for a simple drop down menu when required (for example the social links). The search form and tags have been removed, however a Search link in the navigation will link directly to a page dedicated to search, which will also list the post tags and a date based archive.

So have these changed affected usability in the favour of design? I really don't think that they have. The user still has everything at their fingertips and if they wish to explore the blog further they have a page dedicated to finding the right content. As designers we are problem solvers and here we have met the clients requirements, incorporated existing branding and aided in usability. Not bad if you ask me!

So what have we learnt up until this point?

• Thumbnail Sketches - Did we stay true to our original sketches? I think we did but remember that these are initial ideas and help us push the design in a certain direction, that does not mean we cannot waive off course.
• Limited color palette - Our design has used a very limited color palette based on the client’s existing branding. Although we have used a few additional colors they are all tints/shades of the existing colors, thus staying true to the original branding. When choosing a color palette try and limit yourself to handful of colors, any more and the design risks looking haphazard.
• Grid - The more observant of you may have noticed that we have in fact not used the grid at all, other than the outer edges. So why even bother? As I stated earlier I use this base template when starting any new project - remember that the grid is just a tool to aid us in the design process and is not something that you must use every time. Besides, if we did all of our designs would start to look very similar.

Well, that concludes part 2 of this tutorial series. In the next tutorial we will take this design mockup and turn it into a functioning webpage using HTML5 and CSS3. Stay tuned!