Design Process

The step-by-step process I use to design websites.

The main reason to have one? You’ll hit the mark earlier.

Better to spend your time for a goal than to bumble around waiting for inspiration to hit. When you begin a project, you know where to start.

Here’s mine:

  1. Fill Out the Style Guide with Your Design Plans
  2. Review Progress with Others
  3. Design Higher Fidelity Version
  4. Repeat 2 and 3 until all parties are pleased

Context: Why Mine Works for Me

The design process totally depends on the designer. With no standard educational or accreditation path, we designers make it up along the way.

The environs surrounding a designer influence their process and can also vary wildly. A Web Designer who runs his or her own shop can jump between design and development early and often, where a Designer on a team of 5 may need to follow rigid protocol for iterating with the Dev team.

At my day job, we mostly rely on the waterfall method to get sites built – one department finishes their work, then passes it on to the next. I believe a more circular, conversational, agile, approach is ideal.

Unsaid Prerequisites Before Starting the Process:

Step 1. Fill Out the Style Guide

Write Down the Objectives:

Summarize the project goals you are to solve with design in 3-4 main points. Jot them into the style guide. Skip the solutions for now.

Example: The target audience is local mothers and fathers. The design should speak to them by ____. The client works closely with local charities. The should design tells users that story by ______.

Write Down Probable Solutions:

Take some actual time to sit there and consider what you just wrote, then fill in the blanks. Nothing elaborate, just a couple sentences each. I like this high-level step because it sets the imagination to design-mode.

Also, it sets a focus for the project. It’s easy, and totally pragmatic, to go off in different directions and explore weird tangents while designing because you never know what solutions are out there without veering from the path, but you can get lost. Those 3-4 bullet points will remind you why you’re here and what you need to do.

Example: The target audience is local mothers and fathers. The design speaks to them by featuring imagery of happy moms and dads, badges from companies they know and trust, and a warm color palette. The client works closely with local charities. The design tells users that story by featuring a “How We Help” page and a callout on the homepage.

Do Random Research:

With the goals of the design in mind, brainstorm broadly without judgement. I check my collections of clipped solutions in evernote, recent bookmarked designs, and past work to find ideas that relate to this project. The relevant ones get dropped into a style guide for now.

Fill It In to Fill It In:

The style guide can change. Making a choice and starting somewhere will help move project along.

Tippers: Dribbble is great for finding snappy colors that work together. To find what font(s) will work for this client, I consult my favorite type resources to narrow some candidates. Then background patterns.

Step 2. Review Progress with Others

You’ve chosen a direction. Now get some perspective to see if the style guide will actually work for this client. For me, it’s a check-in with the design team. They know our clients and our technical constraints. They’ll point out anything glaring. Maybe for you, it’s running it by the client or the CEO.

Step 3. Design It

Vision stage

This is the intuitive, gut stage and the hardest to write about.

Personally, I like starting at the header or footer to arrange the standard items. It can be an easy win. Early wins often snowball into beautiful momentum. While working on the header, I may get an idea for another section, so I’ll tend to manifesting that idea. Whatever has the most steam, excitement, and promise, I follow. Sometimes that means focusing intently on the header and finishing it until it works, and sometimes it means scrambling from section to section to section to find a piece of promise in the corner of the reviews block.

The goal here is a solution that can be seen or at least explained. You should be able to present your vision using the design itself and an explanation to fill in the holes.

Check In Again

Same reasons. Get out of your head and make sure you’re on the right track.

Polish with Design Principles

Here, we clean up the rough vision by reviewing and applying your design principles. If you don’t have any yet, take a look at what others are using.

Check In Again

Still same reasons, but we can get more specific. Have your checker check it all. The next one to peer deeply at it may be the client, so we expect scrutiny.

Boom. Click the Send Button.

Onto the design presentation and receiving feedback!