Layout and Structure

This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:

Let’s compare the sketch to the finished theme:

As you can see my marked up design remains fundamentally similar to the original concept sketch.

Designing WordPress Themes in Photoshop

We’ve got our sketch, lets open up Photoshop and start designing. Since every design is different, I won’t bother explaining every single choice I made, instead I’m going to give you some tips on laying out your design so that it can be successfully marked up for the web.

1. 1. Work to a grid. I don’t necessarily mean the grid that you get when you type Command+’ but rather working to a structurally sound grid that corresponds to the golden ratio or the rule of thirds. This is because Photoshop has to ’slice’ your resulting design into rectangles and if you keep it in mind while you design, that can be done easily at the end.

In the above picture you can see that I worked to a grid that I created using guides. As my design progressed, the grid got incredibly convoluted but these lines correspond in some way to the layout and skeleton of the site. I’d say this is even more important for minimal designs like my own.



2. 2. The fewer the slices the better. So when you finish your design you’ll slice it into sectors that will then be marked up to xhtml and subsequently php to create your theme. This the last thing you want is a 100 different areas to code separately. If you study the image below you’ll see that I had about 16 ’sliced areas’.

   

   Try not to have more than 20. Why? Because each of these slices are images that have to be downloaded and displayed when someone visits your website. The more images, the slower the load time will be for people with slower connections. Although in Part 5 I’ll show you how to optimize your image based website for speed, it’s better practice to have fewer slices.

3. 3. Make each content area it’s own slice. I can’t stress how important this is! For someone new to XHTML it can be incredibly hard to figure out how to float < div > tags so that content areas remain separate. The laymans solution? Don’t bother! If all your content is contained in < div > ’s for a specific image or ’slice’ you won’t have to.

   Another reason to do this is that if you have a content area that is divided into slices that cut up the content space, you’re going to have a much harder time trying to make the content display correctly over two background images.

4. 4. Work in color proof mode. When I’m designing for the web I’ve learned to work entirely, start to finish, in color proof mode (command+Y for Mac / control+y for Pc). This is because colors in Photoshop can be deceiving and if you aren’t using websafe colors, you need to make sure everything translates as you want it to. I explained this in more detail in a previous article here.
5. 5. Think in 3D.Your design should not be thought of as a flat surface. It has depth and the things that are different elevations should be treated the same. For instance, if you have text or images ontop of content areas in your design, you may want to call on them in the stylesheet instead of leaving ‘flat’ as part of the background images. Thus all stylized text like your header text or social bookmarking links should be images that are displayed with CSS. This is the second and topmost layer of your design with the layout existing below

Got all that? Let’s move on to Part 3 - Photoshop to XHTML in 24 Hours!