Twitter Google+ Flickr Pinterest
Comments Closed

This Freelancers Web Design Process


In the last few months I have happily been quite busy. The lastest site has gone live and before I embark on my next big project, whilst finishing some of those odd jobs still lurking, I wanted to take the time to document my design process for those interested.

Look at these as a series of  ‘modular’ steps that can be changed around to suit the project. On some projects we may miss the wireframes (if it’s a simple site) and some clients  might just want a photoshop design and build it themselves. But this is the process – for the smallest to the biggest project I would be game to take on.

1. The Quote
Usually potential clients will email me that they need a website I then ask some detailed questions to see what the project involves. If it’s a simple site with nothing too crazy, I will go ahead and do a free no obligations quote.

If the project is bigger or complex I’ll recommend that I write up a scope document (for a fee suited to the size of the website) and work with the client to figure out what we’ll create and what outside resources, such as programmers, branding people, content writers and barristas that we might need to bring in.

2. Scope Document (Optional).
Since the site is clearly bigger than the standard five pager and may need some specialized people or functionality the client and myself will go through a briefing on the website’s needs and design requirements and any future updates that we will need to be aware of. I then go away and research the technical requirements and layout possibilities, pretty much anything else needed to accurately estimate the time it will take to deliver the website they need. The client will then get a scope document going over the main items to be aware of, an initial wireframe and a detailed quote to make the project happen.

3. Project Briefing
I would love to take on any website and say: “Leave it all to me, in one month you will have a fully functioning website with little to no input from you!” but this is simply not true. I need to know about the clients brand, their goals for the site and their business, how they expect to use the site in the future and what they should expect from me. I need to know about their customers and what they want. We need to nail down the site structure now before any more time is spent on creating a website without a clear goal. This is what we go over in the briefing. A good briefing is critical for informing me so that I can create the best website possible on time and within budget.

This usually only takes an hour but is a pretty exhaustive exercise as I will keep on going back to all those notes throughout the entire build.

4. Wireframes
To start the design  I will research other websites that are similar to what is needed for the job. I also look at websites the main user groups use and take notes on how those people may browse and approach websites.

Using paper and pencil I first sketch up a number of wireframes (these are basic pencil line drawings of the website). I think about buying decisions, questions and information people may need or consider at various stages of browsing the website. The wireframes are scanned  and put into a document where I add comments  and explain the layout decisions. This is then presented to the client for approval.

For me this stage was introduced to reduce the amount of time spent in the aesthetic phase of the project. Aesthetic is very important but if you are making layout decisions while trying to make the site look good, things can get lost in the fray and time is often wasted.

5. The Aesthetic.
Once the wireframes are approved I move into the aesthetic.  The aesthetic phase is my favorite part! I get to go nuts co-ordinating colours and creating an appropriate ‘mood’. In this phase I create sample pages and the ‘look’ of the final website. I use Photoshop to do this and will often present the aesthetic of the home page and one other page when needed.

6. The Build
It’s here I get to  play with CSS and HTML – that’s geek speak for the programming language that is used to make the website look like the Photoshop one, except in a browser with real text not just a bunch of images. It is here that I also set up the site structure and all of its links and clever programming stuff.

I primarily integrate my sites with the content management software called WordPress. But have integrated designs into Joomla & Virtuemart, Silverstripe and Drupal to name a few. I have used many other in house content management systems so can get my head around most  fairly quickly.

7. Content and Formatting
Once I have the structure and aesthetic working on a test site the content needs to be added. Content adding is often a combined effort of the client and myself.

I will then blitz through testing on the various web browsers that people are using to ensure everything looks right and works as it should in each browser, as well as doing a little extra formatting to make everything look as good as I can get it!

Another one of my favorite parts, the finishing means going live close at hand which is very exciting.

8. Going Live
Different sites go live at different stages. Some when they are completely finished, some are a blog with a shop to come later, others are re-designs so the releases are slowly implemented in order to not surprise too many visitors or search engines! Others need to be live ASAP so we release when it’s good enough to run and continue working on while it’s live to get it perfect.

All done!

Give or take thats my process! Its pretty thorough and works for me, however nothing is set in stone, if it makes sense to approach something in a different way then I will.

Comments are closed.