UI vs UX
Tags: webdev, beginners
Published: 2021-10-19 14:31:55

```
                   UI and UX are not the same thing.
```




### What is UI Design?
User interface design is focused on the look and layout. how each element of the product will look, including buttons, placeholders, text, images, checkboxes, and any visual interface elements people interact with.
UI focuses on a products aspects like color palettes, button styles, animation, graphics, typography, diagrams, widgets, and many other elements to make the websites, applications, plugins, themes, etc.
UI designers keep themselves updated on graphic patterns and design trends that evolve as customers tastes and behavior changes.
UI designers create one version that scales content and elements to match any screen size. 

### Main focus Of UI Designer
* Graphic design: icons, shapes, and images to give meaning to the users actions.
* Colors of the interface, illustrations, buttons, and text
* Typography: fonts and styles such as bold, underlined, and italics.
* Page layout: spaces between blocks, number of elements on the graphic interface, etc.

### What is UX Design?
User experience is the overall experience a user has with a company's products or services. Good and bad user experience design is determined by how easy or difficult it is to interact with each element or aspect of a product or service.
User experience is the experience we have when we surf on a digital interface.
UX design determines how the interface works and how people interact with it.
UX designers conduct market research and analysis to educate themselves about customer’s needs and desires before designing the functionality of a product.

### Main focus of UX Designer
* Strategy.
* Understanding the users needs.
* Creation of prototypes, scenarios, etc.
* Easy to use, user-friendly.

### UI vs UX

```
         UI                       vs                   UX

1.UI stands for User                    1.Ux stands for User 
  Interface.                             Experience.

2.It refers to the Visual               2.Its about the feelings 
  elements that allow users               and emotions when 
  to interact with product.             interacting with product.
                                        
3.It focuses on the look                3.It focuses on overall    
  and feel.                               User friendliness.

4.The goal is to make product           4.The goal is to delight
  more usable and optimized               user with a product 
  for different screen size.              that is easy to use.

5.Mockups, Graphics, Layouts            5.Prototypes, Research, 
  etc.                                    Wireframes.

6.Visual strengths are task             6.Visual strengths are 
tasks flow and scenarios.                 colors and typography.
```

### UX vs UI tools you should use.

* Adobe XD: An all-in-one rapid prototyping tool for creating wireframes, interactive prototypes, and facilitating the design of web and mobile applications.

* Figma: Collaborative prototyping tool where you can work online, remotely, live, and with several people.

* Zeplin: an interface simplifying communication between teams and making it easier to find your way around by automatically generating all the colors, fonts, sizes, etc.

* Marvel: A solution that helps quickly create animated models in just a few clicks. The Marvel application is available on Android and iOS to test live models in mobile version.

* Maze: A very efficient tool for performing questionnaires and user tests remotely to generate detailed reports more quickly and easily.