UI.

UI stands for USER-INTERFACE it deals with how a user interacts with your designs. what is the interface of your app or website? are the designs fill all the user requirements or not? it includes the following concepts.

1. Visuals
2. Icons
3. Typography
4. Mood
5. Interaction Design
6. Motion Design

Typography.

Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.

Typography includes the following thing.

1. Font-size
2. Font-Color
3. Font-Style
4. Text in your designs
5. Structure
6. Interaction Design.

Interaction Design.

Interaction design includes the UI and how a user interacts with your UI.

Motion Design.

Motion design includes animations in your UI.

Mood.

The mood is how your website and application look to the user.

Visual.

Visual is how your put pictures and images in your design and the flow of your design.

UX.

UX is abbreviated as User Experience. it deals with how a user will feel and what the user's behavior is. When they visit or interact with your design.

Now UX/UX Has a specific process that includes the tools & techniques etc.

1. Research Work.
2. User Persona.
3. Wireframing.
4. Prototyping.
5. Understand Revision.
6. Testing.
7. Research Work.

Research Work.

Research work is all about understanding the user and the product.

some questions are fundamental in research work.

Q:1. What is the targeted audience for this product?

Q:2. What are the Demographics?

Q:3. What is the business about?

Q:4. What is the product & what are the services?

Q:5. Who do we compete against?

User Persona.

User persona means supposing a person that faces a problem that you are solving and how your solution will help that person in performing their day-to-day goals.

let’s take an example.

Amazon is willing to add a food delivery feature to its website. So suppose a person whose name is Kevin is of 26 and doing a private job he not married yet and when he comes back to the home he is so much tired and he is not able to make food for her-self so in that condition, he will easily order her food using amazon food delivery service.

Wireframing.

Wireframing is a basic design of your actual application of a website.

wireframing is of two types.

Lofi (Low Fidelity). Hifi (Hight Fidelity). Here is an example of Wireframing.

Prototyping.

The prototype is a demo of what your actual design looks like.

prototyping include.

1. Typography.
2. Iconography.
3. Visuals.
4. Interaction Designs.
5. Motions. You can also say that it’s a high-fidelity version of your actual design.

E.g

Note. Make at least 3 prototypes.

Understand & Revision.

Once your prototype is done show it to your product management team & senior UI/UX designers. if they ask you to do some changes then include them in your design.

Testing.

Testing, Testing & Testing! Why is write testing 3 times because testing is the most important part of the UI/UX process. once you have done with understanding and revision they test your design with multiple groups of users multiple times. and check, what are the feedback of users? &

what is the behavior of users when they interact with your design? Test all prototypes multiple times. Note. Note down one thing if the user likes your design doesn’t mean that they will appreciate your design in the future or after some time so it’s your responsibility to understand the need of your users.

Tools For UI/UX Designing.

Here is the list of the following UI/UX design tools.

1. Figma
2. Sketch
3. Invision
4. Adobe
5. Gimp

I prefer Figma because it’s Free Fast and also available online and offline and you can also work on the design with your team members remotely.