“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