I take great interest in how other designers and developers get their sites from concept to finish, so that I can make my workflow better — learning new tools, techniques and time management skills to get a site delivered with 100% satisfaction. Some things have changed over the last year or even the last few weeks, and are bound to keep changing rapidly as we usher in a myriad of new devices and ways for people to access the web, and what people expect in terms of user experience. But right now, as it stands, this is how I make a website — from start to finish.

Step one - the objectives

Strictly speaking, step one is actually 2 steps:

• The end user objectives (what the end-user should be able to take away from the site in terms of knowledge, experience etc.)
• The owner objectives (what the site owner needs to achieve from the site — are they looking for a static site just for web presence? Or are they hoping to run a heavy traffic blog? Do they have a design spec in mind?)

These steps are achieved purely through communication with the client. Full disclosure is important — I let my clients know exactly what I plan to do and how I plan to do it at all times. It encourages them to be open with you too, letting you know what they like or hate about the site. If they have a hideous mockup then be gentle, but honest with them. The last thing you want to do is design a bad looking site that matches their mockup, and have it replaced by another a few years down the line made by someone who wasn’t afraid to say no.

As for the user objectives, try talking to anyone, literally anyone who uses the web. Let’s say you like Cars. You don’t just browse the web looking at purely car websites, do you? People browse the web in a natural flow — they’ll take in the things they want to, but along the way they’ll visit lots of sites completely unrelated to them — some of these sites will enchant and interact with the user, while some will just annoy. If your content doesn’t please the end user, your design still can.

Step two - the plan

So you know the aims and goals for this website and you’re ready to roll. Well, not quite. If your charging your client on a per-page basis then you can start digging in, but what about price per hour? There are a number of time tracking tools to help you figure out how long you’ve been working on a project — out of the ones I’ve seen, I’d probably recommend Toggl. It’s simple, quick and intuitive and has a free plan. If you’re feeling generous you could go ahead and talk to your client for hours about their site free of charge — but it isn’t unusual to charge for consults, so bear that in mind.

The plan is put together by shooting ideas at your client and finding the sweet spot that is their dream site (provided, of course, that they don’t insist on having pictures of their cats at the top of every single page). Doodling helps a lot, and there’s a fantastic article on doodling here. Don’t worry if you can’t draw, doodling is something only you should have to understand, and it’s no art.

After looking at my doodles and the ideas I have about design, I start to think about the more technical stuff — the layout, whether or not the site should respond to window resizing, the frameworks I should use etc. Note down every possible feature, framework and plugin you might want to incorporate, from Mootools to 960.gs — you can cut them down later.

Step three - the functionality

This is where I get my hands dirty. I start coding up the site itself, starting with a blank canvas with minimal CSS. Get the basic functionality of the page working. If the site is heavy on design, then put some basic design elements in — but not too much, or it’ll cloud your vision of the content. If you are working from a mockup, then sort out the layout before you put the design elements in.

There are a few tools I use if I need to get the site started really quickly:

• Andy Taylor’s CSS Grid Framework is the best grid layout framework I’ve used so far. It works across platforms and browsers, it’s super intuitive to use and works right down to mobile.
• jQuery is always a good library to include, with thousands of plugins available.
• HTML5 Boilerplate is another great tool, it provides templates for getting started with HTML5 and works right down to IE6.
• Font Squirrel is an amazing site for getting font-face kits for custom CSS fonts.

As for the software I use for designing, developing and testing sites (in order of usage):

• Panic’s Coda is my go-to tool for any kind of coding. It has a built in terminal, reference books and PHP server
• I use MAMP for local testing — it’s got MySQL and Apache out of the box
• For my design work, I use Adobe Photoshop. If you don’t know what it is, you need to use the internet more.

With these tools and some practice, you could make a website in about 10 seconds. That might be a slight exaggeration.

Step four - the sex appeal

So your site works like a dream, but it looks awful! Time to punch in some lovely CSS and some beautifully crafted graphics to make this baby look as good as it’s brain. I use Forrst as my main source of inspiration, and it’s a priceless tool for feedback too (I often have a few Forrst invites to give out, so tweet me if you want one).

In my opinion, it’s important to try to write code in place of images where possible. I made a little webpage a while ago to demonstrate the benefits of code over images. The short story is, code is usually less bytes that images, hence shorter loading times.

Step five - the delivery

Once you’re happy with how the site looks and functions, it’s probably time to show the client that you’re worth their money. Upload it to a server you own, perhaps password protected and give the client the link. While they have the opportunity to steal your code, it’s unlikely that they will. Giving them a live preview rather than screenshots lets them experience all those lovely CSS3 tweeks and effects you spent hours crafting that make the user experience oh-so-delightful.

Once both you and the client are happy with the site, get it on their domain and host. I usually keep in touch with the client for at least a couple of weeks to make sure everything is still how they wanted.

 

While this might not be the best, most efficient or most exciting process for making a site, it’s the one I’ve been using for the longest, and so far works the best for me. I’d love to here about any methods you might use.