Voosh Themes

How To Design A Minimalistic WordPress Blog

In this tutorial I’d like to show you how to create a minimalistic blog design in Photoshop. In particular, we’ll be focusing on creating the blog page design that is used on the Minori WordPress theme.

Minimalistic designs typically include only what’s absolutely essential – anything else is removed to help keep the site clean and usable. However, determining what is “absolutely essential” in a design can be a very difficult process and certainly isn’t as simple as it sounds.

It’s important to get the balance right with minimal designs – remove too much detail and you’ll end up with a site that looks bare and amateurish – get the balance just right and you’ll (hopefully) end up with a clean design that look professional and classy.

Below is a screenshot of the template we’ll be creating.

Step 1: Create A New Document

Create a new document with a size of 1100 x 2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens. Set the background color to #FFFFFF (white).

Step 2: Add The Logo

For the logo, set the font to “Calibri”, the size of 92px, the color to black (#000), and type “Minori Theme” (or whatever you’d prefer).

Add a drop shadow with the following settings:

You logo should look something like the following:

Step 3: Add The Navigation Area

Using the Rectangle Tool, draw a white box from the left border to the right that is around 50px in height.

An an outer glow with the following values:

Then add a gradient overlay:

Following this add a stroke around the box:

Your box should now look like the following:

To give the box a bit more depth we now need to add a white inner border. To do this, select the Line Tool, set the line weight to 1px, and a draw a line across the top of the box, and down the left and right border. The following images provide an example of what you’re aiming for:

Finally, we need to add the text – set the font to Arial, the size to 14px, the color to #555555, and type something like the following text:

Step 4: The Content Area

Next we’ll focus on the content area – add another guide at 650px – and draw a box from the left border to the new one that you’ve added.

You then want to copy the layer settings for your navigation box and paste them onto the layer that contains your content area – this will result in the drop shadow, gradient overlay, and stoke effects being applied.

We now need to add a blog post title – set the font to Arial, the size to 24px, and type some text:

Underneath that we want to include some meta information about the post – keep the font as Arial, set the size to 10px, the color to #888888, and in uppercase enter some meta information:

Next we need to add an image for the post – insert an image that’s around 135×135px. I’ve taken a 135×135 section from a Jamba template screenshot and then rotated it -45 degrees (use whichever image you’d prefer):

Then add an outer glow with the following settings:

Here’s how the image should look:

We now want to add some text next to the image – set the font to Arial, the size to 12px, the color to #555555 and type some dummy text – also include a “Read Full Post” link and use the color #0A86F2 to signify a link:

Finally, we need to add a line underneath the post – using the Line Tool, add a line with a weight of 1px and set the color to #CCCCCC – draw the line from your left border to the right. Copy this line and place the new version directly under the first line. Set the color of this line to #EEEEEE:

To create a nice brushed effect around the borders of the line we need to the Eraser Tool – set the mode to “Brush” and choose the 300px brush:

Move the eraser to the left edge of the line (as seen above) and ensure that you have the layer that the line is on selected – click a couple of times to remove the left side of the line. Now do exactly the same on the right side of the line. You should end up with something like the following:

Repeat all of the steps above to create a few more posts:

Step 5: The Sidebar

Add another border at 700px and then draw a box using the Rectangle Tool from the new border to the right one. Then copy the style from the content box layer to the sidebar box as we did in step 4 – this will copy across the gradient overlay, the drop shadow, and the stroke around the box:

Step 6: The Sponsors

To create the sponsors section we firstly need to create a title – set the font to Arial, the size to 24px, and the color to #555555. Type “Sponsors”:

Next you need to draw a box that is 125×125px in size:

Add a drop shadow:

Also add a gradient overlay:

And finally a stroke:

Then write some text in the middle of the box – set the font to Arial, the size to 12px, and the color to #888888:

Create three copies of this box and position them in the following way:

We now want to add a line underneath the boxes to mark the end of the “Sponsors” section – take a copy of the line created in the previous step where the edges were erased – hit CTRL+T (Transform) and resize it to an appropriate width so that it can fit in your sidebar. Place this line under the images:

Step 7: Add Links

Next we want to add some further content to the sidebar – add a title using the same settings we used for the “Sponsors” title. Type “Categories”:

Next we want to create an arrow – select the Custom Shape Tool and choose an arrow from the drop-down list. Then create an arrow that is around 18×18px in size – set the color to #888888.

Add some text next to the arrow and set the color of the text to #0A86F2 (a light blue to communicate that it’s a link):

Repeat this step a few more times:

Add another copy of the sidebar line at the bottom of this section. Once you’ve done this you can then copy and paste another version of this whole section directly underneath and change the title and link names. You could therefore easily add sections for archives, recent comments, and latest posts, etc.

Step 8: The Footer

Creating the footer is very simple – create a copy of the box used for the navigation area (Step 3) and paste it at the bottom of the document:

Next we need to add some copyright text – set the font to Arial, the size to 12px, the color to #888888, and type something like “Copyright © 2010 / Minori / All Rights Resevered”.

And that’s it! You should end up with a template that looks something like the screenshot below (I’ve used orange links in the screenshot). I hope you found this tutorial useful – it’s a very simple design, but I think the final result is quite nice. Remember that you can check out the live demo if you want to take a closer look at the template – you can also visit the Minori details page to get more details about the theme.