This instructable shows how to build a Woody UI Kit.

You can also get a ready to use kit from Woody UI Kit website woodyui.com.

Description

The Woody UI Kit is a low cost, low-fidelity prototyping tool for designing web and mobile interfaces using wooden blocks, paper and pencil.

The Woody UI Kit is aimed at UI designers, web and mobile developers. It leverages the “feel” of moving around wood blocks, and brings back to the user’s memory when as a kid she played with wooden toys. Handling something physical instead of moving the mouse pointer on a screen, also fosters the creativity side of the brain, and allows for offline work, maybe with kids on the kitchen table.

Furthermore the designer can collect and reuse blocks, creating a personalized library of ready to use UI templates.

Contents

The kit is built out of the following pieces:

- A tablet-like wooden device with a metal screen, replicating a tablet device with a 7''.

- Two phone-like wooden device with a metal screen replicating smartphone devices with a 3.4'' and 4'' screen.

- A number of magnetic wooden blocks correctly replicating in size the most common UI controls used to build user interfaces.

- A set of sticker sheets allowing to draw by pencil the detail of each interface element and stick them on the wooden blocks.

Tools

In order to build a Woody UI kit you need access to:

- A laser-cutter
- A vinyl cutter or plotter

If you like you can build a simplified paper or cardboard version using only scissors.

Materials needed

In order to build the wooden version you need:

- Several sheets of pinewood (or any other soft cheap wood) with a maximum height of 0.5 cm.

- Adesive Paper Labels (A4 or letter size)

- Magnetic paper sheets (A4 or letter size)

- Small sheets of metal or magnetic drawing board.

- Glue for wooden materials

Step 1: Download Project Files

In order to prepare the kit, you should start by downloading the files for lasercutter and plotter.

The files are shared with a Creative Commons Attribution Share-alike License.

You can download them from the following Github project:

https://github.com/fibasile/woodyuikit

Identify the drawings you need

You can find several drawings:

The blocks used for creating the interfaces

- blocks_smartphone.dxf
- blocks_tablet_page1.dxf
- blocks_tablet_page2.dxf

The frames representing actual devices

- smarphone-4.dxf
- smartphone-3_4.dxf
- tablet.dxf

Step 2: Prepare the Frames and Blocks

Using your laser cutter you can start preparing the frames and blocks.

You should check if the laser cutter is configured properly to make sure blocks are fully cut and will come out from the frames when pressed.

Step 3: Prepare the Devices

Once you have the cut devices frames you should glue them together.

The final result should look similar to a real devices.

Add metal sheets

To complete the device frame you should now put the metal sheets, cut with the same size as the frame's screen.

You can take sizes from the dxf drawings and then ask some metal shop to cut the precise shape.

If you are using magnetic whiteboard, scissors could be enough.

Step 4: Prepare Blocks

Cut the labels using the same files as the blocks using a plotter or vynil cutter.

Now you are ready to prepare the blocks with labels.

Step 5: Start Using Woody UI Kit

You can now start using the kit just assembled.

Place blocks on the frame and edit the labels adding detail.

You can make any screen you like, moving blocks to test your designs.