Understandable UI Design

Hi there, How are you doing today? Hope being very well and doing perfectly in your work and life. in this post, I want to talk about “Understandable UI Design in project files”.

Programmers have a nice thing, they call it “readable coding/programming”. and this concept is not so much complicated or twisted. it’s so easy and simple to do just need to do something “Understandable”. for example, programmers with use nice and clean coding make their codes to readable so much easier, after this they put good and related names on variables and sections and more, to describe better all the sections and part to themselves and other developers who may work on the project later or at the same time.

If you think it’s a clean code you are wrong, they have something more to do! Programmers start to put some hints and comments beside the codes, Functions, and programs to describe more and explain how this function should work or it’s better to use which plugin or script to work with this feature or section in the program.

What is the benefit of an Understandable UI File?

If your file becomes so much more understandable, all designers who work on the same project can understand so much better the design and layers in the file. after that, If you get back and review your own design, you can find out more about the project so much better and also get so much information. After all, it’s better to have a good and clean file and layering in your all projects.

How to be Understandable in UI

It’s easy to be a better and more professional designer, you should start to create good rooting for your projects, I do this for my own project folder sorting :

Projects: -> “Example Company Name” and this folder included ( UI, Visuals, Sources, Exports, Static Files) and more if you need.

Layer Naming

After that you have good sorting of your data, let’s have something more on this topic. One of the most unprofessional works is having bad naming on your layers and files in your project file, it’s not important at all whether your project is in Photoshop, Figma, Adobe Xd, or other design software. get used to creating files and layers with a good name that describes the file so much better and helps you and other designers to find the layer so much easier and faster.

Describe the Vision

When you design a UI, maybe you design the interaction parts, or sections were had motions and moves on them. absolutely when you design a component you have a vision about the moving objects and how they can be inter into the page or how a menu should drop down and how it’s going back there.

So nobody except you, don’t know how should it be. it should be so ease-in or ease-out? should I close the menu with opacity or make the high equal to zero? So, It’s better to describe your vision for all motions and object movements. it helps developers to develop the app or website so precisely.

Put Comments beside the Design

Figma has a good tool for who designs inside the software. you can put the comments and any kind of information may help the other designers and developers too. so with commenting you do just like programmers in their codes. Programmers and developers put comments in their’s programs to guide and help other developers for developing in the same way and also, to help themselves to understand the code or job after a long time passing.

If you don’t work with Figma, you can put comments beside your designs too, How? just create a text object and put your comments in it and move it beside the layer. you can turn the show icon off if you think it gets messy.

Very well, this post gets finished and I hope you like it and share it with your friends and co-workers. Thanks!