introduction to wireframing ux and design

53
Wireframing, UX and design Kevin Picalausa [email protected] 1

Upload: kevin-picalausa

Post on 27-Jan-2015

123 views

Category:

Technology


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Introduction to wireframing ux and design

Wireframing, UX and design

Kevin Picalausa

[email protected]

1

Page 2: Introduction to wireframing ux and design

Topics

I. Who am I

II. Design

III. User Experience

IV. Responsive webdesign

V. Wireframing

2

Page 3: Introduction to wireframing ux and design

Hello, my name is Kevin!

3

Page 4: Introduction to wireframing ux and design

I live in: GHENT

4

http://www.ghentinmotion.com/

Page 5: Introduction to wireframing ux and design

My job

• Teacher

• Webprogramming

• Design and usability

• Databasing

• Webtechnology

5

Page 6: Introduction to wireframing ux and design

HUBKAHO Technology campus

6

Page 7: Introduction to wireframing ux and design

Belgium, the heart of Europe

7

Page 8: Introduction to wireframing ux and design

Belgium, the heart of Europe

8

Page 9: Introduction to wireframing ux and design

KAHO’s brewery

9

Page 10: Introduction to wireframing ux and design

Design

10

Page 11: Introduction to wireframing ux and design

This crossed you mind?

11

Page 12: Introduction to wireframing ux and design

Or this…

12

Page 13: Introduction to wireframing ux and design

But why?

13

Page 14: Introduction to wireframing ux and design

What is design?

• Design has no exact definition.

• Design is everywhere.

• Design is the translation of an idea.

• Design has impact on nearly every part of our lives.

• Richard Seymour: “making things better for people”

14

Page 15: Introduction to wireframing ux and design

Design always evolves

15

Page 16: Introduction to wireframing ux and design

User Experience

Good design begins with the needs of users

16

Page 17: Introduction to wireframing ux and design

User (U) Experience (X)

• UX can be defined as the overall experience you have when you

are using or interacting with something – and that ‘something’

could literally be almost anything in the world!

17

Page 18: Introduction to wireframing ux and design

The good

18

Page 19: Introduction to wireframing ux and design

The bad

19

Page 20: Introduction to wireframing ux and design

The ugly

20

Page 21: Introduction to wireframing ux and design

It’s all about UX

Source: http://usabilitygeek.com

21

Page 22: Introduction to wireframing ux and design

• Stepping out of our own shoes; putting our own priorities aside.

• Trying to get inside the minds of our future users.

22

The power of empathy

Page 23: Introduction to wireframing ux and design

Most visitors decide within a matter of seconds whether

to stay on your site or hit the ‘back’ button to look for

something better

Source: http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

23

Page 24: Introduction to wireframing ux and design

User Experience - Influence

24

Page 25: Introduction to wireframing ux and design

Ignore or adore?

25

Page 26: Introduction to wireframing ux and design

Responsive webdesign

26

Page 27: Introduction to wireframing ux and design

Responsive webdesign

27

Page 28: Introduction to wireframing ux and design

Responsive webdesign

28

Page 29: Introduction to wireframing ux and design

Responsive webdesign

29

Page 30: Introduction to wireframing ux and design

Responsive webdesign

30

Page 31: Introduction to wireframing ux and design

Why?

31

Page 32: Introduction to wireframing ux and design

The problem

• Same information

• Different:

• Content

• User Behaviour

• User Experience

32

Page 33: Introduction to wireframing ux and design

Mobile first?

33

Page 34: Introduction to wireframing ux and design

Wireframing

34

Page 35: Introduction to wireframing ux and design

A lot is happening

• At times the design process can seem very complicated, a lot of things are

happening at the same time. Many people from different disciplines are all

working together (and often simultaneously) on the same project.

35

Page 36: Introduction to wireframing ux and design

Elements of user experience

• Surface: brings all together visually:

finished product.

• Skeleton: makes structure concrete.

What component will enable people to use the site.

• Structure: gives shape to the scope:

how will the pieces fit together?

• Scope: transforms strategy into requirements: what

feature will the site need.

• Strategy: is where it all begins.

What do our users want?

Jesse James Garret

36

Page 37: Introduction to wireframing ux and design

Interaction design?

• Surface: brings all together visually:

finished product.

• Skeleton: makes structure concrete.

What component will enable people to use the site.

• Structure: gives shape to the scope:

how will the pieces fit together?

• Scope: transforms strategy into requirements: what

feature will the site need.

• Strategy: is where it all begins.

What do our users want?

Jesse James Garret

37

Page 38: Introduction to wireframing ux and design

Wireframes are:

• “A visual representation of an interface; used to

communicate the structure, content, information

hierarchy, functionality, and behavior of an

interface.”

38

Source: slideshare: CMD Rotterdam - wireframes

Page 39: Introduction to wireframing ux and design

Why use wireframes?

• To communicate your idea.

• It is some kind of blueprint for design.

• To get everyone on the same page.

• Easier to change a wireframe than a design!

39

Page 40: Introduction to wireframing ux and design

Communication between client and team

40

Page 41: Introduction to wireframing ux and design

Questions to ask when…

• Structure: How will the pieces of this site be put

together?

• Content: What will be displayed on this site?

• Information Hierarchy: How is this information

organized and displayed?

• Functionality: How will this interface work?

• Behavior: How does it interact with the user?

How does it behave?

Wireframing

41

Page 42: Introduction to wireframing ux and design

Types of wireframes

42

Page 43: Introduction to wireframing ux and design

Sketches

43Source: roqo.net

Page 44: Introduction to wireframing ux and design

Low-fidelity

44

Page 45: Introduction to wireframing ux and design

High-fidelity

45

Page 46: Introduction to wireframing ux and design

46

Page 47: Introduction to wireframing ux and design

Getting started

• Sketches

• next > Low-fidelity

• (next > High-fidelity)

• Hints:

• Use a grid

• “Don’t” use colors

• Add comments

• Use predefined components

• Start with the bigger blocks

• Keep an eye on white space

47

Page 48: Introduction to wireframing ux and design

Start by drawing boxes

48

Page 49: Introduction to wireframing ux and design

Fine-tuning with grayscale

• Using the full spectrum of grayscale can help you determine the

visual strength of your elements. Don’t pick other colors!

49

Page 50: Introduction to wireframing ux and design

Pick your tools

• Paper

• Software:

• Axure - http://www.axure.com/

• Balsamique - http://balsamiq.com/

• Lucidchart – https://www.lucidchart.com/

• Adobe: Fireworks

• Illustrator

50

Page 51: Introduction to wireframing ux and design

Axure

51

• Sitemap

• Widgets

• Properties

• Annotations

• Formatting

• Master elements

• Page interactions

• Guides and GRID

Page 52: Introduction to wireframing ux and design

Lab-exercise

- Topic for each group

- You choose: mobile, website, tablet?

• Step 1. Brainstorming (techniques: this morning)

• Step 2. Getting to the core idea

• Step 3. Giving priorities (navigation)

• Step 4. Wireframing

52

Page 53: Introduction to wireframing ux and design

53