Ah, the design process.
From the first day I became a designer, back when I was 17 and taking my first graphic design class, I’ve been trying to find the “Ultimate Design Process™”.
The truth is, there isn’t really a design process that’s foolproof. There isn’t a design process that will work every time.
But after 10+ years of trial and error I’m going to give you the closest thing I have to the elusive design process.
Step 1: How to cure “blank canvas syndrome”
A lot of people struggle with design because of the whole “blank canvas syndrome.”
We see this as a visual problem—you can’t picture how something is going to look in your mind, so you sit there and stare at a blank screen.
But in fact, much of blank canvas syndrome comes from not having a tangible goal you’re working towards.
If you don’t have a goal you’re just making something look good. You’re doing art. And art is hard.
Getting to the heart of the problem is in itself an entire article, if not an entire book, and is something I’ve struggled with for many years.
So before you start a project you need to know why this project exists in the first place.
Sure, they want a new look for the website, but what will that achieve? More opt-ins to an email newsletter? A purchase of a product? A sign up to a trial or demo?
Once you’ve uncovered the true motive for the design project you have something to work towards.
Suddenly you’re not doing an art project. You’re designing. You have a focus.
Step 2: A plug-and-play email that eliminates revisions before design even starts
A design process should always start with the client. Before a project begins you should have as much information on the goal of the project and the visual style you’ll be going in.
When I first started as a designer, I used to present 3 concepts of a home page for every client in different styles for them to choose from.
This was a bad idea for 3 reasons:
- It took an awful lot of time.
- I was focusing on style over substance.
- It was hit or miss as to whether any of them would be suitable for the client.
Now I only ever present 1 concept.
And I’ve never missed the mark in terms of what the client had envisioned. (Knock on wood).
I’ve managed this by baking into my onboarding process a set of ‘homework’ tasks for clients.
When we’re a few weeks from starting I’ll send them the following email:
Hey Name!
I’m really excited to be working with you soon and I hope you are too.The start date for the project is coming up and I have a couple of small tasks for you before we get started. Here’s what I want you to do:
Task 1: Get some inspiration
I’ve set up a Dropmark board for some visual inspiration for the project which you can find here: Over the next few weeks, if you see something you like, whether it’s a website, a photograph, a colour scheme, even a texture just pin the image so we can get a good idea of the kinds of things you’re drawn to.
Task 2: Fill in these short worksheets (it should only take 2 minutes)
I’ve put together a couple of ‘gut tests’ for you. This is just a selection of websites/logos so I can get an idea of what you like and what you don’t.
There’s no right or wrong answers, just take a peek and mark your score based off your first gut instinct.
Task 3: Write any new content
Before we begin I’ll need the text (and images, if possible) that will go on each page of your website. To help you along I’ve put together a content production guide with some handy hints and tips to make sure your content is the best it can be.
You can also use this worksheet or simply type it up in a document. And finally… Don’t forget that I’ll be around to answer any questions or look over any content that you’ve written in between now and when we start so please feel free to email me if you’re unsure about anything. That should be everything, I hope this isn’t too much to take in. Hit reply if you have any questions or concerns and I look forward to seeing what you come up with!
From this, you can see I give them 3 tasks to complete:
1. Gather inspiration. I prefer to use Dropmark rather than Pinterest or anything as it doesn’t require them to create an account and I personally prefer the interface.
2. Complete gut tests. This is an idea I got from Brad Frost in his article Establishing Design Direction.
You simply find a bunch of websites, put them in a table and ask your clients how happy they would be, on a scale of 1-5, if this was their website. This is absolutely golden for finding out what your client actually wants rather than that they think they want.
And you can look at the scores they give and make some conclusions as to any design do’s and dont’s.
3. Write the content. This is the tricky one, getting clients to write their content. I’ve put together a guide to writing content and a worksheet to help them. Then I’ll also send them a reminder closer to the start date (with a Starbucks gift card as extra incentive!).
Getting clients to do some ‘homework’ before the project starts is not only really useful for you, but it also helps establish you as a professional who has a real process (even if it does change with every project.
Giving clients a solid, reliable process can really help establish you as a professional (who’s done this many times before) and also make working with you seamless and enjoyable. (Side note: I actually made a course on giving clients a great experience. If you work with clients and want to wow them, consider signing up here).
Step 3: Indulge. In inspiration.
Some people find it uncomfortable looking for inspiration. It feels like failure.
If I were a real designer, I would be able to just create a masterpiece in my head.
I used to think the same. Especially when I first started out. But I ended up with designs that were ‘bad but I didn’t know why’ or I’d just be staring at a blank screen for hours.
So before starting any design project, I’ll block out some time to completely indulge in design inspiration. I’ll set aside an hour or two and just scour Pinterest, Dribbble or Designspiration with the project brief in mind.
This is really good to get you thinking about the project. It also means that your subconscious mind will start doing the same. This is where your good ideas will naturally stem from.
I know this talk of the subconscious mind sounds a bit airy-fairy. I’m not talking about ‘channeling your inner Yoda’ but you know when people say they just came up with a great idea in the shower or going for a walk?
It’s not because they’re creative geniuses. It’s because their subconscious mind is thinking about the problem when they’re doing mundane tasks and the answer just seems to ‘come to them’.
I’ve even had a design solution come to me in my sleep before (seriously. I was dreaming that I was at my iMac, designing a solution to a problem I’d been having in my sleep).
But this just doesn’t come with a sudden stroke of lightning.
It needs to be in the forefront of your mind anyway. So blocking out some time to completely indulge in the project (without any pressure to actually get anything done aside from quick, crappy sketches) is a great warm up for your brain.
Step 4: Sketch like nobody’s watching
Now that you’ve got your mind in the project—and hopefully taken a break—it’s time to start designing.
Again, I’ll be assuming you’re designing a website, but this can apply to all forms of design.
The first stage is to start sketching. You’ll likely have done a bit of this while scouring the internet for inspiration but if not, now’s the time to set a timer, turn off notifications and hammer out some layouts.
If you’re doing a layout for a home page or something similar, I’d recommend sketching for at least 15 minutes. Get a few variations down on paper as it’s unlikely your first attempt will be the best one.
For smaller projects aim for a minimum of 4 different layouts. If you struggle, go get some more inspiration on Dribbble. Chances are, somebody has solved (or come close to solving) your problem for you.
Remember, sketch quick and sketch ugly. As long as you can understand them that’s all that matters.
Step 5: My “fine artist method” for saving tons of time.
The next step is one of the biggest timesavers I have ever used.
When I first started out, I would start with designing the navigation before moving on to the main hero section and slowly make my way down the page.
But have you seen how an artist works?
They don’t focus on one part of the painting.
Instead, they move around the canvas building it up in layers until they’re happy with the result.
The same is true for web design.
Design the whole page at first and then go into detail in each section later.
So grab your content and choose a font. If you already know the exact font you’ll be using, go for that. If not, Helvetica or Open Sans will do for now.
Then just roughly put in where all the text will go. Place in any confirmed images, or just boxes where you think they might go.
The end result won’t be pretty, but once you have exactly what you’re working with in front of you, it’ll make the next step much easier.
Step 6: Brand the website
Once you’ve got the first draft of the content filled in, it’s time to brand.
If you’re working with an established brand, this part is pretty easy—you want to take their existing fonts and colours and style up your mockup so it fits the brand.
Spend some time deciding on the size and placement of the typography.
Change any colours so they match the brand. By the end of this step you should at least be able to recognise the website as the company’s that you’re designing for.
If, however, you’re not working for an established brand then you’ll be in charge of coming up with font choices and a colour palette so this step will take a bit longer.
It’s time to experiment.
Choosing fonts is a whole article in itself. The same goes for color palettes. So I’ll leave that for a future post but for now I recommend using inspiration websites like Dribbble or Pinterest to give you some ideas.
Step 7: Polish, polish, polish
Once you’ve branded the website as a whole, it’s time to get granular and go into the details.
This is what will make your website stand out and turn from a plain old duckling into a beautiful swan!
I take a very component driven design focus in my work so I find it useful to look at the website as a whole and also the parts that make it up.
So this is where I’ll look at a particular section and brainstorm some ideas to make it not only super slick, but reusable in other areas of the website too.
To do this I essentially repeat steps 3, 4 and 7 over and over again until I come up with something I’m happy with.
For example: If I’m creating a full-width testimonial, I’ll scour Dribbble or Pinterest or my backlog of bookmarked websites and find as many different testimonials as I can.
As I’m doing this I’ll be sketching solutions that could work for this project. Maybe I’ll use a profile picture style from one website and the typography from another to create something unique for me.
Then you can repeat this for all sections of your homepage until you’ve got something that’s branded **and** visually interesting.
Step 8: ZzzzZZzz
The last step is a bit of an anti-climax. I want you to take a break—preferably for at least 1 night before you rush off to send your client your finished piece.
I promise you, you’ll come back to your design with fresh eyes and a fresh perspective.
When you come back you’ll want to note down your first impressions.
What was feeling off about the design? Is it immediately clear what the goal of the page is to do? Is there too much information? Too little?
Then just spend some time tweaking until you’re happy.
But don’t skip this step if you can avoid it. I promise you will find something to change. And it will make your design that much better.
So that’s it! That’s the closest I’ve come to finding the Ultimate Design Process™. I could rewrite this article every 6 months and it’ll probably be slightly different so don’t worry if you don’t follow these steps exactly.
Some will work for you, others might not. But feel free to use this as a starting point and tweak based on your projects.
