UX/UI Workshop: Visualizing Ideas with...
Transcript of UX/UI Workshop: Visualizing Ideas with...
![Page 1: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/1.jpg)
Wireframing
David Dodge
Senior UX Architect
Visualizing Ideas
![Page 2: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/2.jpg)
Workshop Overview
Show Examples
Discuss Benefits
Demonstration
Group Activity
Presentations
Recap
![Page 3: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/3.jpg)
WireframesWhat are they?
![Page 4: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/4.jpg)
Simple diagrams that show placement of
elements within an interface.
![Page 5: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/5.jpg)
Creating wireframes
• Fight the urge to make them look pretty
• Solicit feedback early and often
• Always keep the user in mind
• Make liberal use of notes and annotations
• Don’t be afraid to experiment
Things to keep in mind
![Page 6: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/6.jpg)
• Keep it simple
• Use placeholders
- Text
- Images
A Basic Wireframe
![Page 7: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/7.jpg)
![Page 8: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/8.jpg)
![Page 9: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/9.jpg)
![Page 10: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/10.jpg)
Wireframing benefits
• Reach Consensus
• Solicit Feedback
• Get Early Buy-In
• Stay on Track
• Missing Content or Features
Connect clients, stakeholders, designers & developers
![Page 11: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/11.jpg)
Wireframes for designersDeveloping the UI from a wireframe
![Page 12: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/12.jpg)
Wireframes for developersCreating wireframes for technical requirements
![Page 13: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/13.jpg)
You want to create an app for people in town for
a conference that need to find a place to park.
Wireframe Example
![Page 14: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/14.jpg)
Find Me Parking
1. Type of parking (street, garage, lot)
2. Show spaces on map
3. Change distance/location
4. Duration
5. Directions
6. Pay using app
7. Bookmark spaces
App Requirements
![Page 15: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/15.jpg)
![Page 16: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/16.jpg)
![Page 17: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/17.jpg)
![Page 18: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/18.jpg)
TIME:
30minutes
Wireframing Activity
Meet U There app
App Requirements
1. Invite People
2. Map Locations
3. Restaurants in Vicinity
4. Restaurant Details
5. Select Restaurant
6. Meeting Time
Meeting people from the conference at a local restaurant.
![Page 19: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/19.jpg)
Group Presentations
![Page 20: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/20.jpg)
Wireframing Q&A
![Page 21: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/21.jpg)
Thank you!
![Page 22: UX/UI Workshop: Visualizing Ideas with Wireframingproceedings.esri.com/library/userconf/devsummit17/papers/dev_int... · Creating wireframes • Fight the urge to make them look pretty](https://reader031.fdocuments.net/reader031/viewer/2022011807/5c65ff2c09d3f2d8348b8e45/html5/thumbnails/22.jpg)