How to Create a Typography-based WordPress Theme – Part 1: Design in Photoshop

pi-tutorial-typowonder1
  • 9 Read Time(minutes)
  • 2/5 Difficulty
  • Ps Application

In this tutorial series, we’ll be looking at how we can create a WordPress theme that is made entirely and exclusively of typography. That’s right; we won’t be using any images or graphical elements in this design. My goal is to give you a sense of how typography can be so powerful by itself. To further reflect the power of typography, I’ll be using only one typeface and only monochrome colors. In this part, I’ll take you through the design process in Photoshop. In Part 2, we’ll code it in HTML & CSS, and in Part 3, we’ll convert it into a fully working WordPress theme.

By reading this tutorial series, I assume that you:

  • Are familiar with Adobe Photoshop
  • Have a basic knowledge of HTML and CSS
  • Are comfortable with using WordPress

This article is part of a Tutorial Series.

  • Part 1: Creating the web design in Photoshop
  • Part 2: Coding the web design into HTML and CSS (coming soon…)
  • Part 3: Converting the static HTML to a WordPress theme (coming soon…)

Here’s what we’ll create:

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

The Tutorial

How to Create a Website Design using only Typographical Elements

Step 1

Let’s open up Adobe Photoshop. I’ll be using CS6 in this course, you may use whatever version you are fluent with. [tooltip title="PC: Ctrl+N | MAC: Cmd+N"]Create a new document[/tooltip] with 1200 x 1200 px measures, set the Resolution to 72 ppi, and the Color Mode to RGB. Hit OK to create the new document. How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Pick a light gray Foreground Color, I’ll use #EBEBEB, then [tooltip title="PC: Alt+Backspace | MAC: Option+Delete"]fill[/tooltip] the Background layer with this color.

Step 2

Let’s create some guides, shall we?

I use guides every day, so I mapped the New Guide command to the “Ctrl+Alt+G” hotkey in Photoshop’s Preferences window. You might want to consider doing so.

We need to [tooltip title="View menu - New Guide..."]create guides[/tooltip] to vertical 120px, 660px, 780px and 1080px.  These guides will help us keep our content aligned.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Step 3

Let’s start adding content. We’ll start with the logo, which will be a simple text-based title. The typeset we’ll be using throughout this tutorial is called Lato. Please download the whole set consisting of 10 styles from Fontsquirrel. After installing these fonts, we’re ready to go.

Pick the [tooltip title="T"]Type Tool[/tooltip], click somewhere on the canvas, and type in our website’s title. I’ll go with my original title idea for this project: “Typowonder“. Set the font to Lato Black all caps, font size to 30px and the color to #262626. I also added some minus kerning that will serve as “letter-spacing” later in Part 2.

If you can’t see the Character panel, go up to the Window menu and choose Character.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Step 4

Let’s add the navigation menu. Click on the canvas, and type in the first nav element. I’ll call it Articles. [tooltip title="PC: Ctrl+J | MAC: Cmd+J"]Duplicate[/tooltip] this layer a couple of times, and rename the new instances accordingly. I’ll create 4 more elements: Freebies, Inspiration, Tutorials and Contact. Let’s align these 5 layers with the help of the [tooltip title="V"]Move Tool[/tooltip].

Place the first and last menu item layers afar, then select all 5 layers. With the Move tool selected, look up in the Options bar, where you’ll see a dozen buttons. Click on these two to align the layers by their vertical centers and to distribute them by their vertical centers.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Note that this won’t yield a perfect result, but is accurate enough to look just fine. We can use equal margins when we’ll get to coding in Part 2.

Perfect. The header is now complete. Let’s group all these layers we have and name them accordingly, like Header.

Let’s continue by creating the single post design.

Step 5

Every post will consist of a category description, a title, an author definition, an excerpt and a read more button. Like this.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Let’s add them onto the canvas by using the [tooltip title="T"]Type Tool[/tooltip] – one by one. We’ll start with the categories. Remember, typography is key here to create a legible design, so it’s time to make careful decisions!

Type out the desired category names, then set the following options in the Character panel.

  • Font: Lato Italic
  • Size: 12px
  • Kerning: 100
  • Color: #999999
  • All caps
How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Next up, the title. The titles have to be very eye-catching so the user knows that it is the main heading of a certain post or page. Type your desired title and set the following options in the Characters panel.

  • Font: Lato Bold
  • Size: 30px
  • Kerning: -25
  • Color: #404040
How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Then comes the author declaration. It doesn’t have to be so eye-catching as the title, therefore we need some adjustments.

  • Font: Lato Italic
  • Size: 16px
  • Kerning: 0
  • Color: #999999
How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Time to insert and format the excerpt. This is the introductory text of our post; it can be the first few lines by default, or we can write a different excerpt by ourselves in WordPress. The font face of the excerpt will be the standard body text we’ll be using. This has to be super-legible, as this will be the primary content that our users will read. Feel free to use any random text generator you like, I used the yummy Cupcake Ipsum in my example.

  • Font: Lato Regular
  • Size: 16px
  • Leading: 26px (important!)
  • Color: #666666
How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

And last but not least, the Read More button. Set the following to make it look like mine:

  • Font: Lato Bold
  • Size: 16px
  • Kerning: 20
  • Color: #666
  • Also, in the [tooltip title="Window menu - Paragraph"]Paragraph[/tooltip] panel, set 10px space after each paragraph.
How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Cool. That concludes one post.

Step 6

Let’s group all these layers, and [tooltip title="PC: Ctrl+J | Mac: Cmd+J"]Duplicate[/tooltip] the group. Nudge the new group around 70 pixels below our first post. Take some time to rewrite the categories, title, author and maybe the dummy text. In such simple steps, we have created two posts. That’s enough for the posts, let’s now add a simple pagination to navigate through the posts.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop
  • Font: Lato Italic
  • Size: 20px
  • Color: #999999
  • (The hover state will be underlined)

We are finished with the main content, so we can now move on to the sidebar and create the various widgets.

Step 7

The first widget we’ll create can be a short overview of the theme. Or anything else related. Our widgets’ headers will be styled the following way.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop
  • Font: Lato Bold
  • Size: 16px
  • Color: #737373
  • All caps

The body copy of the widgets should be formatted like this.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop
  • Font: Lato Regular
  • Size: 14px
  • Color: #A6A6A6

Another alternative to create even more contrast between the sidebar and the main content section is to use Lato Light in the body copy of the widgets. Although in that case, we’d have to use a much darker color to compensate the font weight. Feel free to try it out, it looks great, too!

Finally, duplicate this widget a couple of times, and get creative. In my example, you can see two unordered lists next to each other.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop

Step 8

In the last step, we’re adding a simple text-based footer. Add any disclaimer information you’d like, and follow me with the formatting.

How to Create a Typography based WordPress Theme   Part 1: Design in Photoshop
  • Font: Lato Light Italic
  • Size: 12px
  • Kerning: 100
  • Color: #999999
  • All Caps

Conclusion

By using a variety of font types, font sizes, monochrome tones and other standard formatting techniques, we have successfully created a design that is very easy to read and scan through. The main content immediately catches the user’s attention, and the main navigation is very easy to find, too. And we haven’t used any images or any design elements.

Now, of course, if we used some basic graphical elements, for example subtle lines to separate some of the content, the overall picture would be even better! I think we did a very good job with this tutorial, still!

Download

You can download this lesson’s fully complete .PSD after tweeting this article to your friends!

[tweegi-button name="Typowonder"]

Good-bye!

In the next part, you’ll learn how to code this design in semantic HTML5. Stay tuned, see you then!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

7 Responses

Comments

  • ululf01 said on 2013.02.12. at 9:50 Reply

    Thank you very much for these!

  • Gianlu said on 2013.02.14. at 16:17 Reply

    Nice tutorial, and nice experiment ...when the next parts?

    • Szaboka said on 2013.02.14. at 16:19 Reply

      Thanks for your comment, the next part is already on the way. Stay tuned via Twitter so you won't miss it! ;)

  • Dharmesh Dev said on 2013.06.05. at 12:52 Reply

    Again a brilliant tutorial on web layout , I realy like your style of tutorial, keep on posting this good work...

  • web designing courses in Chandigarh said on 2013.07.16. at 11:51 Reply

    Thanks for sharing nice information on typography..I love typography.....I normally use Photoshop and coral draw for typography...Thanks a lot. I have learn much from your website....

Trackbacks

  1. Blog Posting Wordpress How to Create a Typography-based WordPress Theme – Part 1 … | Blog Posting Wordpress
  2. 10 tutoriels pour le Web | Webdesign Mag

Join the Conversation

Captcha: 7 − four =