I soon realized the problem was me hanging onto a very antiquated design process of what the mockup was and what production was. Before late 2005, I would have never cracked open my HTML editor without a signed design approval from the client, but why?

The web was originally made for text. Thus, it has a very nice, robust markup system for categorizing that text (a.k.a. HTML/XTHML). Now with browsers that all comply (more or less) to CSS standards, the options for displaying those marked-up items are more robust, but there are still limitations.

Photoshop, on the other hand, has no display limitations. It was made to edit and enhance digital photographs and create amazing visual designs. It can handle anything you layout into it, be it realistic for CSS or not. It was not designed to help you effectively manage layers upon layers of text that would be best handled with global stylings!

This realization led me to the ten step process I’ve termed Rapid Design Comping. The term is a bit of a play on the term Rapid Prototyping which had become very popular at the time this design process emerged for me, which is indeed inspired by, and bears some similarities to Rapid Prototyping.

The following is the overview; we’ll go over each step in detail afterwards:

1. Sketch It: Napkins are great! I usually use the other side of a recycled piece of photocopied paper—the more basic the better. No fine artist skills required! Perk: Using this sketch you can not only get your graphic interface ideas down, but you can already start to think about how the user will interact with your theme design and re-sketch any new ideas or changes accordingly.
2. Start with the Structure: I create an ideal, un-styled semantic XHTML document structure and attach a bare bones CSS sheet to it.
3. Add the Text: Lots of text, the more the better! A sample of actual content is best, but Lorem Ipsum is fine too.
4. CSS Typography: Think of your Typography and assign your decisions to the stylesheet. Review! Don’t like how the formatted text looks in-line? Being separated into columns with fancy background graphics won’t make it any better. Get your text to look nice and read well now before moving on to layout.
5. CSS Layout: Set up the Layout—this is where you’ll see upfront if your layout idea from your sketch will even work. Any problems here and you can re-think the design’s layout into something more realistic (and usually more clean and elegant). Perk: Your client will never see, much less become attached to, a layout that would cause you problems down the road in CSS.
6. CSS Color Scheme: Assign your color scheme basics to the CSS. We’re close to needing Photoshop anyway, so you might as well open it up. I sometimes find it useful to use Photoshop to help me come up with a color scheme and get the hex numbers for the stylesheet.
7. Take a Screenshot: Time for Photoshop! Paste the screenshot of your basic layout into your Photoshop file.
8. Photoshop: Have fun creating the graphical interface elements that will be applied to this layout over your screenshot.
9. Send for Approval: Export a .jpg or .png format of the layout and send it to the client. Perk: If the client has text changes, just make them in your CSS (which will update your text globally—no layer hunting for all your headers or links, etc.) and resnap a screenshot to place back in the Photoshop file with the graphic elements. If they have a graphical interface change, well that’s what Photoshop does best! Make the changes and resend for approval.
10. Production: Here’s the best part; you’re more than halfway there! Slice and export the interface elements you created over (or under) your screenshot and apply them with the background image rules in your CSS. Because you worked directly over a screenshot of the layout, slicing the images to the correct size is easier and you won’t discover that you need to tweak the layout of the CSS as much to accommodate the graphic elements.

© WordPress Theme Design Book

Link: WordPress Theme Design

The second consideration you’ll want to make is about plug-ins and widgets.

Plug-ins are special files that make it easy to add extra functions and features to your WordPress site. Widgets are now built into WordPress2 and are basically things you can put into your WordPress site’s sidebar, regardless of knowing any HTML or PHP.

Plugins and Widgets usually place requirements on a theme: Certain CSS classes will be generated and placed into the site for headers or special text areas. Maybe a template file in the theme might need some specific PHP code to accommodate a plug-in. You’ll need to find out the theme requirements of any plug-in or widget that you plan to use, so that you may accommodate it when you code up your theme.

When you begin working on your design, you’ll want to compare your sketches and design comp(s) against your plug-ins and widgets checklist, and make sure you’re accommodating them.