How to draw so they understand
If your prototype drawings are clear, you’ll have to do half of the explaining to your designers, developers or freelance team. Here’s a couple of quick take-away’s on drawing clearly.
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.
Leave a Comment