ux marshals #001 2013: wireframed (full edition)
DESCRIPTION
"I did some wireframes. Then I had to live with it" That describes the contents of this presentation. During one project I had to create wireframes, and then implement it all in HTML/CSS/JS. These are the things I learned about doing better wireframes.TRANSCRIPT
![Page 1: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/1.jpg)
![Page 2: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/2.jpg)
“I did some wireframes.
Then I had to live with it.”
John-Philip Johansson
UX Developer @ Avanade
@seriemajp on Twitter
![Page 3: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/3.jpg)
Components
![Page 4: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/4.jpg)
Consistency
![Page 5: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/5.jpg)
Names
tooltipSelect
userList
companyInfoShipping
articleListEdit / articleListRead
![Page 6: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/6.jpg)
Design a standard form
![Page 7: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/7.jpg)
Use existing GUI frameworks
![Page 8: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/8.jpg)
Think inside the box
![Page 9: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/9.jpg)
Wireframe
![Page 10: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/10.jpg)
Annotate
My page
![Page 11: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/11.jpg)
Highlight links
My page
![Page 12: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/12.jpg)
Highlight CMS-areas
![Page 13: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/13.jpg)
Mobile
![Page 14: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/14.jpg)
Popups?
![Page 15: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/15.jpg)
Types
![Page 16: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/16.jpg)
Responsive Web Design
![Page 17: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/17.jpg)
Flow naturally
![Page 18: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/18.jpg)
Grids
We used 12 columns
Define breakpoints
Define flows
“quarter-width” is “half-width” on mobile
![Page 19: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/19.jpg)
Happy/Sad path
![Page 20: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/20.jpg)
Listings
![Page 21: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/21.jpg)
Listings
No items found
Did you mean “mini”?
![Page 22: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/22.jpg)
Language
![Page 23: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/23.jpg)
Language
And right-to-left languages?..
![Page 24: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/24.jpg)
Alternative paths
![Page 25: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/25.jpg)
Alternative paths
Log in to see your price!
![Page 26: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/26.jpg)
Organize
![Page 27: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/27.jpg)
Names
Page wireframe: WF-015
Components/masters: WFM-003
User flows: UIF-015
![Page 28: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/28.jpg)
Forms
Sad path?
![Page 29: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/29.jpg)
Load / Reload
![Page 30: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/30.jpg)
Prototype
![Page 31: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/31.jpg)
Do it
![Page 32: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/32.jpg)
Available online
![Page 33: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/33.jpg)
Create components
We already talked about this!
![Page 34: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/34.jpg)
Graceful degradation /
Progressive enhancement
![Page 35: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/35.jpg)
Developers, developers, deve
lopers!
![Page 36: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/36.jpg)
Management
![Page 37: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/37.jpg)
Understand browser
limitations
![Page 38: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/38.jpg)
Access to the users
![Page 39: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/39.jpg)
Sign off:
functionality on wireframes
![Page 40: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/40.jpg)
Sign off:
design in target browser
![Page 41: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/41.jpg)
Implementation
![Page 42: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/42.jpg)
Offline HTML
![Page 43: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/43.jpg)
Use icon-fonts
![Page 44: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/44.jpg)
Ask for url flags
http://theurl.com/?theme=supplies
http://theurl.com/?debug=true
http://theurl.com/?offline=true
![Page 45: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/45.jpg)
Start with flat styling
![Page 46: Ux marshals #001 2013: Wireframed (full edition)](https://reader035.vdocuments.net/reader035/viewer/2022081404/559458c91a28ab732f8b47fc/html5/thumbnails/46.jpg)
Thanks
@seriemajp