Wireframes
-
Upload
peter-kaleta -
Category
Documents
-
view
715 -
download
3
description
Transcript of Wireframes
Wireframes
1
After this lecture, You will be familiar with
✓ reason and purpose in creating wireframes
✓wireframe types
✓ creating wireframe documentation
✓ building working interface prototype with wireframes
✓ various tools used in domain
2
Agenda
1. Reasons for wireframes
2. Layers of interaction design
3. What wireframes are
4. Groups which will use our wireframes
5. Types of wireframes
6. Linking different artifacts with wireframes
7. Building prototype
8. Tools description
9. [time] Simple layout
3
Why do we need them anyway?
✓Gather [additional] requirements from stakeholders
✓Ensure common view to a project interface
✓ [improve] Communication between groups, people
✓Introduce unanimous documentation
✓design and introduce prototypes in a blink
✓Provide interaction design on quality level
4
Wait ... Interaction design?
- Surface - look & feel of ready interface
- Skeleton - present placement of components and shape of interface
- Structure - connecting requirements together and shaping flows
- Scope - reqs & features
- Strategy - idea
5
Wait ... Interaction design?
- Surface - look & feel of ready interface
- Skeleton - present placement of components and shape of interface
- Structure - connecting requirements together and shaping flows
- Scope - reqs & features
- Strategy - idea
6
Actually, what is a wireframe?
✓wireframe aka mockup aka blueprint
✓visual representation of interface
✓consistent documentation of interface and user interaction with it✓ interface, navigation and flow structure & hierarchy
✓ possible user behavior
✓ shape of functionalities
✓ information [also content] hierarchy and placement
✓ instructions & hints for separate teams and employees how to approach interface design in project
✓ [...] 7
We are working with
✓business stakeholders
✓managers
✓developers
✓designers
✓testers
8
We are working with
✓business stakeholders- gather requirements- build fast&dirty prototype- sketch up features flows and their scope- give client a bound with a project
✓managers
✓developers
✓designers
✓testers
9
We are working with
✓business stakeholders
✓managers- check out [pretty much] everything against business case and
strategy- ship docs for future teams- is approach ok?
✓developers
✓designers
✓testers
10
We are working with
✓business stakeholders
✓managers
✓developers- show front end of their logic- what is the user and functionality flow- provide hints and requirements for interface and interaction
✓designers
✓testers
11
We are working with
✓business stakeholders
✓managers
✓developers
✓designers- outline for their design- hints and requirements that they should work with
✓testers
12
We are working with
✓business stakeholders
✓managers
✓developers
✓designers
✓testers- provide test frame for any level of project testing- provide unanimous style-free environment for feature and flow
analysis- provide easy tool for A/B testing
13
Types
✓Low fidelity
✓Layout [aka reference zones]
✓Sketches
✓High Fidelity
✓Standalone
✓Developer [system] Standalone
✓Storyboards [uase flows]
14
Types - Low fidelity
✓ DO- show basic layout and interface structure- used for first stage of design- clients - overview + planning- developers - storyboards- designers - layout and overall design
✓ DO NOT- introduce any content- provide any other interaction than navigation- go for developer/design/business specific features
✓ BEWARE OF- emphasize early stage of project for client
15
16
Types - Low fidelity, layout
✓ difference- show only major site elements- clients - show site basic structure- designers - show base for their layout
17
Types - Low fidelity, sketch
✓ difference- heavy emphasize of early stage of development- clients - give sense of working from a scratch- others? - it just looks cool :)
18
Types - High fidelity
✓ DO- show details- provide final view of system with navigation and interactions- provide standalone wireframes - provide lot of specification concerning flow and usage
✓ DO NOT- get in to many details - leaving elements without documented purpose
✓ BEWARE OF- emphasize the lack of logic behind simple interactions for client
19
20
Types - High fidelity, standalone
✓ difference- can be explained without Your help- great for docs automatic generation
21
Types - High fidelity, standalone developer
✓ difference- heavy linkage to implementation level stuff- triggers- module structure- logic and data flow- validations- spec for each developer-matter element
22
Types - Storyboards
✓ DO- sequence of simple screens with emphasize on one feature- show interaction flow- feature path of usage- base on other artifacts (use cases and user stories)
✓ DO NOT- get messed in details- work with several features at one time- do not create epic stories- forgot what triggers actions and state changes
23
24
Artifact + Wireframe = LVL UP!
✓Why- provide better docs (featuring more linkage between WHAT and HOW)- provide tools for specific tasks (UX designer use case based usage flows)
✓What we will mix up- different types of wireframes- use cases- user stories- any functional requirements we can find
✓what would we get- story boards- diagram flows
• state based• action/reaction based
25
Your own prototype
✓Site structure
✓provide navigation
✓Automated flow building
✓State dependent flow
✓Dynamic data for controls
✓ interface specific features - validations, notifications
✓generate html prototype
✓generate docs
26
Tools
✓price
✓navigable prototype generation
✓docs generation
✓rich interaction suite
✓OS
✓collaboration
✓prototype presentation for clients
✓user feedback
✓cloud integration
27
Tools
✓Axure
✓Protoshare
✓hotgloo
✓mockin bird
✓flair builder
✓ justproto
✓omni graffle
✓adobe in design
✓ iRise
28
✓crazy egg
✓creately
✓ [...]
Tools
✓Axure
✓Protoshare
✓hotgloo
✓mockin bird
✓flair builder
✓ justproto
✓omni graffle
✓adobe in design
✓ iRise
29
✓crazy egg
✓creately
✓ [...]
What i didn’t talk about
✓paper prototyping ...
30
What i didn’t talk about
✓paper prototyping ...
31
What i didn’t talk about
✓paper prototyping ...
32
Q & A
33
THANK YOU
34