UI Design Process for Websites

Every time I remember the way I used to start web projects a few years ago, it’s difficult not to think about how wrong and out of place I was. My first and last stage was to start creating the UI Design in Photoshop; no user flows, general research or wireframes were created. I just started frying the meat without any condiments, without even a fork to take it out when ready.

Mistakes are permissible when you don’t have any knowledge as to how to properly start.

But after this, you’ll have no excuse.

Stage 1: The basics

Let’s start with the basics: when you start designing you need to know a few important facts to create a design based on the target. The idea behind user research is to create an experience based on user desires, so before getting started, you need to be clear about the following.

• Who are you designing for?
• What are they expected to achieve or find?
• Do they have another way of achieving that goal?

Those are the basic questions you need to ask, but depending on the project, you might need to research more to understand better your users.

Stage 2: Visual Research

With your users in mind, now you can now start creating your mood board, or reference board as I call it, which is a set of visual references that help you set a design direction for your project.

In this document, you should have visual references for things such as text style, texture, colors, imagery, interface design, icons, illustrations, and interactions. Once it’s set, it will be a lot easier to start designing. The idea behind a Moodboard is not about copying, but about getting inspired by what other designer have done. It’s like looking at other solutions in order to get inspired and create a better UI and UX.

Here you also need to identify what the best grid is for your project so you can have it in mind when wireframing and creating the UI design. Here’s a great article that will help you create a grid for your project.

Stage 3: User Flows

A great user experience depends on how well structured the product is in terms of Information architecture. It’s how users get from point A to point C, that’s what user flows are all about.

A great user flow needs to meet the following criteria:

• The fewer steps possible to take the user from A — B
• Great location for each of the links
• Follow the user patterns for grouping links
• Great hierarchy based on user expectations

If your product complies with those criteria, your users will feel delighted while navigating through your product.

Stage 4: Wireframing

The wireframing stage is the first visual design step where you’ll be creating the visual structure for your design. It’s like creating the frame of a car before adding the interior and exterior elements.

Low Fidelity Wireframes

The very first step of this stage is to create your low fidelity wireframes. I create them with pencil and paper, for me it’s easier because you can create them faster and if there is something you dislike you just need to erase it. Otherwise, if you feel better working on a screen, you can design them in Photoshop or Sketch.

It’s crucial not to take too much time on those sketches. They’re really rough since you just want to mark the basic structure of your design so you can improve it in the next stage, so no need to draw the icons, or have dummy text, just lines. That said, keep in mind that your team will need to review it, so it of course needs to be clear.

Mid Fidelity Wireframes

At this stage, we take the low fidelity wireframes and convert them into more detailed work. I also used to craft them on paper but there are tons of tools you can use to build them, the one I like the most is Balsamiq, but I still prefer using my pencil.

Here are just a few of the great tools you can use to build your wireframes:

• Balsamiq
• Sketch
• Axure
• Wireframes.cc

Remember, we’re getting into more detailed work here, so you need to define your icons, your logo if you have any and you can add some dummy text also.

High Fidelity Wireframes

We’re now on the final step of the wireframing stage. At this point, the idea is simple: you need to take your mid-fidelity wireframes and transform them to a more detailed work, with a more clear structure as close as possible to the final design without colors, images or textures.

To build them I use the same Sketch software as the one I’ll use to create the final stage, but you can use the wireframing tools I mentioned above. Remember to take these elements in mind while working on your high-fidelity wireframes.

• Try to create a work as close as possible to the final stage
• Do not use images, textures or colors
• Remember to take your user research into consideration
• Keep it simple

Stage 5: Pixel Perfect UI Design

After creating the structure, it’s time to work on your UI Design. At this stage, you can use the tools you prefer, Photoshop, Illustrator, Sketch, Adobe XD, I personally prefer using Sketch, as the interface feels more comfortable for me. I actually haven’t used Adobe XD yet, but I have heard really great things about it.

Now that you have your user flows, wireframes and your moodboard, it’s time to add a touch of magic. You can start applying colors, images, and illustrations if relevant. Remember to always keep the direction you created in mind.

Always keep the following recommendation in mind while working on any design project:

• Keep it simple
• Try to be consistent throughout the product
• Remember your elements and text styles need to have hierarchy
• Use patterns the users feel comfortable with
• Try to create a consistent icon set

Article written by Francis — UX/UI Designer Flying Saucer Studio