Transcript
Page 1: [UX Series] 1 - UX Introduction

UX Introduction

Page 2: [UX Series] 1 - UX Introduction

I’m working in Marvel: War of Heroes project

Page 3: [UX Series] 1 - UX Introduction

and started learning UX & UI from SQUAD project

Page 4: [UX Series] 1 - UX Introduction

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

Page 5: [UX Series] 1 - UX Introduction

What is UI?

Stands for “User Interface”

It’s everything you see on the screen:

Page 6: [UX Series] 1 - UX Introduction

What is UI?

Stands for “User Interface”

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

Page 7: [UX Series] 1 - UX Introduction
Page 8: [UX Series] 1 - UX Introduction

Main buttons are still clear if the screen is blur

Page 9: [UX Series] 1 - UX Introduction
Page 10: [UX Series] 1 - UX Introduction
Page 11: [UX Series] 1 - UX Introduction
Page 12: [UX Series] 1 - UX Introduction

What is UX?

Stands for “User Experience”

Three components of UX: Usability Look Feel

Page 13: [UX Series] 1 - UX Introduction

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)

Page 14: [UX Series] 1 - UX Introduction

Good design = Good UI + Good UX

Page 15: [UX Series] 1 - UX Introduction

Good design = Good UI + Good UX

Bad news: It’s mostly gifted

Page 16: [UX Series] 1 - UX Introduction

Good design = Good UI + Good UX

Good news: It can be learnt

Page 17: [UX Series] 1 - UX Introduction

Good graphic, bad UX

Page 18: [UX Series] 1 - UX Introduction

Good graphic, bad UX

Page 19: [UX Series] 1 - UX Introduction

Bad graphic, good UX

Page 20: [UX Series] 1 - UX Introduction

Bad graphic, good UX

Page 21: [UX Series] 1 - UX Introduction

Bad graphic, good UX

Page 22: [UX Series] 1 - UX Introduction

Good graphic, good UX

Page 23: [UX Series] 1 - UX Introduction

Good graphic, good UX

Can you guess where the BUY button is?

Page 24: [UX Series] 1 - UX Introduction

Good graphic, good UX

Page 25: [UX Series] 1 - UX Introduction

Good graphic, good UX

Can you guess where clickable areas are ?

Page 26: [UX Series] 1 - UX Introduction

Good graphic, good UX

Page 27: [UX Series] 1 - UX Introduction

Good graphic, good UX

Page 28: [UX Series] 1 - UX Introduction

Good graphic, good UX

Page 29: [UX Series] 1 - UX Introduction

Bad graphic, bad UX

Page 30: [UX Series] 1 - UX Introduction

Bad graphic, bad UX

Page 31: [UX Series] 1 - UX Introduction

Bad graphic, bad UX

Page 32: [UX Series] 1 - UX Introduction

Why should we care ?

Users need tools to solve their problems

If they feel good, they stay

Page 33: [UX Series] 1 - UX Introduction

Why should we care ?

Users need tools to solve their problems

If they feel good, they stay, then pay

Page 34: [UX Series] 1 - UX Introduction

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

Page 35: [UX Series] 1 - UX Introduction

Why should we care ?

CS cost decreases after improving UX

Revenue increases after improving UX

Page 36: [UX Series] 1 - UX Introduction

Why should we care ?

CS cost decreases 90% after improving UX

Revenue increases 300M$ after improving UX

Page 37: [UX Series] 1 - UX Introduction

Basic UX design process

1. Research & strategy

2. Wireframe

3. Mockup

4. Prototype

Page 38: [UX Series] 1 - UX Introduction

Basic UX design process

1. Research & strategy

2. Wireframe

• Basic presentation of design elements

• Used for communication, documentations

3. Mockup

4. Prototype

Page 39: [UX Series] 1 - UX Introduction

Basic UX design process

1. Research & strategy

2. Wireframe

3. Mockup

• Static visualization

• Used for visual feeling

4. Prototype

Page 40: [UX Series] 1 - UX Introduction

Basic UX design process

1. Research & strategy

2. Wireframe

3. Mockup

4. Prototype

• Add interaction

• Used for user testing

Page 41: [UX Series] 1 - UX Introduction

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

Page 42: [UX Series] 1 - UX Introduction

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

Page 43: [UX Series] 1 - UX Introduction

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

Page 44: [UX Series] 1 - UX Introduction

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

Page 45: [UX Series] 1 - UX Introduction

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

Page 46: [UX Series] 1 - UX Introduction

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

Page 47: [UX Series] 1 - UX Introduction

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

Page 48: [UX Series] 1 - UX Introduction

What’s coming next ?

And a lot more:

• Color theory

• Typography

• User persona

• ...

Page 49: [UX Series] 1 - UX Introduction

UX Resources

Google’s Material Design

Page 50: [UX Series] 1 - UX Introduction

UX Resources

Smashing Magazine

Page 52: [UX Series] 1 - UX Introduction

Any questions?

Page 53: [UX Series] 1 - UX Introduction

It’s just the begining...