How to Wireframe from Clay Parker Jones on Vimeo.
I kinda love wireframing* things. Mostly because I longed to be an architect while I was younger, and like George Costanza, never became one. This video quickly runs through my process for wireframing the new obamabaton.com site in Microsoft Visio. You’ll hear a LOT more about this project in the days to come, courtesy of El Gaffney and my boys at Hustlewood.
Some tips for a good wireframe:
- Use the grid to line things up. I find that the more you fuss over the details, the easier it is to sell to both clients and design teams. Why? It shows that you care. It also shows that you’ve thought about it for more than a few minutes.
- Add all the user interface elements you think you’ll need, and then enlist a team of people to help you hack away at them until you’re left with a clean interface. More elements is usually NOT better, while more detail usually is.
- Have reasons for why you do things, other than that it is “innovative” or “looks cool”. However, “expected” is also not a reason. Metrics, for one, count as good reasons. As do particular experiences that you may have had elsewhere.
- Sketch on a whiteboard first. Then move to paper. Then go play basketball or go for a walk. Poke around on the web for a bit. Then translate to a design/wireframe program of your choice.
Lastly, have fun. I know I did.
* “Crap, what’s a wireframe?” It’s kinda like a blueprint for the design of a website. Have questions? Ask them in the comment area.
2 Comments
I wanna know more about this Obama Baton project. GO!
ditto. more info, less sneakiness, prease.
8 Trackbacks
[…] How to WireframeHere’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]
[…] How to WireframeHere’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]
[…] How to Wireframe Here’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]
[…] How to WireframeHere’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]
[…] How to Wireframe Here’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]
[…] How to WireframeHere’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]
[…] How to Wireframe Here’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]
[…] How to Wireframe Here’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward. […]