How to make a clean UI Design ?
In the past ten years, the field of “ Digital Products Design ” has witnessed many developments and methods that help to improve designs, make them more usable and add more beauty.
And nowadays, the world tends to have a simple design, clean and not messy, and this is a wonderful thing, but the most important question remains, HOW?
How exactly do you make your design clean?
In this article, we will help you learn several tips that will make your design cleaner, more organized, and more flexible, but first let’s start by defining the term of “ Clean Design ”
What We Really Mean By “Clean Design”?
Usually the clean design is more organized in a way that makes it appear more scannable according to the rule of “ The most important then the important “
Also, a clean design always contains more white space for a more sense of freedom and comfort for the eye, which means “focusing on the important things and reaching the basic message of the design with less eye effort.”
So the thing that we understood from this simple definition is that a clean design policy does not depend on filling the design with unimportant elements, but on the intelligence of the deletion.
What will we remove from the design to make it look clean?
1- Delete unnecessary information
Carefully select the necessary information that the user needs, making sure that there is a clear path to it without going into complications.
This tip is a double-sided coin that I use with caution, do not fall into the trap, strip the design of its primary purpose in order to keep it clean.. because that won’t make it useful in the first place, think about how important the presentation of the content is?
and how it will work in a way that makes it less distracting and more visible? Always remember, “Delete a lot but smartly”.
Example : What do you think of these screens?
Which one can be classified as a clean design? Don’t forget to tell me in the comments section.
Screen #1: I fell into the problem of eye noise, the eye became distracted between the text at the beginning of the screen and the stories, the text has got a lot of great eye attention due to its position in the design and also because of the strong color that directly grabs your attention
But the question here is: Is this what you want to see in the first place?
This behavior has resulted in a great distraction to the eye .. The user’s eye will ignore all elements and remain drawn to a text that says “Enjoy your time”. Well, let me have a good time by myself then !
Screen #2: Less distracting, but I ran into a bigger problem, I stripped the design of an important element !
I told the user to have a good time and at the same time deleted an element that would actually make them have a good time. Does this make any sense?
Screen #3: more balanced, less distracted, the eye will follow a new pattern this time
The eye will scan the screen easily, we will take a look at the stories first and then simply move on to the search bar and you will not stop at that much because there are more important things underneath, and in this way the user can really have fun !
Well, now we have identified the important elements and removed the unimportant ones
I think your design looks very clean now!
Are you excited to learn more? Let’s continue!
how do you feel about this picture? Do you feel uncomfortable?
Your design should breathe, treat the elements as if they were your children, Give them more free space and let them breathe and appear appropriately, Don’t make them feel crowded
2- Enough spaces for each element
Empty spaces give a feeling of comfort and let your design take on its freedom. Make it more eye comforting in some way.
But beware of over-spacing the elements, forcing the eyes to work harder in navigating the elements.
Example: How do you feel about these models?
Screen #1: I made the mistake of over-spacing the elements, the elements somehow seemed to be unrelated.
Screen #2: When I tried to clarify that all the elements are related, I made a new mistake, which is “crowding the elements”
The design looks like it’s too crowded!
Do you hear it? It feels like it’s shouting from the crowd.
The solution is always “balance”
to make things balanced with enough spaces and adjust them in an organized way, considering the clarification that this group is related to each other and so on.
I think things are now clearer and more comfortable for the eye, and the eye will not spend much effort in navigating the design elements and will never feel crowded again.
3- Arrange the elements
There are a lot of designers with their great experience, but you will never find anyone telling you the best way to arrange your elements.
Since it’s relative from person to person and according to what you want to build and its importance to users in the first place, I can’t tell you how to arrange your design elements, but always remember those questions :
What is important that should be the center of focus and attention?
And what is less visually important but not annoyingly attracting the eye?
When using Facebook, for example, your eyes cannot fall on the like button first, We will often look at the image or content and then at the buttons. The logical organization is the most important in your field of vision and the least important below.
Have you ever thought about what would happen if the buttons were above the image Or written content? * Tell me your opinion in the comments section. *
4- Wait, Watch, Don’t rush!
Give your design its time, wait and watch the details carefully, there is always a chance for improvement .. DON’T RUSH!
Personally, I treat design as a human being with feelings and emotions.
There is no need to hurry and pressure him to bring out his best, but the solution is waitin and dealing with him gently.Try different methods, think of him as if he were your friend .. Do not be surprised!
I use this technique all the time and my design always rewards me in the end with a great idea or unexpected additions.
5- Make your design understandable
Don’t make users think, make everything understandable, you don’t need to overdo the visual design so they will not finally come up with the question “How does this thing work?”
This method makes your design last long, it does not end with the end of the trend, but rather makes it look classic, or, more precisely, a practical design.
6- The world needs more beautiful and useful products
We all know that “ease and usability” is the most important thing, but that doesn’t mean it’s okay if a product is ugly or bad, who of us wants to use an ugly product every day?
Make your product beautiful, make it interact with users with great love, direct their eyes towards the things they need, warn them when deleting something important, for example
Finally, I will tell you something that you cannot read in any book or any article..
Do not fall in love with your design, rather you should fall in love with the design process itself, give it your feelings and your love, deal with the matter in your mind, but attach it to your feelings.
Don’t be tough on design, Feelings can also be transmitted to users.
And you may be wondering why you shouldn’t fall in love with your design but the design process itself? The answer is simple!
“To always be able to accept criticism and feedback from users .. Do not make feelings about everything. Also leave a place for sane thinking.”
