Upload
kevin-picalausa
View
124
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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