What is the UI? The role of UI in site design

What is the UI? The role of UI in site design

What is the UI? The role of UI in site design

What is UI ? and the role of UI in site design


What is the UI? The role of UI in site design


We’ve all seen different types of software working with a website that looks great but has poor performance, which is called a bad UX and a good UI.
It can also be a website that looks poor but is very user-friendly and has good performance, which is called a good UX and a bad UI.


In the following, we will explain UI to better understand the concept (UI Designer).


Ico website design

What is a UI?



First we give a brief history of the UI.

In the past, in the 1970s, if you wanted to use your computer, you had to use your computer’s command line interface, which took up a lot of your time.

Today’s graphical interfaces were not yet designed at that time, and even commercially they still did not have a place among user interfaces.

At that time, users had to communicate with each other through different programming languages ​​and enter different code to communicate with each other and do a very easy task, and did a very simple task with their computer.

In the 1980s, the first graphical user interface (GUI) was developed by computer scientists at Xerox PARC. With this highly functional innovation, users were able to communicate with their PCs by visually sending commands via buttons, icons, menus and checkboxes.

This change in technology made it possible for everyone to use computers, and there was no longer a need for hard and time-consuming coding to work with computers, and this action started a great revolution in the industry of digital products as well as computers.


UI definition


UI, which stands for User Interface Design, means user interface design.
In fact, the UI is the design of a part of the application, website or system that the user sees and deals with the graphical and visual aspects and pagination of the product or theme.
Or what each section looks like to give the website a proper look is determined by the UI section designer.

As we mentioned, the appearance of the site is very important for such designers and unlike UX designers who focus on the general sense of work, UI designers work on how to present the product and the appearance of the site.

They design the page that the user interacts with and try to advance the UI to achieve the goals of the UX designer. This part is very important in site design
Because the user interacts directly with it, and users usually trust applications with a weak UI.

The UI designer must observe the integrity of the design style and colors throughout the site design process, so that he must pay attention to the type of layout and content of the pages and their colors.



User interface design includes the following:

  • 1- Appearance and Sense: Customer Analysis / Design Research / Brand and Graphic Development / User Guide
  • 2 – Responsiveness and interaction: UI design / Dynamic design / Responsive design / Implementation synchronous with the developer


UI Designer Tasks


Now, we come to the part where we talk about the middle ground, or what the UI designer does: how to map the overall structure of a page.
The UI designer designs the page according to the needs of the brand or business.

Achieves this goal by placing the right colors, fonts and page elements like images. The user interface designer first implements the page view with all the details and details on paper or in special software and then provides them to the coder or site and application designer.

The work of a UI designer does not end here, and he must always expand his workspace and make new changes according to the needs and innovations of the world of technology and communication and competing markets. Also, the UI designer should always make the user feel better about viewing the page than before.

Since the UI designer has to design different pages, his most important need is to master graphic programs such as Photoshop and Illustrator, as well as familiarity with the psychology of colors and a correct understanding of the design space are the strengths of the user interface.

As you can see, UI design has principles that we will mention a few in the following.


  • Structure

In the final design, the components of the website must be structurally put together to be understandable to the user. Crowded and cluttered pages are cluttered and disrupt the user interface.


  • Simplicity

Beauty is always simple. This principle also applies to the design of web pages, as complexity not only does not attract the user’s attention, but also causes your web page to close and exit very quickly.


  • Available

The components of a page should not be hidden or out of sight Your users are not bored people so do not force them to look for what they are looking for because they will get frustrated and angry.


  • Careful design

Be careful in designing the pages of the site or application to reduce the error rate to zero. You need to get the right UI to get an acceptable UX. So we come to the following general tasks:

1- Paying attention to the appearance characteristics in the work, which includes brand and graphic design, user guide, customer analysis, research design.

2- Paying attention to the responsiveness and interactivity feature, to achieve which it will be necessary to implement special settings for all dimensions of monitors, pay attention to interactivity and animation, implementing the design with the project programmer and creating UI prototypes.


Ico Web Company


Examples of UI


  • What does the menu look like and what color field and how do they open?
  • Does the color of the search button match the rest?


You can see a good UI example in the image below



What features does a good user interface include?

Creating a good and pleasant user interface will not be possible without using all the following application techniques:


1_Visual design:

Our main goal of visual design is to enhance the user experience with the help of images, engravings, typography, use of empty spaces, layout and color.



The use of different colors has a great effect on the emotions of the audience and is very useful in attracting customers.
Another important point to note is the intelligent use of brand colors according to the intended message that has the necessary coordination and integration.


3_Graphic design:

Graphic Design is the task of combining typography or images or moving graphic items in a way that can impress and engage the audience.


4_ Mokap:

Mocap is usually a smaller or larger design than the original, which is prepared for preview, design evaluation, advertising, or other items according to the purpose of the people.
Mocap design means displaying the final appearance of the design with its detailed details, such as colors and typography.
Many people confuse mocap with wireframe and prototyping, but each of these is actually a different step and different from each other.



Typography is one of the main parts of design. Typography is the art and knowledge and organization of fonts and its purpose is to provide beautiful, simple and understandable texts for the audience and the reader.


Tools of a Ui UI Designer


In the field of graphic design, 4 tools are usually used the most:


  • pen and paper: Used for simple design and prototype. Sometimes this design is designed with Photoshop or a simple tool.
    This design is only for the graphic designer or web designer to show his mentality to the rest of the team and agree with them in the whole work.


  • Photoshop or Illustrated: These two tools are not specifically designed for user interface design, but in practice most user interface designs are done with the help of these two popular tools.
    In Iran, most designs are produced with one of these two tools.


  • Sketch: This amazing tool has been developed exclusively for the Mac operating system and the UI design with it is an amazing and very interesting experience.
    This software is so powerful, simple and useful that many designers just buy this Mac Sketch laptop.


  • Adobe xd: In order not to feel weak against Sketch, Adobe designed its own free software called Adobe xd, which runs on Windows and is really useful in newer versions of the system.



How is ui income and job opportunity?



You may be wondering what a job ui or UI designer earns and how much they get paid for their work.
Important factors that can affect the income of this group of people include the following:


  • Location

Location or individual life situation is one of the first features that can affect the salary of the designer. For example, a person working in Tehran receives a higher salary in his field of work than a person working in another city.


  • The amount of work experience of the individual

A person who has one year of experience in the field of ui with a person who has worked in this field for 4 years, like all jobs, naturally have a difference in the amount of salary.


  • Work as a freelancer or employee

Choosing the ability to work as a job ui Whether as a freelancer or as an employee can involve different levels of pay for individuals.


The important point of this profession is that a working person can, in addition to income, create the necessary balance between work and life, which is why this job is considered as one of the best jobs in the world and has many fans.

There are many tools for designing a user interface for a website that you can use:

for example:


  • Google slides
  • Cog Tool
  • Justin mind
  • In Vision
  • Sketch
  • Adobe XD
  • Keynote



Post a comment

Your email address will not be published.