Layout and Wireframing

January, 2014 UI/UX Dominicana

About me

Telecommunications Engineer

Web Product Manager since 2010

Omar Duarte

Layout = Distribution

Wireframe = Distribution Schematics

UX in LayoutMy opinionated summary

!

User Goals Business Goals

Layout

The Olden Days

Users only care about this!

The Compromise

User Goals Business Goals

!Layout

!Layout

User Goals !!!!!!!

Business Goals

Users First

https://www.simple.com/

Standalone Mobile Sites

Responsive Sites

Mobile First

~2006 2014

The  mobile  web  will  be  bigger  than  desktop  Internet  use  by  2015  

- Morgan Stanley.

Long Scrolling Sites

*with obvious exceptions

*

Rule of Thumb for Long Scrolling Sites

Stay focused.

http://getaviate.com

Hierarchy is of outmost importance.

http://dashinoodlebar.com/

Go crazy without sacrificing mobile experience

http://wrist.im

Pretty and Cool is not always the answer

http://fluger.com/

Layout Trends for 2014

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

Full Background Video

http://kanyewest.com/ http://www.bkwld.com/

http://packdog.com/

Cardshttp://mashable.com/ http://etchapps.com/

http://www.silktricky.com/

(My opinion: works case-by-case)

Navigation is getting Disrupted

https://squareup.com/ http://mashable.com/ http://www.socifi.com/

Learn and Get Inspired

http://onepagelove.com/

http://awwwards.com/

http://pinterest.com (Yes! Pinterest!)

Wireframing

“[…]  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  

a wireframe is !!

!

!

!

the first step

NOT

1. Requirement Gathering

2. End-user analysis

3. Task Analysis

4. Wireframing process

However…

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

1. Requirement Gathering

2. End-user analysis

3. Get ALL the content

4. Task Analysis

4. Wireframing process

The Wireframing process

There are several ways to go…

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

parentesis (

What about Startups?

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

Read this, it’s awesome

) moving along

The Grid

“The  grid  is  the  most  vivid  manifestaJon  of  the  will  to  order  in  graphic  design.”  

-­‐    Mark  Boulton.  Grids  Are  Good  (Right?)

Each of these are called units

12 Unit grid

2 Columns

3 Columns

4 Columns

You get the point…

This layout was done in 5 minutes

Only Keynote shapes were used over a 12 column grid

Going Mobile First

Starting to design a layout for desktop sizes will give

you headaches when the time for optimising the mobile UX

arrives.

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!!!

Scaling down to mobile screen resolution will mean that some

elements of the layout won’t be shown

Only rule for designing Mobile First:

Priority determines Hierarchy

Most Important things always go first.

Wireframing basics

Start with boxes

LogoMenu

Hero Area

Feature 3Feature 2Feature 1

Signin | Signup

Add text

WIRENATOR

MenuSIGNIN | SIGNUP

Design a wireframe in 5 minutes

SIGNUP LEARN MORE

ICON ICON ICON

SUCH WIREEasy Peer FeedbackEasy Drag and DropText 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

Add grayscale tones

WIRENATORMenuSIGNIN | SIGNUP

Design a wireframe in 5 minutes

SIGNUP LEARN MORE

SUCH WIREEasy Peer FeedbackEasy Drag and DropText 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

Decide

HD Wireframe

Mockup / Prototype

Best Wireframing tools

best wireframing tools

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

Thanks!