Branding by Designing a Consistent UI
Have you ever been a someone who easily recognizes something in no time? Commonly, if you see a familiar person without clear looks your brain automatically suggests that is maybe from someone to your a close friend or a member of your family. If that so, why you could recognize them in no time, the answer is because you have been in a relationship with them too long, so you knew well about the real shape of your close person. That’s how nowadays a brand actually works, the more you look at or know it the more you know what the real shape is.
In terms of application, there are a couple of things that we could do in order to brand your application. Making a unique feature that never exists before is one of the techniques, short story you know Facebook achieved this way for the first time they launched by including personal status feature so everyone could see each other status. Another way is branding by designing a consistent and meaningful UI. Here is the story that I want to share with you, branding by designing a consistent UI.
Have you read my article about how we do understand our user by persona, I strongly suggest you read it first, with the hope to get a good sense of this article better. Even though I will tell you again the background of our application but in a short version as possible, so you could focus on the idea of this topic more.
Short Background of Our Application
Our application is sort of a social and medical application that has a goal to eradicate tuberculosis in Depok and with the hope to help their activity work more effectively than before (without application). Our target users are doctors and officers, officers have a job to send a report to doctors of some people that have symptoms of the disease or monitoring report. Doctors get the report from officers, view data distribution from collected data on the web, or determine whether some case is positive or not on the web.
We found out that officers are more than 20 years, which means they are not too young or below 18, it helps us to determine the design should be youthfulness or not. The average doctor is about more than 30 years, which means we could treat the same thing as we did to the officers.
Brief Introduction: Choosing Brand Characteristics
Since our users are not old enough and not too young as well, so we want to pick a color that is so familiar to us about medical but has not strong color or young color, that is a green color like this.
This color will be our main color design, this color what we will try to share with our users to mark this color as part of a brand product.
Not only that main color that we use, but we also use other colors for common components such as text color or a background color.
The shape is also an important thing to notice. As mentioned before, our users are not old enough, so we focus on clean design and minimalist that can be accepted by that type of user.
The principle designs that we use here are minimalistic, clean, and consistent. The consistent is part of our design, for instance we use a same gap between shape, font-size, color, corner radius shape, and etc. Because of that, we are so dependent on it and need to find design tools that help us to achieve consistency.
These are just a brief introduction to our design philosophy, more detail about these will be covered in another article.
How do we manage to have a consistent design?
First of all, why do we need a consistent design? one of the answers that I like to answer is a way to brand your application, remember a consistent remain a value to your user about your product, that’s why UI design is a part of it. Another reason that you will find is it helps your design work more effectively.
Imagine you have one component that has a particular color if there is a new component that needs the same color as a component before without any tools you will copy-paste that color from component before to new component. What is the problem? the problem appears when you decide to change that color to another one, so to achieve that you will change all components with the same colors to new one iteratively. This is very tiring, right?
The same problem happens when we want to duplicate a component (shape). When you have duplicate components, then whenever the component needs to change you must change not only the first one but another one with a same change too iteratively. Same things happening in font style, and etc.
Thanks to Figma, we tackle these problems a piece of cake. We developed our application UI on Figma that has a lot of features to help us to achieve a consistent design. Let’s dig slowly so you will get a clear view of it.
In Figma, we created master colors for all our colors, that we achieved it by set it to global and use it anywhere.
And same technique for font style
How about shape? Yes, you also can do that as well as we did in colors and font style. But the technique a little different but has the same concept that we must set it globally and anyone can use it anywhere by duplicate it from a master component. Let me show you!
Just it? no, it’s not. Don’t you wonder how do we have a consistent gap between components? Let me show you!
Also, do you have any idea how do we manage our component so it’s easier to edit? We achieved this by grouping components. Let’s see what we have done!
That’s it.
Takeaways
Branding is part of a business and designing UI consistently is a part of branding, so achieving consistent UI will boost up your business for sure. We have a design principle and one of them is consistent. As you can see, this article shows us how powerful Figma could help us to achieve that consistency based on our style rule. If you are a designer and you just knew some of these features, I hope this finds you helpful and gets you are more interested to use Figma to develop your application UI and boost your business value significantly.
