WordPress Design: Idea to Photoshop to HTML
WordPress Design: Idea to Photoshop to HTML
Join the DZone community and get the full member experience.Join For Free
Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
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:
- Design Fundamentals for Developers (videos) by Robby Ingebretsen. This is awesome. Robby shares tools and techniques that designers use when designing applications. And don’t worry, no dev pre-requisites for his training.
- Design Basics Index (book) by Jim Krause. For a more in depth look at design fundamentals like composition.
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:
- Most Creative Blog Designs on AlecRios.com
- 45 Most Creative Blog Designs from blogosphere – Let’s get inspired! on the graphic design blog
- 50 Beautiful and Creative Blog Designs and 50 New Beautiful Blog Designs on Smashing Magazine
- 100 Nice and Beautiful Blog Designs on Hongkiat.com
- Blog Designs: 50 of the Most Creative on Standout Blogger
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:
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:
- page – sits directly inside the <body> tag, this represents your entire page and includes the other DIVs:
- 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)
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:
- Premium WordPress Theme Design Part 1 – The Photoshop Mockup
- Premium WordPress Theme Design Part 2 – Html + CSS + WP
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.
Published at DZone with permission of Abby Fichtner , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.