Rails Rumble 2013: “Phaser Beam” Wireframing

wire frameLow-Fidelity Pencil Wireframes

Wireframing is a common and time-tested tool to hash out app details. Yet for hackathon efforts such as Rails Rumble, this planning step is often skipped. When you’re thinking of knocking out code as quickly as you can, any form of “documentation” seems cumbersome.  Here are a couple reasons teams should wireframe ahead of time.

Wireframe to plan.

Plan, don’t create” is how the organizers describe what is allowed prior to the 48-hour competition phase. Wireframes result in a nice visualization of chunks of work to be planned and prioritized.

Wireframe to define scope and vision.

Teams that do not walk through their app ahead of time will find team members arrive on Rumble day with different visions which need reconciled. Without consensus on up front, too much time is wasted discussing and debating. Wireframes are a great tool arrive at a shared vision prior to the Rumble.

Use whatever tools work for you (we use pencil and paper).

Though digital mockups are allowed, pencil and paper are the easiest way to iterate through ideas. The classic cathartic act of crumpling up discarded ideas and tossing them across the room can’t be replicated by digital tools. For this and other reasons we like pencil and paper. We use my grade-schooler’s algebra graph paper. For other alternatives, here are sites with ready-to-print sketch sheets.

http://zurb.com/playground/responsive-sketchsheets

http://konigi.com/tools/graph-paper

All of that said, let me say that I write this mostly to share our approach. Other years we have more-or-less winged it. This year we’re trying a little more up-front planning. Yet what it really comes down to is this:

Wireframe or not. Plan ahead or “wing-it!”.

It doesn’t really matter as long as you Have Fun!

(I just happen to think you’ll have more fun if you plan ahead.)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s