Line25

Create a Typography Based Blog Design in Photoshop

Read the full post

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.

Typo WordPress Theme design

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.

View the Typo WordPress theme concept

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.

Typo WordPress Theme design

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.

View the Typo WordPress theme concept

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.a2area.it lxn

    Another fantastic tutorial Chris! Thank's for sharing!

  • http://www.veden.pl/ Kasia

    Great tutorial. Very simple and effective template.

  • webdesdev

    Nice tutorial but the background look little dull to me :)

  • http://www.richythomas.com Richy Thomas

    Another top notch tutorial from the Big Spoon! Droid-Serif is one of my favorite fonts :)

  • http://irfan3.info/ Irfan Three

    Overall, it's excellent. I love this step-by-step tutorial and the result is amazing. Anyway, i like the simplicity and typography concept. :D

  • http://www.linetoweb.com Raj Mehta

    Nice tut

    :)

  • http://www.theseopackages.com Sara

    Excellent tuts

  • http://www.creativei.in Rakesh

    Great one chris thanks

  • http://www.creativecustard.com Ajay

    Nice, but should have left the horizontal lines in. The final version is boring compared to this screenshot http://line25.com/wp-content/uploads/2011/typo-design/20.jpg

  • http://marialc.com María Lc

    I love the "stay hungry, stay foolish" line. Great tut!

  • http://www.krstatzar.com/ Vladan

    Great as always, like that grid generator.

  • http://www.ralphalmeida.com Ralph Almeida

    great! nice tutorial =)

  • http://www.wedzinski.com Strony www

    Simple and nice.

  • http://www.csakiistvan.hu Steven

    Chris,

    If the PSD file will be public, I'd like to make for Drupal theme.

  • http://www.nonprofitwebsitesolution.com/ Non-profit web sites

    You've got a very interesting one here.Very nice and useful

  • http://www.ellio7.com Elliot

    Hi there,
    I just wanted to say thank you for the awesome tutorial. I never used a base line grid with websites before, only with print. Following your technique, I realised how effective it is to create layouts.

    Once again,
    Thank you!
    Elliot.

  • http://otakiri.net Makara

    nice tutorial Spooner..
    that's very helpfull for me :D
    Thanks

  • http://amicalsofts.com annyi smith

    Hi
    it was very awesum and worthy.thanks
    We use our unsurpassed industry knowledge, superior development processes, and intense focus on quality to serve premium companies worldwide. Providing Six Month Industrial training in Chandigarh and Six month industrial training in Mohali.
    <a href="http://www.amicalsofts.com/">6 months training</a>

  • http://www.cyberdesign.com custom web site design

    I love your ideas. Things look great! Keep the posts coming, for me, please! :)

  • http://cyber-design.yolasite.com/ custom web site design

    I love your ideas, i could use some of these for my site! Keep your ideas coming, i'm a big follower! :)

  • http://110designs.com/ Joseph

    Logo is the most important bit when it comes to marketing for startup businesses. A memorable logo design is one of the most important reasons that people remembers the product and the services you are offering.

    Get 25+ to 110+ Creative Logo Design Concepts at your own price. Join 110designs.com

  • http://czepeda.com Los

    Chris, I'm confused as to how you got that grid onto your photoshop PSD? I went to that website you linked to and all it exported was the CSS and HTML. I thought it would of provided a png or some graphic to overlay on my PSD. After that I found hard to continue the tutorial because of not having a grid. I feel like I missed a step but can't figure it out. Also this is the first tutorial I'm attempting to do from your website. Appreciate the feedback and help.

  • http://jeffsebring.com Jeff Sebring

    These are some good photoshop and design tips, but I'm not sure why someone would do typographic design in Photoshop. Why not work in the browser?

    This just seems like an extra step that is unnecessary.

    People cannot code HTML and CSS really need to learn, or stop calling themselves web designers.

    https://twitter.com/#!/zeldman/status/4818978868

    • Chris M.

      The whole point of a Photoshop mockup is to lay the foundation for the website so that you can show it to a client (or have things clarified to yourself, if there is no client) and then, and only then, you code it into HTML and CSS. If you jump straight to code, you will struggle endless with design changes (especially in CSS). It is better to have all things in place, and the design ready to go, before you start to code, which includes typography (not just layout and background images). So, the process is all-inclusive really.

  • Chris M.

    As for the great Jeffrey Zeldman's tweet… I seriously doubt that he meant never to do wireframing and mockups! He was referring to the reality that you can't be a web designer if you don't code. That is the case, obviously. But there are stages and steps, and any good designer has to have a plan. You don't just start by jumping straight into code (unless you want to spend a lot of time reworking and fidgeting with things). If you have a game plan, in advance, then you will know exactly WHAT to code, how, and where. By doing wireframes and mockups FIRST, you take out the guesswork and the hassle.

    That said, the bottom line is eventually the code, obviously. That is what makes a "real" web designer shine, and that is what Zeldman meant, I would surmise.