Your SlideShare is downloading. ×
0
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
A Hands-on Introduction to Building Wireframes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A Hands-on Introduction to Building Wireframes

304

Published on

Slides from my General Assembly class on wireframing. The class took place in Hong Kong on 18 Feburary 2013. …

Slides from my General Assembly class on wireframing. The class took place in Hong Kong on 18 Feburary 2013.

Thanks to Allison Baum for organizing.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
304
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A HANDS-ONINTRODUCTION TOBUILDING WIREFRAMESJason Lihongkonggong.com
  • 2. AGENDA 2 0:05 Introduction 0:25 Make a wireframe from Twitter.com 0:30 Make your own wireframe, mobile first 0:30 Convert your wireframe for desktop
  • 3. MEET & GREET 3 My name is… My name is… My name is… One website I like is… One website I like is… One website I like is… My name is… My name is… My name is… One website I like is… One website I like is… One website I like is…YOU HAVE 1 MINUTE…
  • 4. INTRODUCTIONWHAT ARE WIREFRAMES? http://en.wikipedia.org/wiki/ http://www.tokyowebdesigns.com/advice/1487/ http://www.flickr.com/photos/d2clon/4402993445/ Website_wireframe wireframing-your-site-what-why-and-how
  • 5. EXERCISE 1 5Make a wireframe from Twitter.com http://en.wikipedia.org/wiki/ http://www.tokyowebdesigns.com/advice/1487/ http://www.flickr.com/photos/d2clon/4402993445/ Website_wireframe wireframing-your-site-what-why-and-how
  • 6. EXERCISE 1: TIPS & TRICKS 7Use font sizes, all-caps, link colors, grid… http://en.wikipedia.org/wiki/ http://www.tokyowebdesigns.com/advice/1487/ http://www.flickr.com/photos/d2clon/4402993445/ Website_wireframe wireframing-your-site-what-why-and-how
  • 7. EXERCISE 2: MAKE A NEWS SITE 81. Hong Kong news (general news or niche)2. Pick an update schedule (daily, weekly, monthly)3. Imagine a “fake” article4. What sections does it have?5. Who reads it?Sketch away. Mobile view only please.
  • 8. EXERCISE 1: SHOW & TELL 9
  • 9. EXERCISE 2: CONVERT TO DESKTOP 10Sketch away. Remember to be consistent with mobile.
  • 10. EXERCISE 2: SHOW & TELL 11
  • 11. A hands-on introduction to building wireframes 12http://strangeloscopic.blogspot.hk/2012/04/that-all-folks-pour-linstant.html Jason Li hongkonggong.com

×