Wireframes
Wireframes are a great asset on the way to a final design. Let’s take a look through some different options and some pros and cons. I’m using a TripIt concept (Materialising TripIt) as an example. Let’s begin.
Hand sketches
Almost all of my work starts with quick sketches. I find it the fastest way to get my thoughts out of my head into a visual form. It’s important to keep it quick. I’ve seen some designers get out a ruler and make everything perfect. But all that does is drag it out from 30 seconds to 5-10 minutes. And in the same time you could have a rough wireframe almost finished in Illustrator!
Pros: Very fast, allows for quick variations, easy to modify and not precious about amends
Cons: Can be considered messy, not the best to present to clients
Rough wireframes
These are a great middle ground wireframe. When you really need to get a lot done in a short timeframe and it’s more about laying out elements than being pixel-perfect.
The drawn style is key here. It allows for people to give feedback and not be concerned about how much time you have invested in the wireframe.
Pros: Fast, don’t need to be precise, keeps it open for discussion, digitised
Cons: Black and white, does not show hierarchy
Clean wireframes
A very clear wireframe that can show the layout in all it’s glory. Elements are defined and you can go as far as adding font weight and shades of grey for visual hierarchy. Can be as precise as you have time for.
Pros: Gives a very clear idea of the layout
Cons: Can be caught up in the time consuming detail of fonts, alignment and spacing
Designs
Usually you have gone through at least one of the wireframe techniques, then you are ready for design. A polished visual product. Adding in brand colours, fonts, images and icons you get a great looking screen that is ready for annotation and then development.
Pros: A pixel-perfect representation, visually appealing
Cons: Changes can be slow across many designs, always wireframe first!
Side by side
From left to right we go from sketch to design. Low-fidelity to high-fidelity. Faster to slower. I usually find a combination works best. A quick sketch, a rough or clean wireframe and then into design does the trick. And if you have the time, you could use all four steps.
Hopefully this gives you a good overview of the possible wireframe steps. I have always found this process speeds up design by focussing on content and layout before visual style.