layout and wireframing
Post on 21-Oct-2014
654 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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.
Hierarchy is of outmost importance.
Go crazy without sacrificing mobile experience
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.
) 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!
top related