Wireframes    1
After this lecture, You will be familiar with ✓ reason and purpose in creating wireframes ✓ wireframe types ✓ creating wir...
Agenda1. Reasons for wireframes2. Layers of interaction design3. What wireframes are4. Groups which will use our wireframe...
Why do we need them anyway?✓ Gather [additional] requirements from stakeholders✓ Ensure common view to a project interface...
Wait ... Interaction design?  - Surface - look & feel of ready     interface  - Skeleton - present placement of     compon...
Wait ... Interaction design?  - Surface - look & feel of ready     interface  - Skeleton - present placement of     compon...
Actually, what is a wireframe?✓ wireframe aka mockup aka blueprint✓ visual representation of interface✓ consistent documen...
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 feature...
We are working with✓ business stakeholders✓ managers  - check out [pretty much] everything against business case and    st...
We are working with✓ business stakeholders✓ managers✓ developers  - show front end of their logic  - what is the user and ...
We are working with✓ business stakeholders✓ managers✓ developers✓ designers  - outline for their design  - hints and requi...
We are working with✓ business stakeholders✓ managers✓ developers✓ designers✓ testers  - provide test frame for any level o...
Types✓ Low fidelity  ✓ Layout [aka reference zones]  ✓ Sketches✓ High Fidelity  ✓ Standalone  ✓ Developer [system] Standalo...
Types - Low fidelity✓ DO  -   show basic layout and interface structure  -   used for first stage of design  -   clients - o...
16
Types - Low fidelity, layout✓ difference  - show only major site elements  - clients - show site basic structure  - designe...
Types - Low fidelity, sketch✓ difference  - heavy emphasize of early stage of development  - clients - give sense of workin...
Types - High fidelity✓ DO  -   show details  -   provide final view of system with navigation and interactions  -   provide ...
20
Types - High fidelity, standalone✓ difference  - can be explained without Your help  - great for docs automatic generation ...
Types - High fidelity, standalone developer✓ difference  -   heavy linkage to implementation level stuff  -   triggers  -  ...
Types - Storyboards✓ DO  -   sequence of simple screens with emphasize on one feature  -   show interaction flow  -   featu...
24
Artifact + Wireframe = LVL UP!✓ Why  - provide better docs (featuring more linkage between WHAT and HOW)  - provide tools ...
Your own prototype✓ Site structure✓ provide navigation✓ Automated flow building✓ State dependent flow✓ Dynamic data for cont...
Tools ✓ price ✓ navigable prototype generation ✓ docs generation ✓ rich interaction suite ✓ OS ✓ collaboration ✓ prototype...
Tools ✓ Axure             ✓ crazy egg ✓ Protoshare        ✓ creately ✓ hotgloo           ✓ [...] ✓ mockin bird ✓ flair buil...
Tools ✓ Axure             ✓ crazy egg ✓ Protoshare        ✓ creately ✓ hotgloo           ✓ [...] ✓ mockin bird ✓ flair buil...
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
Upcoming SlideShare
Loading in...5
×

Wireframes

1,301

Published on

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,301
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wireframes

  1. 1. Wireframes 1
  2. 2. 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
  3. 3. Agenda1. Reasons for wireframes2. Layers of interaction design3. What wireframes are4. Groups which will use our wireframes5. Types of wireframes6. Linking different artifacts with wireframes7. Building prototype8. Tools description9. [time] Simple layout 3
  4. 4. 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
  5. 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 5
  6. 6. 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
  7. 7. 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
  8. 8. We are working with✓ business stakeholders✓ managers✓ developers✓ designers✓ testers 8
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. We are working with✓ business stakeholders✓ managers✓ developers✓ designers - outline for their design - hints and requirements that they should work with✓ testers 12
  13. 13. 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
  14. 14. Types✓ Low fidelity ✓ Layout [aka reference zones] ✓ Sketches✓ High Fidelity ✓ Standalone ✓ Developer [system] Standalone✓ Storyboards [uase flows] 14
  15. 15. 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. 16. 16
  17. 17. Types - Low fidelity, layout✓ difference - show only major site elements - clients - show site basic structure - designers - show base for their layout 17
  18. 18. 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
  19. 19. 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. 20. 20
  21. 21. Types - High fidelity, standalone✓ difference - can be explained without Your help - great for docs automatic generation 21
  22. 22. 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
  23. 23. 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. 24. 24
  25. 25. 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
  26. 26. 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
  27. 27. Tools ✓ price ✓ navigable prototype generation ✓ docs generation ✓ rich interaction suite ✓ OS ✓ collaboration ✓ prototype presentation for clients ✓ user feedback ✓ cloud integration 27
  28. 28. Tools ✓ Axure ✓ crazy egg ✓ Protoshare ✓ creately ✓ hotgloo ✓ [...] ✓ mockin bird ✓ flair builder ✓ justproto ✓ omni graffle ✓ adobe in design ✓ iRise 28
  29. 29. Tools ✓ Axure ✓ crazy egg ✓ Protoshare ✓ creately ✓ hotgloo ✓ [...] ✓ mockin bird ✓ flair builder ✓ justproto ✓ omni graffle ✓ adobe in design ✓ iRise 29
  30. 30. What i didn’t talk about✓ paper prototyping ... 30
  31. 31. What i didn’t talk about✓ paper prototyping ... 31
  32. 32. What i didn’t talk about✓ paper prototyping ... 32
  33. 33. Q&A 33
  34. 34. THANK YOU 34
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×