Pick your battles, know your styles
Whether for desktops, on a tablet or the this mythical idea of a mobile internet (there is only one web to experience – but that a different post!) the modern UX-er should be skilled in the art of wire-framing. The style you use should come from the answers to these three things:
- Process – From low-fidelity through to fully functioning prototypes is the sure-fire route to excellence. In reality, how often does this really happen. If you have enforce a process, I would insist on the sketching and on the final design stages.
- Resources – I have sat in top-level boardroom meetings in the most stylish settings in the capital, tea and coffee from all over the world. Clearly, resources were not a factor here – so you would be expected to know Azure inside out and be expected to roll-out full functioning Fireworks prototypes. You may even get some business heads thinking your protoypes were so good , it’s a done job!
- Quick turnaround – Picture the scenario, your stakeholder is looking for a quick – fix. You have fought your corner but there are no requirements, no analysis, no nothing. Always try to push for more than a few scribbles on the back of napkin but sometimes it is more productive just to get on with it.
Depending on the answers to these issues will depend on the wireframing style you deploy
Clean lines and clean headings
Here I convinced a client to go evolution rather than revolution. A cross-platform solution that worked everywhere and needed updating only once, deployed everywhere – this is responsive web design. This visual easily demonstrates how this can be achieved from desktop, to tablet to mobile
The one-column approach
Personally, I think it’s beneficial to take the time to think through the issues of adapting your design to mobile and advocate a mobile-first design approach. This wire-frame style does what it says on the tin, it communicates quickly what the UX-er in an efficient and clean manner
Single-Column Layouts
As you think about sketching your layout, a single-column structure tends to work best as these sketch wireframes in landscape mode show. Not only does this help with managing limited space on the smaller screen, it also helps you easily scale between different device resolutions when flipping. One tip, use responsive web design techniques to take a multi-column desktop site layout and adapt it to a single-column layout
Sketch wireframes
By far the more fluid and progressive style of wire-framing, and a personally my favourite. Make your drawings flows and sketchy enough to convey the idea, but detailed and real enough to communicate images and ‘play me’ buttons, for instance
General wire-framing
Use good quality paper and pen and lay your UI in your own style, this is especially effective when employing a kanban software development style, which was an important consideration here. This style allows for just-in-time delivery, while not overloading the software developers. Capturing that creative spark this way, with fluid sketches is an effective and quick method of working with the client without committing anything to code, thus saving yourself time and number of actual design revisions
‘Neat and tidy ‘ simple feedback back
Of course, you are already thinking with your mobile hat on. This form is simple and if possible, pre-populated. Think low-fidelity and your creations start resembling a rough sketch or a quick mock-up, low-fidelity wireframes have less detail and are quick to produce. These wireframes help a project team collaborate more effectively since they are more abstract, using rectangles and labeling to represent content
Peaked your interest?
This is but part of a selection of design information russellwebbdesign generated for the creative community out there. Please contact us further to discuss if your brand really wants to benefit from the new mobile channel:
info@russellwebbdesign.co.uk
If something has peaked your interest. Please leave a comment below.