UX Open 2013 (edited): Wireframed

23
Wireframed Tips from the trenches for better wireframes

description

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.

Transcript of UX Open 2013 (edited): Wireframed

Page 1: UX Open 2013 (edited): Wireframed

Wireframed

Tips from the trenches for better wireframes

Page 2: UX Open 2013 (edited): Wireframed

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

John-Philip JohanssonUX Developer @ Avanade

@seriemajp on Twitter

Page 3: UX Open 2013 (edited): Wireframed

Components

Page 4: UX Open 2013 (edited): Wireframed

Consistency

Page 5: UX Open 2013 (edited): Wireframed

Annotate

Page 6: UX Open 2013 (edited): Wireframed

Highlight

My page

Page 7: UX Open 2013 (edited): Wireframed

Mobile

Page 8: UX Open 2013 (edited): Wireframed

Popups?

Page 9: UX Open 2013 (edited): Wireframed

Types

Page 10: UX Open 2013 (edited): Wireframed

Responsive Web Design

Page 11: UX Open 2013 (edited): Wireframed

Flow naturally

Page 12: UX Open 2013 (edited): Wireframed

Happy/Sad path

Page 13: UX Open 2013 (edited): Wireframed

Listings

Page 14: UX Open 2013 (edited): Wireframed

Listings

No items found

Did you mean “mini”?

Page 15: UX Open 2013 (edited): Wireframed

Language

Page 16: UX Open 2013 (edited): Wireframed

Language

And right-to-left languages?..

Page 17: UX Open 2013 (edited): Wireframed

Organize

Page 18: UX Open 2013 (edited): Wireframed

Names

Page wireframe: WF-015

Components/masters: WFM-003

User flows: UIF-015

Page 19: UX Open 2013 (edited): Wireframed

Forms

Sad path?

Page 20: UX Open 2013 (edited): Wireframed

Load / Reload

Page 21: UX Open 2013 (edited): Wireframed

Prototype

Page 22: UX Open 2013 (edited): Wireframed

Do it

Page 23: UX Open 2013 (edited): Wireframed

Thanks

@seriemajp