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