Tips to make your wireframes look like the final product using Axure RP
In this article I’ll share some of the techniques I use to get to a final product fast with as few steps as possible, using the prototyping tool Axure RP, but not exclusively.
You might ask – why go through the hassle of making your early sketches look so polished? Many things might change down the iteration-road anyways. You are absolutely right, but it actually does not take much to go from sketchy wire to slick branded product. Even a more convincing argument for doing so, is that you can more effectively user test with a ‘final’ product and not some napkin sketches that spoil your research data and require your test participants to imagine what your future app might look like. Remember: always control (test) in a realistic environment. It does not take that much effort; just follow these easy to apply design tactics.
Step 0: Set up your document for speed
Icon fonts help you quickly change size and colour of desired graphics and there is no need to fiddle around with single objects or images. Widget libraries come in handy, but oftentimes my own preference is to simply work off a blank slate. So let’s set that aside for a moment. I don’t have to mention that you should always work with real text and never, ever with placeholder copy (e.g. Lorem Ipsum). This just creates many problems down the road (line breaks etc.). Don’t be sloppy. It will make a big difference. Remember: a user interface is 80% text so better get that worked in early.
Generate and work off a grid. I still use the 960px grid with 16 columns since the object proportions it renders work on desktop, tablet and mobile. Say, you’ve created a button that fits the proposed form factor of your 960px grid; the same button can now be used in your designs for all other screen views or view ports shown above – no rescaling needed.
Step 1: Imitate most common UI patterns
From a visual perspective – this is more important when you are working on mobile (native)applications. Nonetheless, I suggest to always stick to the most common functionality and visual appearance of existing and popular UI elements. If you are working on an iOS app, stick to Apple’s UI guidelines. Same is true for Android. In case you are working on a web-app, then look for a popular web component library like Twitter Bootstrap and inherit forms, shapes, proportions, visual styles and functionality. Avoid reinventing the wheel unless you have good reasons to do so. And remember; the location of a e.g. dropdown is an expression of why it exists.
Step 2: Reduce elements on the screen
This is the absolute killer tactic to quickly reduce screen complexity and your workload. I see overcomplicate designed UI modules over and over again, and people are making their lives as designers harder than it actually is. Take the pricing module shown above; it’s two of the same UI modules side by side, composed from different elements. One has 20 elements, the other just 8. What do you think is easier to build, style and update? You can style a lot leveraging tables in Axure, line spacing, font sizes, font thickness, text alignment etc.
Step 3: Introduce one additional colour
I assume you don’t have a visual design background, but that doesn’t matter; don’t be afraid of colour and never fear the backslash you’ll get from one of your brand designer colleagues. Work together and select quickly a simple 2 to 3-colour palette to work off that. I always go with three tones: light colour, dark colour, a signal or any bright colour. First; apply colour to key call to actions. Second; apply colour to important words, sentences or paragraphs. Third; use colour as a background drop – more later.
Step 4: Divide your page into large sections
Any page that you created has at least two or three sections: top, middle and bottom. Use lines or large containers to distinguish them and pick one section and give it a background colour. This will help people better distinguish when one section ends and a new section/topic starts (sequential information processing). Apply this technique when you want to highlight forms inside a long page.
Step 5: Use background images, graphics or patterns
Don’t decorate – distinguish and guide the eye. With that principle in mind, pick a generic image or pattern (link1, link2) that does not offend anyone and stick it in somewhere appropriate on the page. Skip this step if your page has tons of functionality such as a dashboard or community app. Add a logo instead. It can make a big difference.
Hi! Did you know I am a freelance UX designer and Researcher? You can hire me for your next research session or product design sprint.If you love Axure RP – then head over to:
