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.

1. Layout and Wireframing
January, 2014
UI/UX Dominicana

2. About me
Omar Duarte
Telecommunications Engineer
Web Product Manager since 2010

3. Layout = Distribution

4. Wireframe =
Distribution Schematics

5. UX in Layout
My opinionated summary

6. Layout
!
User Goals
Business Goals
The Olden Days

8. Users only care
about this!

9. Layout
!
User Goals
Business Goals
The Compromise

11. Layout
!
User Goals
!
!
!
!
!
Business Goals
!
!
Users First

12. https://www.simple.com/

13. Standalone
Mobile Sites
Responsive
Sites
~2006
Mobile First
2014

14. The
mobile
web
will
be
bigger
than
desktop
Internet
use
by
2015
- Morgan Stanley.

15. Long Scrolling
Sites
*
*with obvious exceptions

16. Rule of Thumb for
Long Scrolling Sites

17. Stay focused.

18. http://getaviate.com

19. Hierarchy is of
outmost importance.

20. http://dashinoodlebar.com/

21. Go crazy without sacrificing
mobile experience

22. http://wrist.im

23. Pretty and Cool is not
always the answer
http://fluger.com/

24. Layout Trends
for 2014

25. Large Hero Areas
http://www.unvael.com/
https://squareup.com/
http://pacelaw.com/

26. Full Background
Video
http://kanyewest.com/
http://www.bkwld.com/
http://packdog.com/

27. Cards
http://mashable.com/
http://etchapps.com/
http://www.silktricky.com/
(My opinion: works case-by-case)

28. Navigation is getting
Disrupted
https://squareup.com/
http://mashable.com/
http://www.socifi.com/

29. Learn and Get Inspired
http://onepagelove.com/
http://awwwards.com/
http://pinterest.com (Yes! Pinterest!)

30. Wireframing

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

32. a wireframe is
NOT
!
!
!
!
!
the first step

33. 1. Requirement Gathering
2. End-user analysis
3. Task Analysis
4. Wireframing process

34. However…

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

37. The Wireframing
process

38. There are several
ways to go…

39. *This image was shamelessly ‘stolen’ from tutsplus UX Tutorial

40. parentesis
(

41. What about
Startups?

42. Pick a method that will help
you validate your design
quick and iterate painlessly.

44. Read this, it’s awesome

45. )
moving along

46. The Grid

47. “The
grid
is
the
most
vivid
manifestaJon
of
the
will
to
order
in
graphic
design.”
-­‐
Mark
Boulton.
Grids
Are
Good
(Right?)

49. Each of these are
called units

50. 12 Unit grid

51. 2 Columns

52. 3 Columns

53. 4 Columns

54. You get the point…

56. This layout was done
in 5 minutes
Only Keynote shapes were used over a 12 column grid

57. Going Mobile
First

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

63. Most Important things
always go first.

64. Wireframing
basics

65. Start with boxes

66. Logo
Signin | Signup
Hero Area
Feature 1
Feature 2
Feature 3
Menu

67. Add text

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

69. Add grayscale tones

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

71. HD Wireframe
Decide
Mockup /
Prototype

72. Best Wireframing
tools

73. best wireframing tools

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

75. Thanks!