User Interface Layout

5 essential tips to build a UI layout.

You can completely design the visual part in the editor, do the adjustments and changes as you wish at any time. Even after you publish the app and users start using it, you can completely change the look and pages layout without the risk of losing data!

Therefore, in what form you present the project before switching to the editor is not so important. It can be a prototype in Figma or an image in Photoshop, a drawing in Paint or a freehand sketch, or even a diagram in an Excel spreadsheet. The main thing is that you have a clear idea of ​​how it should work.

But there are a few important points to consider:

Decide which app you need: web or mobile

You can create two versions of the application that will be interconnected - some of your users will work from mobile devices, some from personal computers, while the data will be shared. Although the design will be different.

Different editors are used to building mobile and web applications, it is important to understand in general terms the specifics of their work before starting.

Define user groups

Divide users into groups depending on what functions are available to them and analyze how different they are.

We are not only talking about the division into users and administrators. If your application will be used by clients with different access levels or employees of different departments, you can hide or display individual elements and even entire pages, depending on what functions and data are available to a particular user.

You need illustrative examples

Find as many apps as possible that are as similar to yours. You might be able to use one of them as a base by adding the functions you want or you might want to combine the functionality of several applications into one. Make a shortlist with a description of the advantages and disadvantages - it will be useful not only when drawing up a layout, but also when contacting technical support for advice, looking for performers and investors for a project, and just for generating new ideas.

Describe the pages in detail

You need to clearly understand what pages will be in your application and what information should be displayed on each of them.

Usually, the application includes:

• Home page: All users will come to this page, whether they are registered or not.

• Admin Portal: It will manage settings and accounts.

• Separate pages for users with different access levels.

• Pop-up pages appear when certain actions are performed.

• Do not forget about service messages for users and separate windows with confirmation of actions (for example, consent to send data).

Don't forget about data exchange

Think about where your application will take data and where it will send it. Will all information come from users? What processes can be automated?

Some of the data can be taken from sites or downloaded from accounting programs. To simplify the login to your application, use the authorization of large services, such as Google or Facebook. This requires separate interface elements, for example, buttons "Upload data" or "Login with Facebook".

If it’s difficult to think through everything at once, create a layout with a minimum set of necessary functions and separately write your thoughts on what you would like to add in the future. If you have any difficulties - write to the telegram channel of our technical support, we will always be happy to help!