UX Introduction

I’m working in Marvel: War of Heroes project

and started learning UX & UI from SQUAD project

UI?UX?Why?How?What’s next?

What is UI?

Stands for “User Interface”

It’s everything you see on the screen:

What is UI?

Stands for “User Interface”

It’s everything you see on the screen: Information Inputs Animations

Main buttons are still clear if the screen is blur

What is UX?

Stands for “User Experience”

Three components of UX: Usability Look Feel

What is UX?

Stands for “User Experience”

Three components of UX: Usability (How to use?) Look (Color, graphic, theme...) Feel (Joy of use, Interaction, Reaction)

Good design = Good UI + Good UX

Good design = Good UI + Good UX

Bad news: It’s mostly gifted

Good design = Good UI + Good UX

Good news: It can be learnt

Good graphic, bad UX

Good graphic, bad UX

Bad graphic, good UX

Bad graphic, good UX

Bad graphic, good UX

Good graphic, good UX

Good graphic, good UX

Can you guess where the BUY button is?

Good graphic, good UX

Good graphic, good UX

Can you guess where clickable areas are ?

Good graphic, good UX

Good graphic, good UX

Good graphic, good UX

Bad graphic, bad UX

Bad graphic, bad UX

Bad graphic, bad UX

Why should we care ?

Users need tools to solve their problems

If they feel good, they stay

Why should we care ?

Users need tools to solve their problems

If they feel good, they stay, then pay

Why should we care ?

Users need tools to solve their problems

If they feel good, they stay, then pay

They don’t care about: Your superb data design Your high-end technology YOU

Why should we care ?

CS cost decreases after improving UX

Revenue increases after improving UX

Why should we care ?

CS cost decreases 90% after improving UX

Revenue increases 300M$ after improving UX

Basic UX design process

1. Research & strategy

2. Wireframe

3. Mockup

4. Prototype

Basic UX design process

1. Research & strategy

2. Wireframe

• Basic presentation of design elements

• Used for communication, documentations

3. Mockup

4. Prototype

Basic UX design process

1. Research & strategy

2. Wireframe

3. Mockup

• Static visualization

• Used for visual feeling

4. Prototype

Basic UX design process

1. Research & strategy

2. Wireframe

3. Mockup

4. Prototype

• Add interaction

• Used for user testing

What’s coming next ?

1. Common design mistakes

2. Basic design principles

3. Basic emphasizing techniques

4. UI components

5. Animations in UI

6. Trends

7. Wireframe, Mockup, Prototype

What’s coming next ?

1. Common design mistakes

2. Basic design principles

3. Basic emphasizing techniques

4. UI components

5. Animations in UI

6. Trends

7. Wireframe, Mockup, Prototype

What’s coming next ?

1. Common design mistakes

2. Basic design principles

3. Basic emphasizing techniques

4. UI components

5. Animations in UI

6. Trends

7. Wireframe, Mockup, Prototype

What’s coming next ?

1. Common design mistakes

2. Basic design principles

3. Basic emphasizing techniques

4. UI components

5. Animations in UI

6. Trends

7. Wireframe, Mockup, Prototype

What’s coming next ?

1. Common design mistakes

2. Basic design principles

3. Basic emphasizing techniques

4. UI components

5. Animations in UI

6. Trends

7. Wireframe, Mockup, Prototype

What’s coming next ?

1. Common design mistakes

2. Basic design principles

3. Basic emphasizing techniques

4. UI components

5. Animations in UI

6. Trends

7. Wireframe, Mockup, Prototype

What’s coming next ?

1. Common design mistakes

2. Basic design principles

3. Basic emphasizing techniques

4. UI components

5. Animations in UI

6. Trends

7. Wireframe, Mockup, Prototype

What’s coming next ?

And a lot more:

• Color theory

• Typography

• User persona

• ...

UX Resources

Google’s Material Design

UX Resources

Smashing Magazine

UX Resources

Others

Any questions?

It’s just the begining...