Most UI designers understand the process of wireframing, yet it still hasn’t caught on as a vital part of the creative process. When you’re new and just getting started in the field preliminary sketches may feel bloated and unnecessary. But once you adapt to wireframing it becomes a fun & adventurous process.
There is also a big difference between low-fidelity and high-fidelity design. On the subject of wireframing low-fidelity refers to the initial concept with rough sketches, general concepts, and moldable interfaces. I’d like to cover low-fidelity design and the process of creating a low-fidelity wireframe from imagination.
Lo-Fi vs Hi-Fi
Something worth clarifying right off the bat is a major distinction between low-fidelity and high-fidelity wireframing. This post covers low-fidelity which is more about the bare-bones concept. You want to plan out the general location of items such as navigation, buttons, content, etc. But you don’t need to get detailed with the size, shape, or interface style.
High-fidelity is where you grow more concerned about the look and overall appeal. Composition is important for both lo-fi and hi-fi design – the devil is in the details. When you’re still new to the whole concept it may seem intimidating. Every new creative outlet is intimidating at first but once you understand the rules it should become clearer.
To avoid super-detailed designs I recommend drawing with the absolute basics in mind. Try plotting out a series of different layouts to see which one you like best. You’re able to customize the number of columns, size of columns, structure of content, really anything you like. It’s all a matter of ingenuity and your willingness to incorporate lateral thinking into the design process.
Wireframing Mediums
Two primary mediums are used for low-fi wireframing: digital or traditional. I myself prefer traditional because it feels more rapid and easier to put down ideas. But plenty of designers like the digital process because you can ensure more precision with each measurement.
In a past article we’ve covered the top 5 wireframing tools which are mostly all digital. Aside from online webapps like Moqups or Wireframe.cc you also have the option to use digital graphics editing software. Programs like Adobe Photoshop or Illustrator can be perfect for wireframing once you get into a routine.
But if you like the old pencil-and-paper route this is just as viable. My biggest pet peeve working digitally is the limitation between the mouse and your final output. When using a pencil all you need is some pressure applied onto the paper and your idea is set. Things transfer directly from your mind onto paper and you see the results immediately. The biggest downside is a lack of explicit control unless you’re using measurement tools or drawing on grid paper.
There is no right or wrong choice when it comes to wireframing. Either medium should hold up and prove useful. The only important aspect of this whole process is your final output. Can the finished wireframe actually be useful to the project?
Reducing Fidelity
Attempting to find the line between low-fi and hi-fi can be intimidating. I’ll admit that even I find myself getting bogged down into details way too soon in the process. So where exactly is the point of reduced fidelity without pushing for exquisite detail?
This is difficult to explain in words but there are markers. Ideally you should avoid too much detail like specific words or text found in labels or buttons. Unless the text style directly pertains to the layout itself, just use blocks or scribbles. Blokk font is a free open source font which can be used for digital wireframing.
Another thing to remember is how much depth you wish to expand upon. You should be able to glance at the wireframe and understand the general direction. Think of low-fi sketches like an outline or shadow of a figure. You may not be able to see the details but you can most likely pinpoint key areas in the shape. Reduced fidelity means reduced detail but focused clarity.
It helps to use labels or markers which explain certain aspects of the site. Like in the above Dribbble shot posted by Rocky Segarra you’ll notice lines pointing to individual sections of the interface. This method can help organize your thoughts which tend to get jumbled up when designing over a long period of time. This way you’ll still have a clear direction coming back to the wireframe after a couple days or weeks.
Another point I like to mention is avoiding colors and effects. Gradients, gloss, shadows, all of that stuff comes later. Work in grayscale and if you need to remember to add an effect, just place a note in the margins. Your goal should be reducing the composition down to crucial elements and nothing more.
Rapid Prototyping
Once you’ve done a few projects accompanied by wireframe designs it’ll start to feel more comfortable. But when first starting out you’ll probably encounter something that I also frequently encounter – a deep-rooted sense of self-loathing. Not loathing for yourself, cause you’re awesome, but for the design work.
The best way to overcome this negative feeling is to push through it. Whether the wireframe concept actually is terrible doesn’t matter – you need to get familiar with the process by forging ahead and testing dozens of unique ideas. I would recommend a brazen mindset pushing out 3-5 different wireframes on each project.
Many designers have termed this process rapid prototyping for the amount of content that design created. If you can accept “failure” in a design then you’ll be able to fix it or move onto a new idea quicker. Sitting and stewing in your revulsion for a single concept won’t provide anything other than some really unappetizing stew.
Don’t feel too much pressure and just have fun with it! The best results tend to come when you’re open to anything. So keep a consistent mindset and don’t be afraid of failure. Once you have an idea just try it out and see what happens – worst-case scenario it’s bad and you move onto the next idea.
Closing
Although it may be difficult to get started, I recommend holding a care-free attitude towards wireframing. The process will become much easier if you don’t stress over it. Just go with the flow and be ready to accept ideas you don’t like – crossing off bad ideas is how you eventually reach the good stuff. If you have any other suggestions for low-fi wireframing let us know in the discussion area.