A Look at My Web Design Workflow

The point of this article isn't to shine the spotlight on me, rather it's to illustrate the process of a web designer. It could any web designer. That includes you, me or someone else.

I really hope this article can give you some motivation to improve your own process, or even help me improve mine.

Every project I work on starts with planning, no matter if it's a client, personal or collaborative side project.

The reason I always start with planning is to get a feel for the work ahead. By doing this first, I get a sense of what the project is really about, not just what I've been told.

Another benefit is I get to gather everything I need in one place, usually Dropbox, before I need it. There's nothing worse than hitting a roadblock because you didn't ask the client for a section of content and now you're waiting around for a week before you can continue.

I really enjoy sketching and drawing, but you know what? I'm not even that good at it. My sketches aren't that high in fidelity, nor do they detail every single part of the website I'm creating. The main purpose of sketching, for me at least, is to get an overall idea going round in my head.

Once that idea is planted firmly in my mind, there's a good day or two before I even think about jumping into Photoshop. This is because letting the idea gestate in my mind allows it to grow and expand on its own and isn't forced.

Sketching is an integral part of my process and is definitely the foundational building block in my web design workflow.

The design is my second favourite part of the process, after sketching of course. The biggest downside I have with designing is the speed at which it takes to produce.

I can usually draw a decent website outline in ten or twenty minutes. Designing one can take hours and sometimes days.

Taking the sketches and deciding what to keep, what goes where and whether or not the overall layout needs adjusting is the first step. Afterwards, it's just a matter of bringing my initial vision to life, visually anyway.

Although I tend to prefer the design work I do nowadays, my career began with nothing more than front-end development. No planning, sketching or designing. Just code. The problem, however, is that code tends to get a little tedious over time. It just doesn't evolve the same way design does, or not as quickly at least.

Over the years I've coded enough sites to realise you need a basic framework to start off with. In a slightly ironic sense, I don't like using Bootstrap because of how much it bloats the code base of small to medium-sized projects.

All modules and components in my HTML/CSS are created as and when they're needed, saving big amounts of unused code. PHP is my favoured back-end language, especially because it's what WordPress is built on, so I use that for anything with logic or advanced functionality.

In terms of anything fancy, I use jQuery and always make sure a suitable PHP fallback is in place.

The testing stage is where I thoroughly check everything to make sure it's all working correctly. That includes anything from dropdown menus and popup modals to contact forms and analytics tracking.

This stage is also where I check the site in all common, modern browsers to check everything works and looks good cross-browser and cross-OS. It's usually a pretty straightforward step in the process as over the years I've learned to make cross-browser compatible code and very rarely do I run into any major, or even minor, bugs.

The last step of testing is to launch, which consists of deploying it all to the production server with DeployBot and doing one last round of testing as soon as everything is live.

My go-to tools for creating a general client or side project site are the following:

Software/Apps:

Hardware:

My process has changed and evolved many times over the years and it definitely wasn't like it is back at the start.

I'm at an almost transitional stage at the moment since I've only been using my MacBook Pro for about two weeks. It'll definitely change over time, so I'll keep my blog updated as it does.

I really hope this article has helped you look at and refine your own process, for the better of course. If you've got any tips on how I could improve my process, I'd love to hear your thoughts in the comments below.