This document provides information about wireframing, user experience (UX) design, and responsive web design. It introduces Kevin Picalausa and his role as a teacher and designer. It defines key concepts like UX, responsive design, and wireframing. It explains that wireframing is used to communicate the structure, content, and functionality of an interface before visual design. Various wireframing tools and techniques are also discussed, including sketching, low-fidelity, and high-fidelity wireframes.

1. Wireframing, UX and design
Kevin Picalausa
Kevin.Picalausa@hubkaho.be
1

2. Topics
I. Who am I
II. Design
III. User Experience
IV. Responsive webdesign
V. Wireframing
2

3. Hello, my name is Kevin!
3

4. I live in: GHENT
4
http://www.ghentinmotion.com/

5. My job
• Teacher
• Webprogramming
• Design and usability
• Databasing
• Webtechnology
5

6. HUBKAHO Technology campus
6

7. Belgium, the heart of Europe
7

8. Belgium, the heart of Europe
8

9. KAHO’s brewery
9

10. Design
10

11. This crossed you mind?
11

12. Or this…
12

13. But why?
13

14. 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

15. Design always evolves
15

16. User Experience
Good design begins with the needs of users
16

17. 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

18. The good
18

19. The bad
19

20. The ugly
20

21. It’s all about UX
Source: http://usabilitygeek.com
21

22. • 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

23. “
”
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

24. User Experience - Influence
24

25. Ignore or adore?
25

26. Responsive webdesign
26

27. Responsive webdesign
27

28. Responsive webdesign
28

29. Responsive webdesign
29

30. Responsive webdesign
30

31. Why?
31

32. The problem
• Same information
• Different:
• Content
• User Behaviour
• User Experience
32

33. Mobile first?
33

34. Wireframing
34

35. 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

36. 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

37. 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

38. 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

39. 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

40. Communication between client and team
40

41. 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

42. Types of wireframes
42

43. Sketches
43Source: roqo.net

44. Low-fidelity
44

45. High-fidelity
45

46. 46

47. 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

48. Start by drawing boxes
48

49. 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

50. Pick your tools
• Paper
• Software:
• Axure - http://www.axure.com/
• Balsamique - http://balsamiq.com/
• Lucidchart – https://www.lucidchart.com/
• Adobe: Fireworks
• Illustrator
50

51. Axure
51
• Sitemap
• Widgets
• Properties
• Annotations
• Formatting
• Master elements
• Page interactions
• Guides and GRID

52. 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. 53