blogthumb-part1

Blog Design from Pixelmator to WordPress – Part 1

by

Details

Difficulty: Intermediate

Files

In this tutorial series we will journey through the process of designing a blog powered by WordPress. We’ll start with the initial design phase on paper, mockup our design in Pixelmator, translate the design to HTML5 and CSS3 and finally convert our code to a functioning WordPress theme. However, I want this series to serve more than just a step by step tutorial, I want to share with you my complete workflow and the design decisions a long the way. So journey with me as we build a blog from conception to completion. Its going to be a long ride!

Here’s how the tutorial series is going to be spilt down:

Let’s Get Started

Often the most difficult stage of the design process is getting started, I’ve been there myself, sat in front of a blank screen with designer’s block. So, where do we begin? Ask any good designer this and they’ll usually say something along the lines of planning or research, but most will agree that the design process begins with the client. After all we currently no nothing about them, what their requirements are or exactly what we will be designing. So let’s first introduce our fictitious client, well, he’s actually not so fictitious as we will be designing a blog for myself. So, we have our client, which brings us nicely onto our first stage of the design process - Research & Discovery.

Research & Discovery

The research phase begins with us gathering as much information about the client and the project as possible. Here are a few of the things I like to know:

  • Purpose - What is the purpose of the site? Are we selling a product or offering information?
  • Existing branding - Does the client have any existing branding in place such as a logo or web site? Remember, the design should be coherent with existing media, thus enforcing brand identity.
  • Audience - Who is the target audience? Are there any commonalities between them such as gender, age, interests or profession? This can push the design in a certain direction, for example an audience consisting of predominantly children could have a more playful feel.
  • Content - Content is key, after all that’s why the target audience has visited your site. So what exactly will they expect to find from your site? This can play an important part in the page anatomy and content placement.

Those are just a few of the things I like to consider when undertaking a new project, feel free to expand on these and add your own points of consideration. Now let’s see how these tie in with our client:

I want a blog designed to coexist with my current homepage (www.ashleyrich.com), which promotes my services as a web designer and WordPress developer. The current website demonstrates a clean, modern and minimalist design and it is important that the blogs design demonstrates these qualities.

The purpose of the blog is for me to journal my personal experiences in the design industry and to provide articles related to web design and development (in the hope that I can assist others in the industry).

The audience will vary by gender, age and location, however they should all have an interest in web design and development.

The content will primarily consist of text based articles, however the ability to embed media such as images and videos will be required. It is also important that I have my social accounts and current projects easily accessible.

Our client

Now that the client has provided us with a brief explanation of their requirements we have gained a considerable insight into which direction we need to push the design. We know exactly what they intend to use the site for, the kind of content they will be providing and the type of audience they expect to attract. They have also provided us with an existing website and informed us that the blog design should incorporate their existing branding. Not bad from a few simple paragraphs provided by our client.

Planning

With the research and discovery phase complete we can begin to plan our design based on what we have learned from the client. I like to start by creating a simple mind map to visualize the anatomy of the design and help understand what page components we need to incorporate.

anatomy
Anatomy based on our clients requirements.

At this stage you should feel comfortable enough to begin sketching our thumbnails. The thumbnail sketches allow us to quickly experiment with different layouts and the positioning of the various page elements from our anatomy above. I like to keep them fairly small and quite rough, however I use graph paper as a makeshift grid. Grids play an important role in design and you should definitely add them to your design arsenal. Check out this article for a quick lesson in grid theory and the rule of thirds.

thumbnails
Thumbnail sketches.

As you can see I’m no Van Gogh, but the thumbnails serve their purpose and we have experimented with a few different layouts. At this stage I’m leaning more towards the two right hand sketches and here’s why:

Blogs are all about content, therefore lets allow it to occupy the full width of our design, this also aids in achieving the clean, modern and minimalist design that our client requested. At the top we will continue the current sites branding with a large chunky text based logo, thus enforcing brand identity and keeping the blog design coherent with the existing web page. Let’s not clutter our design with complementary content (search, projects, tags and socials), if the user requires any of these items they can easily be found in a mega style menu, which will sit above the content with our branding.

Design

I’m really starting to get a feel for how I want the blog design to look and I’m almost ready to open Pixelmator. However, a few of you may be wondering why we even bother creating a mockup in Pixelmator, especially if we are dealing with a predominately text based design. I prefer to do this because designing in a graphics application gives you the freedom to try various layouts, compositions and generally experiment more easily than designing directly in the browser. At this stage we are concerned primarily with the design of the site and we don’t want to get bogged down with writing HTML/CSS. So let’s open Pixelmator and prepare our grid and color palette.

Grid

For this project I’ve decided to use the 960 grid, which consists of 12 columns at 60 pixels with 20 pixels gutters. I have put together a blank Pixelmator document containing the grid which can be downloaded at the top of this tutorial. As discussed earlier in the linked article, the grid will allow us to easily align our components and create proportion within our design. To toggle the grid on and off use the shortcut (ALT CMD ;).

colors
Color palette in Pixelmator.

Color Palette

Color theory is beyond the scope of this tutorial, however because our client has provided existing branding it can help to create a palette containing those colors. Thats not to say we cannot use any other color in our design, however sticking to the colors in our palette and tints/shades of those will really help tie the blog design to the existing branding.

I like to add the colors into Pixelmator’s color window. Simply take a screenshot of the existing web page (CMD + Shift + 3) and use the color picker in Pixelmator to select the colors. Then drag the swatches to the bottom of the window.

Font

With our color palette setup we now need to grab the font that the existing website uses. We can download a free version from MyFonts. The font weight is slightly different from that used however for mockup purposes it doesn't matter too much. Go ahead and install it now.

Conclusion

Thats concludes part 1 of this tutorial series. I appreciate that there was a lot of theory in this tutorial, however, I wanted to document my entire process from conception to completion and I hope that you have found it useful. Stay tuned for part 2 where we will design our clients blog in Pixelmator.

Thanks for reading and until next time!

Comments

  • Hi Ashley,

    Any idea on when the next part of this tutorial will be out? Very interesting tutorial and great to see someone else’s workflow in such detail!

    Thanks!

  • B says:

    Im loving this tutorial as Im thinking about making my first ever website with html coding and css. I needed help in how to create a mock up and this has answered all my questions. Im looking forward to reading part 2 now.