introduction to wireframing ux and design

Wireframing, UX and design

Kevin Picalausa

Kevin.Picalausa@hubkaho.be

1

Topics

I. Who am I

II. Design

III. User Experience

IV. Responsive webdesign

V. Wireframing

2

Hello, my name is Kevin!

3

I live in: GHENT

4

http://www.ghentinmotion.com/

My job

• Teacher

• Webprogramming

• Design and usability

• Databasing

• Webtechnology

5

HUBKAHO Technology campus

6

Belgium, the heart of Europe

7

Belgium, the heart of Europe

8

KAHO’s brewery

9

Design

10

This crossed you mind?

11

Or this…

12

But why?

13

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

Design always evolves

15

User Experience

Good design begins with the needs of users

16

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

The good

18

The bad

19

The ugly

20

It’s all about UX

Source: http://usabilitygeek.com

21

• 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

“

”

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

User Experience - Influence

24

Ignore or adore?

25

Responsive webdesign

26

Responsive webdesign

27

Responsive webdesign

28

Responsive webdesign

29

Responsive webdesign

30

Why?

31

The problem

• Same information

• Different:

• Content

• User Behaviour

• User Experience

32

Mobile first?

33

Wireframing

34

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

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

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

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

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

Communication between client and team

40

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

Types of wireframes

42

Sketches

43Source: roqo.net

Low-fidelity

44

High-fidelity

45

46

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

Start by drawing boxes

48

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

Pick your tools

• Paper

• Software:

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

• Balsamique - http://balsamiq.com/

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

• Adobe: Fireworks

• Illustrator

50

Axure

51

• Sitemap

• Widgets

• Properties

• Annotations

• Formatting

• Master elements

• Page interactions

• Guides and GRID

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

53