WordPress Design: Idea to Photoshop to HTML

Hacker News LinkedIn Google+ Facebook Twitter by Abby Fichtner

This is the 2nd post in my series on Designing WordPress Blogs From Scratch.

Design Fundamentals

Ok, so you’ve got an idea. You think you might want to design your own custom blog around it because, as Alec Rios says,

“What a boring world it would be if every blogger simply kept the default WordPress theme. There is absolutely no excuse for this. There are too many free and unique themes available. But these days, you need to do even more than that to stand out. You have to go the extra mile, tapping into your hidden well of creativity, to set yourself apart from the other 100 million blogs out there.”

Excellent!  You want to be sure to start things off with a good understanding of design fundamentals. I’m still learning here, but a couple of resources that I found totally invaluable for grokking good design are:

If you think design is all subjective and just about making things pretty then I think you’ll be pleasantly surprised and find the design process much more satisfying as it demystifies a lot of why some things look “good” while others, well… don’t.

I also like seeing what other people are doing for inspiration and ideas. If you search you can find some great lists, such as:

Sketch Sketch Sketch

I think it’s helpful to think agile here (I know, shocker!). Start small with what you do know and then add on as you learn more by playing with the design. So, for example, I started with just a handful of ideas, like:

  • Have the main page highlight the most recent post, with earlier posts as short, easily scannable summaries.
  • Have a very prominent hacker chick down the side.
  • Have a big footer where I can put a bunch of information to keep the main part of the page from getting too busy.
  • Have ways to help people connect with me like the twitter feed, top commentors, and information about events.

So, I started with some rough sketches on paper. As you can see from my sketch below, you totally do not need to know how to draw for this, stick figures are perfectly acceptable placeholders! Next, I pulled it into Photoshop where I realized it was way too wide (tip: you probably want it under 1000 pixels).  And then, I just tried things in every combination I could think of. Even when I thought I was happy with it, I’d try another variation. Photoshop is awesome for this – it’s so easy to move things around and make multiple copies for comparison.

Some of the bigger things I aimed for were keeping related content grouped together with plenty of whitespace around the groups to make it (hopefully!) easy for readers to find things. And simplify, simplify, simplify.

“It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.”
– Antoine de Saint-Exupéry, 1939

Having a big footer helped because I could move a lot there. Also, reducing the # of different fonts, font sizes, and the number of colors. There are great online tools like Kuler & Color Scheme Designer to help you design a coherent color scheme.

I wish I’d kept some of my earlier Photoshop layouts as this went through a number of iterations and color schemes. But here’s a glimpse at the evolution from initial sketch through to the (later) Photoshop mockups. The side bar moved, the footer went through a lot of variations, the colors got a lot of tweaking, and I added mouse-overs to make it more interactive:

Sketch for The Hacker Chick Blog Hacker Chick Blog Comp 2   Hacker Chick Blog Comp 2 Hacker Chick Blog Comp 3

Creating WordPress-Friendly HTML

Next, I converted my design into HTML/CSS. This let me make sure I was happy with how it looked in all the various browsers (tip: Expression Web SuperPreview is a great, free tool to help with this) before converting it to WordPress.

The trick here is that you want to layout your HTML/CSS in a way that’s going to easily convert into the standard WordPress layout. The default WordPress template (which we’ll use as a guideline) breaks a blog design into the following DIVs:

WordPress default div layout

  • page – sits directly inside the <body> tag, this represents your entire page and includes the other DIVs:
    • header
    • content – contains the main content on the page:
      • entry – e.g., an individual post. You might have multiple entry divs (blog posts) on a single page
      • sidebar (could be on either side)
    • footer

So, when you convert your Photoshop comp into HTML, create a single index.html with these divs (and any additional ones you might want) and a styles.css that holds your styles.

Design Reviver already has an awesome tutorial on how to both create your WordPress composition in Photoshop and convert it into WordPress-friendly HTML/CSS files. I highly recommend you go through these:

Part 1 does an excellent job of showing you cool tricks for creating your comp in Photoshop. Part 2 then walks you step by step through converting that design into HTML/CSS in a WordPress-friendly way.

The only caveat is that final step – the one to convert the HTML into a WordPress template — reminds me of Step #2 in this S. Harris comic.

Then a miracle occurs…

In the author’s defense, he did say the tutorial assumes some WordPress knowledge.  BUT, I found I could make it all the way down to that final step (Step #11 in Part 2 of the tutorial) without any more then the above DIV knowledge.

So, my recommendation – go through those tuts, but if you can’t make it through that last step, no worries – come back here and I’ll have my next post explain that in a bit more detail.