The tutorial posts where I go through the process of creating a complete WordPress theme from Photoshop concept right through to coding the template files always go down well, so let’s start with another tutorial series based on my latest WordPress theme design. Follow this tutorial where we’ll lay out a typography based blog design over a strict underlying grid, then stay tuned for the next tutorials where we’ll build the concept into a HTML5 prototype then finish it off as a fully working WordPress theme.
The WordPress theme we’ll be creating this time is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it will be based on a strict grid to balance the design and tie everything together.
Before getting started with our design we need to set up a grid system in our Photoshop document. I have a ready made grid document using 12 columns from the handy generator at grid.mindplay.dk. I also created a pattern overlay to lay out a 24px baseline grid.
Fill the background layer of the Photoshop document with a light grey, then add a couple of percent of Noise (Filter > Noise > Add Noise). Change the settings to Gaussian and Monochromatic.
Save one of the handy seamless paper texture files from LostandTaken and open it up into the website design document. Position it in the top left corner.
Desaturate the texture, change the blending mode to Darken then adjust the levels to brighten up the image to match the lighter grey background, allowing the details of the texture to add to the noise of the background.
This design is going to be entirely made up of typographic elements, including the logo. We’ll be using Google Web Fonts later in the series so for now we can mock up the layout using the chosen typeface, which in this case is Droid Serif.
Lay out the navigation links according to the grid columns and baseline. Number each link for a touch of style, then adjust the colour of the number so it’s not as prominent.
Leave plenty of white space before moving onto the main content. The heading of the blog post is an important element so choose a larger font size.
Drag a text box to create a passage of dummy text. 14pt makes for a comfortable size for body text, with 24pt leading to match the baseline.
Any links in the document should be easily identified, so mock these up with a blue fill, italic styling and an underline.
Group all the items that make up the first sample blog post, then duplicate the group and align the post underneath the original leaving a few lines of white space between them.
At the bottom of the document add a couple of links to previous and next pages. Use the same link styling but increase the size to give these elements more prominence.
Begin adding the sidebar content in line with the main content using the same baseline grid lines. The sidebar headers aren’t as important, so a smaller font size can be used to continue the hierarchy of the page elements.
Some lists of links can be doubled up next to each other while adhering to the grid layout, while others will span over multiple columns.
Fill a rectangle to create a search box element. The search feature is one of the only elements where styling beyond the basic typography is required to make it easily recognisable.
Double click the search box layer to add some Layer Styles. Add a subtle Inner Shadow, a light grey Color Overlay and a thin 1px grey stroke.
Align the label text inside the search box with the baseline grid. This will imbalance the vertical margins so we’ll have to break the grid to cut the search box down to size for the spacing to match.
To the right of the search bar add a stroke to a small circle to create a magnifying glass icon. Finish it off with a 5px diagonal line to represent the handle.
When viewed without the baseline grid the search bar looks perfectly balanced. Elements like buttons and search bars often need sizing outside of the grid to allow the enclosed text to remain on the grid lines and still appear balanced.
Finish off the page with a black border along the bottom edge. Fill a selection that matches the height of two baseline grid lines. Change the blending mode to Overlay.
Add some small elements to the footer area to finish off the overall page design.
Despite only using typographic elements without any kind of interface or images the page still appears interesting and inviting thanks to the baseline grid that ties everything together.
Without the gridlines the page elements balance nicely to give a well laid out design with plenty of white space around each section. The hierarchy of the titles and headings help draw the users eye to the most important information, while the blue links immediately show what’s clickable.