The Design Process

I thought it might be nice to pass on a few hints, tips and my ideologies about designing and building websites that I’ve either picked up or developed over the past year or so. I won’t be going into super detail here so if you have any questions feel free to pop me and email.

Stage 1 - The Design Process

Research and Inspiration - I’ll often have a glance over at cssremix or cssmania to have a glance at what’s going on around me and generally keep an eye open for emerging trends (or ones that are dying out). I try to avoid taking layout or colour inspiration from any sites on here though, I’ve tried that in the past and just ended up cloning a site I liked (and i have no urge to become one of those designers). Instead I think its a good idea to take your inspiration from a sideways perspective, finding an idea and concept from something as easy as mind-mapping your thoughts. This will often take you down the ‘road-less-traveled’ with your ideas and you’ll probably develop a much stronger design concept. Websites like designyoutrust often get the creativity flowing by taking you out of a ‘web’ mind set and getting you thinking about the overall image of what you want to create.

Embrace what you like, and fight for it too! - There’s no harm in designing as you design and this means you bring a certain set of values, styles and methods to the table that no-one else can. Removing all trace of what makes something you will ultimately result in something generic. If you believe that what your doing is right then fight for it. I’m not saying be a stubborn mule about everything, there is always room for compromise and sometimes a new perspective and input can be really useful too. Choose your battles and give reasons for your choices.

“A camel is a horse, designed by committee” - Involve a maximum of 2-3 people on the design process if you can. Being a visual medium everyone has an opinion on how things should look, thus the more opinions, the more convoluted everything can become. If you receive criticism, encourage it to be constructive and detailed. Its much better to hear ” I’m not sure about the image it conveys as I think its too informal” than “It doesn’t feel right”.

Stage 2 - Creating a design

Wire framing - I didn’t used to do this that often, and, to be honest, I found when I did it made the whole project a lot easier. By simply setting out areas where things will go on each page first, you can save yourself hours later on.

Design the homepage last - Yep, thats right. I’ve found, especially with larger projects, that the homepage is the most organic, and ultimately the hardest to get right. As ideas for the site, importance of features and layouts change (they all happen) the homepage will look a million miles from what you had planned by the time the site goes live. I know this from experience of re-designing home pages several times. Save yourself some time and do it last

Write down your hex-codes - Seems obvious but if you keep them all together (in a book, online, wherever) you’ll save yourself the bother of picking through the css at a later date looking for them. While I’m on this, its always a good idea to write down some variants on your main tones, these can come in really handy later on.

Stage 3 - Coding

Comments, the more the better - Make sure you comment everything clearly with start and end comments. This lets you, and anyone else who looks at your code, understand it and know where they are.

Keep a clear class - Using “clear:both” to clear floated elements is fundamental to css design and by keeping a class such as “.clear { clear:both:}” in your style sheet you can apply it wherever its needed, to whatever element.

Hot Headings - Recently I’ve started using h1, h2, h3 etc.. tags in a slightly different way. I still keep then semantically correct on the page, but in the css iIve given them zero margins and padding and defined the text size to something standard across the board (say 18px). Then I style them using different styles via classes. This gives you much more control over each heading, but keeps the structure the same.

Outline:none - If your like me and you don’t like the little dotted line that appears in firefox when you click an image, add “outline:none;” to your “a” styles. This will remove it.

I hope this is helpful :)