The document discusses layout and wireframing for user interfaces. It begins by defining layout as the distribution of elements and wireframing as distribution schematics. The document then discusses how layout has evolved from prioritizing business goals to focusing on user goals. Key trends in 2014 include large hero areas, full background video, and cards. The document also covers best practices for wireframing such as starting with boxes and grayscale tones before deciding on a mockup or prototype. It recommends tools and further learning.
31. “[…]
if
a
user
cannot
figure
out
where
to
go
on
a
black
and
white
wireframe,
it
doesn’t
maDer
what
colors
you
eventually
use.”
-‐
JusJn
Smith.
xenoabedesign.com
35. By
having
content
that
you
and
the
client
have
worked
closely
hand
to
hand
rather
than
dropping
in
filler
text,
not
only
are
you
already
closer
to
a
more
complete
[…]
design
[…],
but
your
design
is
a
lot
more
content
focussed
and
will
give
the
client
a
more
accurate
idea
of
how
their
message
is
going
to
be
delivered
to
the
website’s
visitors.
- Bobby Anderson. Change your Focus and Design Content First
36. 1. Requirement Gathering
2. End-user analysis
3. Get ALL the content
4. Task Analysis
4. Wireframing process
60. Starting to design a layout
for desktop sizes will give
you headaches when the time
for optimising the mobile UX
arrives.
61. Scaling down to mobile screen
resolution will mean that some
elements of the layout won’t
be shown
Is this important?
How about this?
Is this the right size?
This doesn’t fit for mobiles, maybe I should
put this content elsewhere
THIS LAYOUT SUCKS!!!
62. Only rule for designing
Mobile First:
Priority determines Hierarchy
68. WIRENATOR
SIGNIN
|
SIGNUP
Menu
Design a wireframe in 5 minutes
SIGNUP
LEARN MORE
ICON
ICON
ICON
Easy Drag and Drop
Easy Peer Feedback
SUCH WIRE
Text text text text text text text
text text text text text
Text text text text text text text
text text text text text
Text text text text text text text
text text text text text
70. WIRENATOR
SIGNIN
|
SIGNUP
Menu
Design a wireframe in 5 minutes
SIGNUP
LEARN MORE
Easy Drag and Drop
Easy Peer Feedback
SUCH WIRE
Text text text text text text text
text text text text text
Text text text text text text text
text text text text text
Text text text text text text text
text text text text text
74. Keep on learning
•
Good Design Faster
•
Guidelines for Responsive Web Design
•
Why Cards are the Future of the Web
•
Design Process in the Responsive Age
•
The Quest for Emotional Engagement