If “Layout, YOU SO NASTY” is the first thought that occurs to you in the morning, aside from “OMGWTF NUKES” and “Mmm…donuts”, change should probably be on the horizon, because if it isn’t, a chupacabra might be, and in the history of the world, there has never been anything more unforgiving. Except, of course, an incomplete redesign.

The first place to start is the beginning

Make a comprehensive list of the things you dislike about your design. The easiest way to do this is to sketch some cool things you’d like to put into your design that you currently cannot, because your spleen dictates your creative judgment. First, get an idea for a layout. Think about boxes, about circles, about octagons; think about anything that will get your mind to orient itself around an idea or an image. If you’re having trouble coming up with something spur your thoughts, take a walk outside and observe nature — if you’re so tired of this that movement is beyond you, observe your favorite sites. Remember that the difference between theft and inspiration is the way that you interpret a design element. Do not cross the line; your creativity, although recently revived from a coma at this stage, will hate you.

If you can’t deduce that something is drastically wrong with your website, start with little things. Changing the colors and icons you use can refresh a tired old website; even better, the experts suggest realigning. Move your website around and use the space you gain to introduce new elements, be they illustrations or new content areas. It’s like feng shui for your website, and it will all work out, I promise.

Molding the perfect website

Once you have an idea for a design, don’t hesitate to start working with it. Think about how each page will vary from the one before it, whether parent pages will look different from child pages, or whether you want certain elements appearing on every page. When your sketches start to look promising, and your colors inspire you, start making your design concrete. Open up Photoshop or Illustrator and create mockups of your site; show drafts to the world and get critiques. It’ll be a pain trying to fix your design drastically later, so take advantage of your preparation time.

When you’re ready to turn your mockup into a live version, start by styling the text first. No matter how gorgeous your images are (unless you’re creating a portfolio site), your text is going to add some humanity to your page because anyone can write; not everyone can design. Gradually add the images; keep your mockup open so that you can see how you’re progressing.

If you make a mistake, work with it; some mistakes are beneficial. No matter which path you take, good things always come out of effort, so work hard for the design you want. It might end up being better for you

Architecture

Having just redesigned my site (I don’t listen to the masters as well as I should), I know that cleaning up the code I used was the hardest task I had. If you’re using a CMS like Movable Type, WordPress, or TextPattern, make sure you have a list of the various tags you can use. While a template can be split up into numerous files, most of the code there is fluff. Remember that if you’re designing a site yourself, you won’t need to use the default template or styles. In fact, scary as it might sound, you can simply strip it and move on your way. Here’s how you do it with minimum casualties:

In a plain Notepad (or preferred text-editor), make a list of essential template tags — body tags, comment tags, RSS feed tags — you can strip these directly from the default template, if you’d like. Even if you’ve never worked with one of the major programs, know that tags are usually named to be easily recognized and will sometimes have the program’s name as a prefix. For example, to make an entry title in Movable Type, use the following:

<MTEntryTitle>

The success of a site’s skeleton is necessary for a good design. If you fail to use semantics or valid code, you’ll find bits of your site breaking and the whole redesign will be that much more excruciating. Keep it simple, and save yourself the pain of watching your redesign flounder.

Design

As a rule of thumb, I always design my site in a static location elsewhere with about four different pages: home, an interior/post, a random inner page, and my archives. If you follow my method, all your bases will be covered; there’s no need to fret about how some of your pages will look because technically, you’ve already designed the canvas that you will create them on.

Fonts

One of the challenges ‘redesigners’ face is the age-old question of how to balance images and text. Text on its own is very beautiful; if you’re ever played around with typography, you’ll know that fonts can be a lot of fun when you treat them right. The first rule of web typography is to deviate; don’t worry about Arial, Times New Roman, or Courier. Look for fonts that speak to you. If you’re worried about paying for something like Helvetica (or its many children), many similar imitation fonts are available for free. You’ll find the widest variety in serif fonts, which are arguably the most beautiful to style with. Even if you use sans-serifs exhaustively on your redesign, serifs can help liven any page. Several news sites (and blogs, if you’d like something in the same hemisphere as your redesign) prefer serifs for headings to attract attention, and then sans-serifs for body text to preserve readability. The most important thing to remember is that any fonts list you find is not finite. While I haven’t attempted it myself (the wendigos tell me not to), designing a font can tremendously personalize your page, and help you to branch out of your redesigner’s clique.

Always remember that any font you use, unless you utilize sIFR (Scalable Inman Flash Replacement), may not be available to everyone. Since you can’t force font usage on the general public (darn!), be sure to set your CSS like this:

font-family: Myriad, Helvetica, Arial, sans-serif;

… just so there’s always a back-up!

Grids

Grids date back to the Golden Ratio/Rectangle phenomenon — the most appealing geometric figure to the human eye. If artists, carpenters, and sculptors — even mathematicians — could style things with these ratios, why couldn’t web designers? Grids are not essential to a successful redesign, but they can certainly be used to refresh a tired website. If you’re interested, Mark Boulton documented his process very well; give it a read!

Message

Arguably the most important part of any successful redesign is your “message”. Your site is a visual representation of yourself online. Every bit of text that you write, every image you make is your creation. Be proud; reflect for a minute or two. And then think. What does your site convey to people? To yourself? Is it clean? Grungy? Minimalistic? Professional? A site can convey so much more than you often give it credit for. People can be enthralled by beauty or turned away by clutter; it could be the reverse as well. If you feel as if your site is truly something that you can appreciate, you’re done; you’ve just completed your own redesign. Now the design-raptors will have to find someone else to hound!