Image via Flickr, by Jenni Douglas, under CC

I have been asked on numerous occasions how I set about designing and building a website. Well, I felt that this is the best opportunity to rise to the occasion and share a few simple, but important, steps in my design and development process.

Step One: The Brief and Pre-Design

Right, first things first… once you have the almighty brief firmly in your grip, read that sucker, learn it and read it some more. This brief is the key to the success of everything – from your design to the website itself. Get a firm and solid understanding of what it is that you are setting out to design and build.

Next get those pencils out and start a rough sketch of the layout before you get anywhere near a computer. This is one of the most important steps within the overall process. Time is extremely valuable at this stage and you can’t afford to waste it. Grasping the overall idea will definitely save you time when you sit down to start designing.

Step Two: Inspiration and Design

Cool, so you have your rough sketch and all your ideas are on paper and you feel it’s time to get cracking on that truly awesome design that you have running through your mind. Not so fast cowboy - now is the time to check out what other designers have been up to and become trend savvy.

There is nothing wrong with acquiring some extra “inspiration” - you can never have enough of that. Go out and research some other sites to see what is hot and happening. Try to stay up to date with current online trends. This will ensure that you design and build a site that will last years, not months.

Screenfluent, Webcreme and CSSMania are just a few design inspired showcase websites that will show you what the world of design has been up to.

Step Three: Naming Conventions and Organising Image Files

Ok, so you have spent the hours working attentively on designing and perfecting your concept. Now it is time to get slicing, prepping the layout and images for the building process.

It is easy to simply start naming the images you create with whatever first comes to mind - “header.jpg” sound familiar? Instead of doing this, try stay on top of file naming by breaking these images down into category/type/description and so on.

So for example, rather than naming the image “banner.gif”, try “header-banner-gottaquirk.gif” where GottaQuirk is the description of that specific banner image. This step will help easily group and identify specific objects within your file hierarchy and rumour has it, it could even help your search engine rankings.

Step Four: Separate Files for Different Sections

This vitally important step is especially important with larger sites. It works in the same way CSS files centralise all the style information. The key is to separate all the files for your header, menu, sidebar, footer and so forth. This will in turn help with updating various elements within the website further down the line. It just makes things super simple and easy.

Step Five: Plan for Growth

This should definitely go without saying and all of the points I have listed above apply to this idea. At any point, it may not seem like a huge project, but you never know when things may suddenly just grow. Plan for this well in advance with every aspect of the design and development phase.

With experience all designers develop their own nuanced methods of approaching a project, but I believe the basics should stay the same. I'd love to hear more views on the topic though - what do you consider essential to the design process?