Introduction: Woody UI Kit
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
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
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.
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.
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.
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.
Place blocks on the frame and edit the labels adding detail.
You can make any screen you like, moving blocks to test your designs.