Design few, Implement few is the right workflow for designers and front-end developers!

I have this question for you:

→ Why do you need to design perfect UI with all details then implement it?

I have another question for you:

→ Did you feel frustrated in the stage of implementation of a new feature because the design does not take programming limits into consideration?

My last question is:

→ Why do you focus on details in the early stage of the design?

Ha! I know you're thinking in Agile but you're working with the Waterfall approach.

Indeed, people get confused when they switch from task to other per day even in the same domain, it happened to me usually, especially when it comes to designing different concepts of user interfaces per day.

Furthermore, people want to start a thing and finish it once time. They want to make it perfect from the beginning! Even with low resources and in limited time. It happens most of the time in early-stage startups.

So, let me tell you something: Details do not matter when you start from scratch.

The hard thing about the design is when someone asks you: Why you take this decision?

→ Why you chose this palette of colors?

→ Why you chose this typeface?

→ Why you chose this style of icons?

If you have not a Design System in place, creating consistent user interfaces is very hard, and focusing in-depth on details, will lose time, effort, and of course the consistency of your user interfaces.

So, what's the solution here?

As I mentioned in the title: Design few, Implement few, Repeat.

In the earliest stage of the new design or new feature, you don't need to stick on the high-level decisions about the foundation of your design ( Spacing, Color, Typography, Iconography). I know they matter but not in the beginning, right?

Let's say, when you were having a shower you came up with an idea for a new killer feature, and you want to make it more tangible for your teammates and the stakeholders to get buy-in. Adding new features means a new investment of money and time and what's matter later for any company is: Revenue.

The first thing, you need to do is ignore all details ( nice-to-have ) and just focus on the requirements ( must-to-have ).

So, I recommend this workflow to get quick both of internal and external feedback:

Create a hand-drawn version:

As you see here, there are zero details about your user interface
in production, but why this step matters?

This hand-drawn activity may take between 5min and 20mins if you want to make it a high-fidelity draw!

In fact, this step will help you to see other teammates and stakeholder's opinions and gather individual recommendations from each member of your team. People could not recommend changes when they see a well-done thing. But they can tell you how can you make it better when you deliver it clean but incomplete and ugly. It's human nature.

Ignore colors:

When I was a kid, I remember my Dad when he was buying a paint book for me. The content was grayscale images and my mission was to colorize these images using wood colors. Sometimes, I and my friend have the same image but when we colorize we end up with different looks! After that, we go to family members and ask them which one is better.

But how can we adopt this workflow in our design?

The idea is to hold the color even if you'll refine your design in higher fidelity. Let people tell you how are the shapes, sizes, spaces, and the position of your elements.

Implement the UI:

Modern frameworks and libraries such as Vue, React and Svelte were created for Rapid Prototyping which means you can implement one component and use it with different looks in different positions. So, you don't need to have a full prototype with all user interfaces to start the implementation.

It's a little bit challenging, but I can say that you don't need to regret the time you spent for designing perfect UI that you'll never see it on production.

The goal of this step is to test the back functionality ( How it works ) of the UI without sticking on how it looks for users.

Colorize:

If you don't have a color palette in place, you can try several colors and see the consistency between them based on color theory rules.

Repeat:

Our purpose here is to prevent the over investing and moving fast by doing parallel iterations on both design and code in a short time, so you can build real things as soon as possible. In the end, what matters is your UI in production.