They give you the flexibility of moving your meeting, and you can even get them double-sided for those that have lots of ideas. So head on over to http://www.GuiBoards.com and take a peek!

- Michal

Do you have some mockups you would like to share? Drop us a line!

- Ruben

Yesterday a small company called ‘Napkee’ launched, that made our process complete.

Here’s how we do it:

STEP 1 – In the ‘idea phase’ we only use a whiteboard and MockupMagnets (www.MockupMagnets.com).

STEP 2 – When ideas stop changing, we move to using Balsamiq Mockups (www.Balsamiq.com).

STEP 3 – We turn our mockups into HTML / CSS / JS / FLEX using Napkee (www.Napkee.com)

STEP 4 – We outsource the development for a small fee, using coders at oDesk (www.oDesk.com).

That’s it!

Now that Napkee has enabled us to turn our Mockups (Balsamiq) into functional prototypes (Napkee), all we need from there is a coder to make it fit our framework (oDesk). It’s a ‘geniously’ simple process. I advise you to look at these websites today!

- Ruven

More priceless development advice?
Read our little book ‘The Unplugged’ (Kindle Book | E-book| Hardcover | Amazon) or simply subscribe to our feed (RSS | E-mail) to get more tips for free!

Example of a GuiBoard with an iPhone App wireframe

1 – Use colors
Explain the colors before you send the wireframes to your team. Here’s what we use:

• Blue for everything clickable (congruent with the GuiMags)
• Red for explanatory text that (that shouldn’t make it into the design)
• Black for everything else (screen real-estate, panes, etc)

Do note that your wireframes are not designs. They’re not made to look pretty, they’re made to be functional so your designers and developers can turn them into ‘prettyness’. In the beginning stages of development, it is wise not to focus on graphics yet, but purely on user interaction instead. This will save you loads of money and time in the end.

2 – Use standard sizes
If every screen you draw has a different size, you’ll confuse people. This is a common problem when ‘free-styling’ on a whiteboard. To solve this issue, but still maintaining the flexibility of a quick sketch, we invented GuiBoards. They are magnetic whiteboards with scaled resolutions already printed on them. Simply trace the lines already present on the board and it’s creative juices from there.

- Michal

More information about GuiBoards? Click here.

In 2006 we invented GuiMags: magnetic user interface controls to use on your whiteboard. You can write on them, wipe off and move them around. Within days of their public release a couple years later, they became a popular tool for developers and interface designers to replace old techniques like Paper Prototyping.

Taken aback by the sudden popularity (we were completely sold out within a couple days) we understood there were more people besides us that loved using them. We decided to release more of the tools we crafted in secret.

GuiBoards are a simple but genius concept.
They are magnetic dry-erase boards especially made for developers and software designers. Underneath the coating, there’s a printed grid that displays traceable lines. Trace the right color and you’ll have the perfect resolution for drawing wireframes for an iPhone, computer screen, HD TV and so on. Of course, you can also ignore the grid and use it as a normal whiteboard.

The resolutions are corresponding exactly with the size of the GuiMags. This makes it easy to simply snap a picture of your wireframe and send it to your team for development. No need to use a computer at all.

- Ruven

GuiBoards come in different sizes. Click here for more information!

When you use them as much as I do, you’ll find out that pretty soon you’ll walk into the following:

• A regular Dry-Erase marker can’t write much information on the GuiMags
• It’s hard not to wipe some of the writing off when you move the magnets around

To solve these problems easily, we have researched maybe a hundred pens and markers to see what works best and these are some of the conclusions we came to:

Use a fine tipped pen to fit more writing on your GuiMags

In order to fit more writing, don’t use a dry-erase marker to write on your magnets. Dry-erase markers don’t come with fine tips (If you find one, let me know, but to my knowledge, they don’t exist). There are plenty of pens that do come with fine tips though, but not very many that can write on magnet coating. That brings us to the second solution:

Use non-permanent pens to stop accidental erasing

These pens can write on magnets and don’t erase when your finger scrubs over them by accident. At the same time, when made a mistake or done with prototyping, you can use a slightly wet cloth to wipe them off. It’s that easy. In practice, I find I don’t have to wipe much, as the magnets need to move around more than changing the writing on them.

So there you have it. Use dry-erase markers for all the design and ’screen real-estate’ management on your whiteboard, but keep fine-tipped non-permanent pens handy to write on your UI controls.

Let me know what worked for you!

-Michal