How To Design A Clean And Minimal WordPress Theme

This is the first post of a three part WordPress tutorial series, in which I will walk you through the three key stages of creating your own unique WordPress Theme. In this post I will be creating the design for the WordPress theme in Photoshop, next week I will be converting the PSD to HTML and in the third week making the site fully functional in WordPress.

Update:

Follow the next two posts where I show you how I code the PSD into HTML/CSS and finally how I take the static HTML templates and create a fully functioning WordPress Theme.

Part 2: Create a Clean and Minimal WordPress Theme with HTML/CSS

Part 3: How To Create Your Own Clean And Minimal WordPress Theme

Finished Design

View large version

Create the canvas

Create a new document in Adobe Photoshop and give the canvas the dimensions of width: 1020px, height: 1404px.

For this design I will be using the 960.gs grid, apply the the grid to your canvas, by using the grid, it will allow you to create a clean, well structured design.

Header

Start by creating the header of the design, using the rectangle tool, draw a box along the top of the canvas with the dimensions – width:1020px, height:15px.

Apply a subtle gradient to the bar, select Layer -> Layer Style -> Blending Options. The gradient colors I used were #353535 to #616060.

Below this, using the line tool, draw a 1px line the width of the canvas, use the color #353535.

Sidebar Navigation/Logo

Next, we will draw the left navigation sidebar, this will contain the logo and an expandable navigation.

Using the font ‘Georgia’ draw the logo, I will be aligning the sidebar to the right side of the third column in from the left of the canvas.

The settings used for the logo are, font: Georgia, color: #353535, tracking: -25px, size: 29pt.

Add the menu in below the logo, again aligning it to the right side of the third column.

The settings I used for the menu are, font: HelveticaNeueLT BoldCond active color: #353535, hover color: #868585, tracking: 100.

The spacing above and below the logo is 60px, the spacing between each menu link should be 15px.

Posts

The post content will be 6 columns in width in total, I wanted each post on the homepage to contain a featured image, post meta data, an excerpt and a couple of tags.

The post image will be width:470px by height:140px, create a new layer behind the image and set the width and height to 480px and 150px respectively. This will form the image border. Select the box layer and select Layer -> Layer Style -> Blending Options -> Stroke.

Give the box a 1px stroke, set out the the box, using the color:#e0e0e0, fill the box with the color:#efefef.

The post meta data will sit 30px below the post image, for the post meta data I will be using the font: ‘Lucinda Grande’, font size: 10px. The dark text color is #35353535 and the light grey text color is #878686.

30px below the meta data insert the post title, the font I want to use for this is Georgia, color #353535, font size: 18pt, tracking -25.

30px below the post title insert the dummy post excerpt, the font settings for this is, font: ‘Lucinda Grande’, font size:12pt, color: #353535.

30px below the post excerpt create a read more button which will will link to the article, and the post tags. The post tags use the same font settings and the post meta data.

The read more button is created with a simple box behind the white capitalized text, the color for this is #4a7278. (Possibly the simplest button in history.)

To complete the post container  and to help separate the posts I will dd a double line below each post.

Using the line tool, draw a 1px line 30px below the read more button. The line should be 480px in width using the color #e8e7e7. Duplicate this line layer and drag the new line layer below the one you just created.

In the sidebar I created a simple search box, the font used is the same as the menu, the search box dimensions are: width: 108px, height: 30px. Using the rectangle tool draw a box out to this dimension, the box should have a fill color of #ffffff and a 1px stoke using the color #878686.

Next draw the search button again using the rectangle tool, draw the box to the dimensions of width: 33px, height: 27px. Fill the button with a solid color, I used #878686. The font used for the ‘GO’ search button is again the same as we used in the menu, only this time the font color is #ffffff.

Footer

The theme footer will consist of two widgetized areas, the footer background will span the width of the users screen and the content will st inline with post list.

Using the rectangle tool, draw a black box the width of your canvas with the dimensions of width: 1020px, height: 240px.

I will simply add a text box, to represtent the soon to be widgetized area, this will sit 3.5 columns in from the right, inline the post. The ‘About’ text box will be 271px in width. The font used for the ‘About’ title will be ‘Georgia’, font size: 18pt, tracking: -25.

The ‘About’ content will use, font: ‘Lucinda Grande’, size: 18pt, tracking: -25, leading, 18pt.

Lastly, in the footer I will add the second widgetized area, this being a ‘Menu’ links list.

The font settings used for this will be exactly the same as the ‘About’ text. The text box width will be 130px in width.

Final Design

This has given you a step by step walk through on the creation of my minimalist WordPress theme, next week, I will slice this design from Photoshop and convert to HTML. Stay tuned!

View large version

Update:

Follow the next two posts where I show you how I code the PSD into HTML/CSS and finally how I take the static HTML templates and create a fully functioning WordPress Theme.

Part 2: Create a Clean and Minimal WordPress Theme with HTML/CSS

Part 3: How To Create Your Own Clean And Minimal WordPress Theme

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

12 Comments

Comments are now closed.