A Hands-on Introduction to Building Wireframes

662 views

Published on

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
  • Be the first to comment

  • Be the first to like this

A Hands-on Introduction to Building Wireframes

  1. 1. A HANDS-ONINTRODUCTION TOBUILDING WIREFRAMESJason Lihongkonggong.com
  2. 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. 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. 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. 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. 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. 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. 8. EXERCISE 1: SHOW & TELL 9
  9. 9. EXERCISE 2: CONVERT TO DESKTOP 10Sketch away. Remember to be consistent with mobile.
  10. 10. EXERCISE 2: SHOW & TELL 11
  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

×