Close
Close

Designing a Custom WordPress Theme – Working with a Designer [PART 2]

Today, Amir Helzer from WPML (WordPress Multilingual) shares his experience building a custom WordPress theme.

In my previous post, I talked about what I do when commissioning custom WordPress theme design. It left where the job started. In this post, I’ll talk about the steps that follow – working with the designer towards a complete and functional theme, reviewing it and finalizing the project.

Reviewing prototypes

The first thing the designer needs to send me are prototypes of the website. These are non-functional documents (images). The designer isn’t creating a real web page for that, but rather using a drawing tool. Prototyping is a creative process. It’s when the web designer’s creative abilities get to shine.

Let the designer design, don’t do a review by committee

If you were a graphics designer, you’d have probably built your theme yourself. You’re probably not, so you asked a professional designer to help. The problem is, people don’t know how to review what they get so we start asking for feedback from others. The wife, our friends and colleagues all have something to say. Then, we compile that ‘rejects list’ and send to the designer. What we’ve done right now is make sure the designer can’t do anything.

Graphics design is a creative process and produces subjective results. Any given design will always generate criticism. If our objective is to come up with a design that makes everyone happy, we’ll end up with a pale design that has no character and no impact. Our site will not be memorable and will have no branding.

My suggestion is – leave the creative work to the designer and concentrate my efforts on functionality.

For WPML, these are the issues I raised during the prototyping stage:

  1. Make the top banner smaller and consume less page real estate.
  2. Make the text background white so it’s easier to read.
  3. Add a search box and language selector and integrate them in the top banner.
  4. Make the screen shots in the features page larger.

Create a detailed theme checklist

As the designer is building your theme, take the time to compile a comprehensive checklist of items you’re going to check. When get the first delivery, it’s like a new toy. You’ll want to play with it and show it around. It will be very helpful if you have a checklist to go through for each delivery, so nothing gets left out.

Here is my list:

  • All pages are HTML clean. To verify this, I review the theme in Firefox and use the HTML Validator extension. It displays the validation status of every page viewed so you can tell right away where there’s a problem.
  • Pages look the same in Firefox and IE7. Even if all pages are 100% HTML valid, they might display differently in different browsers (due to different CSS defaults).
    Check the home page (if it’s a the blog’s index or if it’s a special page).
  • Check samples of different templates (check for both enabled and disabled comments).
  • Check a post with and without comments.
  • Check a category page.
  • Check a tag page.
  • Check the search results page (and make sure that the search box is placed where it should).
  • Sidebar supports widgets.
  • Comments are threaded and properly coded (when I click on ‘reply to comment, the JS kicks in and the reply box is displayed under the comment).
  • Use the site navigation and see that I can get to any page.

Just to illustrate what I mean by testing on different browsers, have a look at these two screen shots:

Menu problem on IE7 - incorrect Z order of floating menu

Menu problem on IE7 - incorrect Z order of floating menu


fixed_problem_on_ie7_1

After correcting the Z-order - menus display correctly on IE7 and FF

These two shots were taken from a page that is 100% valid XHTML. No errors and no warnings. Still you can see that the navigation is completely broken on the top image and looks fine on the bottom one. This happened due to a weird IE7 bug which mixes z-order for elements if a page has more than one relative position blocks.

When the designer is ready with a new version the the theme, I review it in two stages. First on their server and then on my. If there are obvious errors, I like to see them immediately on their server before spending time uploading and installing it on my.

Logo graphics

An important part of the design is the logo. The logo that comes with the theme is great, but you also need to use it in other places. I use my logo graphics for business cards, banner ads and even in plugins. For this to work, you need to request the logo in a way that is independent of the rest of the theme design. I ask for the graphics as a high resolution transparent PNG (Portable Network Graphics).

Logo on red backgroundThen, when the designer sends me the logo, I put it on different backgrounds and magnify. This way, any artifacts are easier to spot. For starters, try while, black and red. If your transparent logo shows strange edges, it means that the transparency isn’t right and it needs fixing.

My logo includes the graphics itself and some text. I ask to get them separately, so that I can use either one or the other. Also remember to take note of the font type used in your logo. You’ll need that when creating printed material with it.

Wrap up

A custom theme for your blog will give it an identity. Like any other design project, it has its risks. When defined and managed properly, this can be a fun thing to do and produce excellent results that will bring your blog to the next level.

I hope that these tips help. Tell us about your experience getting custom design work.

This post was written by Amir Helzer, founder of WPML, a mega-plugin that aims to turn WordPress into a fully featured multilingual content management system.

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. My problem would be that I don’t have the creative skills to even design my website in a drawing tool. I can work some code but my creative side died somewhere between 3rd and 4th grade.

    This has been a fascinating read though because it does give me some insight into cleaning up my own code. Perhaps someday I’ll be creative again.

  2. I love the list of the pages to check once your design is up. There are a lot of little pages that people forget sometimes! I’d like to add to check the Author page (when you click on the Author’s name in some themes, it takes you to a list of their articles).

  3. I wish the folks that did test cases and business requirements at my real job were this thorough :)

    One thing to note is that it’s helpful to the designer if you try to quantify “larger” and “smaller” – which you probably did do in your actual communication with the designer. If you start with something that is 500 X 100, “smaller” can mean 450 x 75 or 200 X 100.

    Maybe it’s just me, but I find it easier for me to read text on a light yellow background than on a white background.

  4. I’m not even designing my own theme and I still have problems getting things to display right in IE! I’m surprised that there isn’t a default for CSS between browsers. But still, I would expect more from a program by Microsoft. Gates kind of bombed on IE.

    Maybe you guys could do an article on how to debug a website so it displays the same in Firefox and IE. That would be interesting.

  5. Good stuff for getting your own theme made. Although I am a decent designer, I continually use pre-made themes off the bat but end up editing them so much that I should have just made my own from scratch to begin with!

  6. Jesus says:

    God bless this post. I read the 1st part with concern. This part finally nailed it. Being a designer, I can’t tell you how much it sucks to be stifled. I’ve had past clients hire me based on my portfolio…only to micromanage the design until it looks as crappy as their existing designs. Frustrating to say the least. Here’s the scoop: we know what we’re doing. Hell, our past clients have paid dearly to redesign low converting into high conversion ones. Meanwhile, we watch an learn. If a designer does something a certain way, ask them why. You may learn something.

    Thanks again for the post.

  7. Sorry to nit-pick, but there’s a slight typo in the caption on the second image.

    “After correcting the Z-order – menus display corrctly on IE7 and FF”

    Impressed with the suggestion that clients (from the point of view of a developer) should let the designer to work on the design. Countless times it has been seen that clients aim well, but instead do not end up with a polished solution because they would rather their background pink. (Not that pink is a bad colour, but in most cases isn’t appropriate).

    Nick

  8. Once again, excellent & very helpful post. The previous one was also good. Thanks very much. :) :)

  9. I have never hired a designer before because i felt that it was to hard to explain to someone else about exactly how i wanted my site to look. But reading this helped clear it up. Also i like what Jesus put in his comment about letting the designer do what they want because they know what the are doing and that is what you hired them for.

  10. balaji says:

    wordpress themes are useful, but how google find the variation between wordpress theme and various templates

  11. ThatBloggerBroad says:

    (Um … broken link to previous post? I think it was dated the 17th, not the 16th.)

    Extremely cool tip about testing the logo — I will have to remember that one.

  12. Jennine says:

    thank you so much for adding in the section about the designer. i was a graphic designer for 10 years, and it’s amazing how much people think they know about graphic design and how little they actually do.

    oddly enough i got into blogging because i didn’t want to be a graphic designer any longer, but everyday i still use those skills… every day… i guess it’s inescapable…

  13. Great advice, thanks for this.

  14. Jhay says:

    I’ve always dreamed of having a custom theme for my blog, but the price has always kept that a dream.

    Soon enough though, soon enough I’d be able to afford it.

  15. Eddie Gear says:

    Hi there,

    Useful tips! Thanks for sharing it with us.

    Cheers,
    Eddie Gear

  16. Agent SEO says:

    Great way to go about providing feedback. As a designer it is endlessly frustrating to get your design picked apart with mostly little feedback.

    You’re right that less people should have input…”too many cooks in the kitchen” a lot of times.

  17. Its also good to take opinions of friends and strangers, just like 9rules does.

  18. alone says:

    After reading the article, I realized that I did two big mistake those are seeking opinion from my colleagues not the designer and only test the theme with Firefox. As a result, I got some negative feedbacks, most of them asking for a better design and the way to avoid the bug when using IE for the theme.

    Thanks for the article.

  19. Jason says:

    Speaking of custom, but a little off topic. Is there a WordPress base template, that can be customized, that has a built-in photo gallery or slideshow?

    I currently use a fully customized Moveable Type setup, but for a new site I am planning a photo template would be ideal.

    Thanks Darren

  20. Mu suggestion is….just draw the sketch and give it to the designer and talk to him what you want to do with it………..

  21. It’s like going back to the old days when websites had to comply with both IE and Netscape, the latter being far more unforgiving. Today, when I look at a site on the Mac and then PC, it renders the page completely differently. Firefox is the browser of choice by not the majority, so we’re forced into the IE cul-de-sac.

  22. As a graphic designer, I have one suggestion regarding a logo design. It is a good idea to request a source file for the logo rather than a transparent PNG. Most quality designers will create your logo in vector format, typically in a program like Adobe Illustrator or Corel Draw. Request a source file from the program they used, along with a vector .EPS file, in addition to the high-res PNG.

    My personal standard is to provide all my clients with the following file types: .AI, .EPS, .PDF, .JPG and .PNG. I also provide them with the name of the font I used, even if it was heavily modified, along with the font file. This will allow my client to use the logo as they see fit. If they ever needed to give the logo to another designer or professional print shop, they would be able to do so.

    Just my two cents :)

  23. JustLoveMe says:

    This is something i want to do, but I just want my site cleaned up, borders, text size, link colors, I have done this on some themes but others are not so easy, problem is I don’t want to mess with something that works, Finding the right person is key, I gota see the same theme and what they were able to do with it, http://bambilashes.com/ the images on this site and the colors will be changed and I will surely use your advice, thanks darren, you made some good points

  24. Dean Saliba says:

    I am not very good at all that design malarky so I much prefer to get a template and then just customise it myself instead of creating one from cratch.

  25. aditya says:

    hi i was looking for a template for a gaming site on wordpress , i was looking for should i go for a blogger or a wordpress blog , seems confused the domain is aged and has good pr please suggest , i can download free template for gaming site for wordpress help!!

  26. Blog Design says:

    You are doing great work at problogger. Such detailed article helps people lot. Thanks and keep it going.