Matthew Knott

How do you come up with unique, effective website designs if you've never had any formal training?

To be honest, this is something I really struggle with. Perhaps it's just me, I'm never 100% happy with any of my designs, but then I see some of the trash out there and think, well, it's not so bad after all. My mother was an artist, and a really good painter, I on the other hand have a head filled with great designs and scenes that I'd love to articulate but just can't. I think this is probably common amongst many people, but how do you solve it?

Inspiration

Firstly, you need inspiration. I've been wanting to redesign this site for a number of months, mainly because I was getting bored. I can imagine some designs, but they all tend to be much of a muchness. By that I mean that there's nothing new, nothing to make you say, wow this is a unique design. So if you can't come up with a unique design, you're going to need inspiration.

I tend to go to alistapart.com and look at the websites of the authors for inspiration. Click around a dozen or so, and make a note of the features you like the most in the following categories:

 

• Layout The general positioning of major elements.
  
• Colours The colour scheme, specifically in regards to layout and fonts.
  
• Details Design features, little details that add to the overall feel.
  
• Features Page elements such as recent posts, tag clouds etc.
  
• Fonts A key area, what fonts do you like for specific areas of your page. Typically this would include, menu, article and header fonts.
  

 

Wire framing

Once you've completed your due diligence, you can move on to wire framing. Grab a piece of paper and a pencil and start sketching out the layout you have in mind. Use a ruler if you're using a grid layout and like me aren't particularly good at sketching straight lines.

When you've got a design on paper that you're happy with, you should transfer it into a vector drawing package like Fireworks or possibly Photoshop, depending on your preference. This will allow you to get mock elements in place and see how your design holds up on the screen with your choice of fonts and colours. If you need some padding text then head over to lipsum.org.

Constructing a template

This is usually the most exciting stage, and possibly the most frustrating. You create a html template based upon your design. I can't offer you too much guidance here, other than these key tips:

• Use CSS for layouts, not tables
• Make sure your fonts can be resized
• Use the correct html markup based on an objects function (See here to understand what I mean)

Dynamic site?

If you're building a dynamic site, in php or asp etc., you need to start identifying common elements and splitting them out. What I mean by common elements is code that repeats and changes little or not at all depending on which page you're on. This includes items such as the header, footer, navigation, dynamic blocks of code such as recent posts. Split these out into include files, I tend to use the format of IncludePurpose.inc.php to make it easy to identify what you're including on your page.

Feedback

Once you've completed your design, host it somewhere and start getting some feedback from people, ask friends but don't be afraid to drop a mail or two to people in the know, people recognised for great layouts, see what they think about your design and collect some constructive feedback. However, at the end of the day this is your design and if you like it, then don't worry, because website design, like any art form, is never universally appreciated, and you shouldn't expect it to be.

Tags: Standards Design css Wire_Frame Wireframe Layout Art Colours Colors Fonts Sketch