Great visual designers understand that creating well-designed websites is much more than just aesthetics. Besides slick visuals, great design is actually about creating a website that is also functional and thus creates a good user experience. There’s a process or approach that needs to be followed to make sure both form and function are taken into account. There are so many web design processes out there, but I’m going to specifically share my internal design process that has been working really well for me.
There are essentially four main design stages:
Research
At this discovery phase, I usually work with many stakeholders, some of which are user researchers and business analysts. The goals of this initial step are to get as much information as possible and to understand the bigger picture of the project. Typically some kind of metrics or data about the project is provided to get me started, but if not, I would at least research the competitors to get general ideas of what has been done and to see what design improvements I can offer.
Tools I frequently use: Google, Google Analytics
Wireframes
Depending on the complexity of the project, I either start sketching on a piece of paper to get some rough ideas of what I’m going to build or create low- and high-fidelity wireframes if the project is too complex to be shown on sketches. Usually, simple sketches work for a project that has a few pages. A larger and more complex project requires wireframes, so there’s no guessing work when you’re moving on to the next step, which is visual design.
Creating wireframes in and of itself is an iterative process that takes the information from the research and puts it in the form of what I call a web skeleton–essentially the bones of the website. In a larger organization, the UX team would usually handle this part in collaboration with the design team.
Tools I frequently use: Balsamiq, Sketch, Axure, InDesign, Illustrator
Visual Design
My favorite part is when I can start bringing in colors, pictures, and typography and start putting skin onto the wires. During the design exploration, I typically come up with two or three alternative options and start honing in the design based on the feedback from the stakeholders to come up with the final design. I also ask for client participants to choose some design options they prefer, so they feel that they are also invested in the success of the design.
When there are complex inter-activities involved in the design, I build a quick prototype to show how certain elements work in the design and how the navigation works so it can be better understood. The more it looks like the final design, the better chance of getting client’s approval.
Usually, it takes two or three rounds of revision before the design is approved. Once the design is finalized, it is time to hand off the design mocks and assets to developers so they can start building the site. I grant the developers access to Invision, where I’ve been sharing the final design so that they can have snippets to font and color specs. When giving design instructions, it’s important to think about developers’ terms so they can understand clearly what it is you’re trying to achieve.
Tools I frequently use: Photoshop, Illustrator, Sketch, Invision, Marvel
Launch
A few days before the launch, designers will be working alongside developers to make sure the design is built according to the given specs. Once the site is launched, it’s time to perform Quality Assurance (QA) on the site and backlog any bugs or missing items.
Tools I frequently use: DevTools (Chrome), Web Developer (Firefox)
There you have it, the four stages of design process needed to build a great website design (that also works!). Hopefully, by now, you have some general ideas of what a web design process involves. The process will be different for each designer and each project, but the general ideas are similar.
