View
423
Download
3
Category
Preview:
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.
Citation preview
“I did some wireframes.
Then I had to live with it.”
John-Philip Johansson
UX Developer @ Avanade
@seriemajp on Twitter
Components
Consistency
Names
tooltipSelect
userList
companyInfoShipping
articleListEdit / articleListRead
Design a standard form
Use existing GUI frameworks
Think inside the box
Wireframe
Annotate
My page
Highlight links
My page
Highlight CMS-areas
Mobile
Popups?
Types
Responsive Web Design
Flow naturally
Grids
We used 12 columns
Define breakpoints
Define flows
“quarter-width” is “half-width” on mobile
Happy/Sad path
Listings
Listings
No items found
Did you mean “mini”?
Language
Language
And right-to-left languages?..
Alternative paths
Alternative paths
Log in to see your price!
Organize
Names
Page wireframe: WF-015
Components/masters: WFM-003
User flows: UIF-015
Forms
Sad path?
Load / Reload
Prototype
Do it
Available online
Create components
We already talked about this!
Graceful degradation /
Progressive enhancement
Developers, developers, deve
lopers!
Management
Understand browser
limitations
Access to the users
Sign off:
functionality on wireframes
Sign off:
design in target browser
Implementation
Offline HTML
Use icon-fonts
Ask for url flags
http://theurl.com/?theme=supplies
http://theurl.com/?debug=true
http://theurl.com/?offline=true
Start with flat styling
Thanks
@seriemajp
Recommended