Designing User Interfaces That Work - Figma

[mostakimvip06]

UI - or User Interface , is a field of graphic design that focuses on visual aspects in creating all the elements that the recipient of our website or application will see. User Interface, as the name suggests, is the design of the user interface in such a way that the user's navigation and movement around our website are as convenient, pleasing to the eye and intuitive as possible. When entering this phrase in Google, we will most often see mobile application projects, but let this not fool us, because UI is not only the design of interfaces for mobile devices, but also desktop websites, online stores, or even interactive presentations.

UI can often be confused with UX , but you, thanks to our previous post , already know perfectly well what the differences are between these two fields, right?

What is Figma?
Figma is a software that allows you to design all kinds of elements intended for digital use, such as websites, social media graphics, multimedia presentations, and PDF files. When it comes to projects intended for print, Figma is unfortunately not the best solution, mainly due to the lack of support for the CMYK color space and the inability to export in a resolution other than 72dpi.

Figma is the “free” equivalent of apps like Adobe XD and Sketch . I put the word “free” in quotation marks on purpose because the program has both a limited free version and paid plans for larger teams. As a designer who has worked with Adobe XD for several years, I can say without hesitation that despite the large company behind XD, Figma allows you to do much more if you just take the time to learn all its features.

Before we get into practice
Before we start designing our layout, it is always worth reminding ourselves nigeria telemarketing data of the basic principles we should follow , so I refer you to our post on Gestalt design principles and this one on color psychology .

Design System, the basis of every larger project
What is Design System? I will illustrate this using Atomic Design . Every website, mobile application, or portal can be divided into hierarchical sub-elements, such as:

Atoms - the smallest components of an organism. These are the most basic factors used in a layout, such as color, font, or icon. Atoms cannot be broken down into any smaller elements.

Particles (molecules) - are made of atoms. This is a group of suitably used atoms, which when combined creates a coherent whole. An example of such a particle would be a button (color, font, arrow, rectangle as background).

Organisms - these are elements that can consist of both atoms and molecules. They combine elements within themselves in such a way that a coherent, complex element is created, such as a slider on the home page.

Templates - these are almost final versions of a website that combine many organisms, molecules and atoms at once. A website template is really a ready-made layout to which we only need to add the final content.

Pages - the end result of the appropriate combination of all the above-mentioned elements,

This is what Design System is all about. At first glance, it may seem complicated, but in essence, it involves creating a place in the project where all the reusable elements, the so-called components, will be located.

Why? Even if we created a fantastic design system, until we fully understand its purpose - we will only waste a lot of time.

Convenience and time saving.
The design system is designed so that every time we create a Call to Action, we do not reinvent the wheel, so that every element that we know will be repeated on the website is easily accessible and can be edited intuitively.

Maintaining the standard.
Additionally, creating such a system will help us maintain standardization on the site, because there is a chance that if we create a given element from scratch 10 times, each one will be slightly different from the others.

A nod to the programmers
Developers who have all the components used on a website collected in one place have their work much easier because they do not have to analyze every element on the page.