Prototypes can help make or break the usability of a website. In the age of the multi-device web, how can we use prototypes to craft better experiences for our end users – and collaborate more effectively with internal teams and clients along the way?
This session, originally presented at the Penn State Web Conference 2014, covers eight flexible ideas (and a number of tools) for building better prototypes for a variety of screen sizes and input types.
8. Prototypes can help us plan websites for the extreme
design constraints imposed by multiple devices.
29 inches wide
LG monitor
2.3 inches wide
iPhone
29. This content prototype has little
to no style, but it demonstrates:
• mobile-first methodology –
a single column of stacked
content
• real content (not lorem ipsum!)
• content models (subhead,
headline, blurb, line length)
• the order of content on the page
31. In Brown’s case, a minimum viable
content plan included a plan for:
• social media needed to support the site
• longer form stories with embedded media
• interactive timeline content
• content models for the above
(fields, word count, image needs)
44. Pattern Lab is:
• an iterative design
and development tool
that can be used for
prototyping
• a static site
generator, similar to
Jekyll or Octopress
• a viewport resizer
• annotation tool
48. Ideally a user can still get to all the
same content regardless of device.
They just might see shorter initial versions or fewer
initial entries at one time on smaller screens.
60. It’s 2014. Most clients have
seen a wireframe before.
It’s 2014. Most clients have not
seen a style tile before.
It’s your job to explain what the prototype
is and what kind of feedback you need.
61. “It’s part of our job to decide the
most appropriate way to share
our work with a client.”
—@laurakalbag
Source: A List Apart