“I did some wireframes.
Then I had to live with it.”

John-Philip Johansson
UX Developer @ Avanade
@seriemajp on Twitter
Components
Consistency
Annotate
Highlight
My page
Mobile
Popups?
Types
Responsive Web Design
Flow naturally
Happy/Sad path
Listings 
Listings 
No items found
Did you mean “mini”?
Language 
Language 

And right-to-left languages?..
Organize
Names
 Page wireframe: WF-015
 Components/masters: WFM-003
 User flows: UIF-015
Forms

Sad path?
Load / Reload
Prototype
Do it
Thanks
@seriemajp
UX Open 2013 (edited): Wireframed
Upcoming SlideShare
Loading in …5
×

UX Open 2013 (edited): Wireframed

844 views
765 views

Published on

A short presentations about what I learned from creating wireframes, and then having to implement them in HTML, CSS, and JavaScript. It was held on UX Open 2013, 10th of October.

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

No Downloads
Views
Total views
844
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • In Axure: Use mastersGive them proper names, like* tooltipSelect* userList
  • CommentsRequirement ID’sColor codeHighlight CMS areas
  • Background scrolls insteadZoom gets destroyed
  • Let things “drop” naturallyDefine column-size-changes (half-width, quarter-width)
  • Empty tables and lists.Show message box?Help user with “did you mean” or “related”?
  • Number and date formatsCountry laws (cookies)Message boxes
  • Consider specific types, as: URL, email, zip code, phone number, number, IBAN, credit card, personal security number, etc
  • Keep it onlineShare with developers
  • UX Open 2013 (edited): Wireframed

    1. 1. “I did some wireframes. Then I had to live with it.” John-Philip Johansson UX Developer @ Avanade @seriemajp on Twitter
    2. 2. Components
    3. 3. Consistency
    4. 4. Annotate
    5. 5. Highlight My page
    6. 6. Mobile
    7. 7. Popups?
    8. 8. Types
    9. 9. Responsive Web Design
    10. 10. Flow naturally
    11. 11. Happy/Sad path
    12. 12. Listings 
    13. 13. Listings  No items found Did you mean “mini”?
    14. 14. Language 
    15. 15. Language  And right-to-left languages?..
    16. 16. Organize
    17. 17. Names  Page wireframe: WF-015  Components/masters: WFM-003  User flows: UIF-015
    18. 18. Forms Sad path?
    19. 19. Load / Reload
    20. 20. Prototype
    21. 21. Do it
    22. 22. Thanks @seriemajp

    ×