blog-design-thumb

Blog Design from Pixelmator to WordPress – Part 2

by

Details

Difficulty: Intermediate

Files

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!

blog design final small

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.

blog design part 2

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.

blog design part 2 2

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).

blog design part 2 3

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.

blog design part 2 4

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.

blog design part 2 5

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

blog design part 2 6

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).

blog design part 2 7

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.

blog design part 2 8

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

blog design part 2 9

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

blog design part 2 10

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.

blog design part 2 11

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.

blog design part 2 12

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

blog design part 2 13

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

blog design part 2 14

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.

blog design part 2 15

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

blog design part 2 16

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.

blog design part 2 17

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.

blog design part 2 18

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.

blog design part 2 19

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

blog design part 2 20

Step 5 - Footer

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

blog design part 2 21

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.

blog design part 2 22

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.

blog design part 2 23

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

blog design part 2 24

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!

blog design final small

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!

Comments

  • Joe says:

    Interesting tutorial. Thanks.

    I was wondering a general designer question I would think. If someone or even a company hires you to make them something like a website, a logo, a graphic for something. Do they get the actual development files or an end result, like a .png or .PDF, etc.

    Do designers keep the .pxm or .psd files? I guess what I am saying is does anyone know if professionals that hire you care what software you use or not, and do they expect to get the .pxm or .psd files?

    Thanks,

    Joe

    • Ashley says:

      Joe,

      I think both questions depend on the client. Generally, those who do not have any design/development experience or much technical knowledge will not really care about what software you use or may not ask for the original files, as long as your portfolio is strong and you deliver the end result.

      A larger company on the other hand will often have someone or a team that deals with their design work and sub-contract projects to designers. When dealing with these sort of people they will most likely request the development versions and expect them to be in the industry standard formats, such as PSD.

      Ashley

  • Paulo says:

    Hi have pixelmator and use it.
    I see the purpose of this tutorial as to demonstrate the steps from mockup to html.
    But you don’t need pixelmator or any image tool to achieve the design you have made, css will suffice.
    Would love to see the same tutorial with a more complex design :).
    Still good stuff.

    • Ashley says:

      Paulo, thanks for the feedback.

      Agreed, the design is simple, however I always design mockups in Pixelmator first. I know some people prefer to design in the browser but I personally hate the thought of working with code when trying to figure out the initial design, I just find it easier experimenting in a graphics application. Each to their own, I guess.

      Regards,

      Ashley