Whilst having our kitchen re-fitted over the past couple of weeks (the picture above is not ours as I have already been asked!), it got me thinking about the similarities in building a physical structure like a kitchen, and building a website. Apart from getting paint and sawdust everywhere, the process is much in the same.
Planning.
You wouldn’t just go and build a whole kitchen in a day to see if it looked okay, that would be a colossal waste of time and resources, as not only will it look horrendous, you will most likely hate it and have to start all over again. You haven’t decided on any colours and materials, whether you will need to buy certain appliances, or solve some spacing issues by reworking certain areas. The same applies to a website. You need to do some planning…
Will anyone else need to be involved?
If you bought a gas cooker you wouldn’t just bodge it yourself and hope for the best, you need a registered gasman to fit it. So if you need an expert backend developer to work on the project you’ll need to hire someone. Assuming you already have a detailed brief you’ll need to get the developer involved from the start to quote for work and book their time accordingly.
The ideas phase.
Much like you’d go to B&Q and look around their showrooms, you’ll need to research other websites for inspiration. What kind of style is going to work best – Retro? Clean? Modern? So for your website, come up with some moodboards which show colours, fonts, textures and patterns.
Wireframes.
So you’ve decided what colour walls you want and whether you’re having wooden floors or not, now you need to work out where everything is going to go before you start hacking away with your tools.This is where sketches and diagrams come in.
Rather than just diving straight into the design phase, you need to draw up some wireframes which show where all the features will go and how everything will flow. I like to think of main functions of a website, much like the appliances in a kitchen. Every website / kitchen needs them, but how they look is up to you as long as they function the way you’d expect them to.
The Design.
Now that you know where all your cupboards and appliances are going, you can get down to making it look sexy. Do you want smooth glossy cupboards, or nice wooden detailed ones? Real wood or laminate? This is where you start putting together your mock ups for the site and working out the little details such as buttons, links, any jQuery sliders, etc.
The Build – Front End.
You’ve got the design worked out perfectly, now you need to get your tools out and start building. But don’t just start in one corner and work your way outwards, you’ll eventually meet a corner and discover nothing fits. If you do one thing at a time, you’ll avoid any errors which are hard to go back and fix.
So gut the kitchen and put the floor down, i.e. start with just a plain HTML file, and put all the plain content in. Then start putting in the div’s and h1, h2 tags with no styling yet and check everything is valid. Then you can start styling everything in your CSS file. Keep checking everything in a browser regularly to avoid having to go back and find a tiny error later on.
The Build – Backend.
Once you’ve got your main kitchen units in, the worktops are on, you can invite the plumber and gasman round to fit the appliances in. So this is where your backend developer comes in and implements any custom modifications.
The finishing touches.
Now you can put in all your fixtures and fittings, put the last coat of paint on and move any smaller bits around and move all your stuff in i.e. start entering content. You then get everything checked over and come up with a list of minor changes that may need doing. Such as changing images, moving some padding a pixel or two, or updating some text.
Your kitchen website will then be in it’s finished state and ready to use! And hopefully no one will suddenly decide they want spotlights on the ceiling.