Justinmind

BLOG

Expand your prototyping knowledge

How to use UI elements to prototype better

How to use UI elements to prototype better


UI elements and libraries are the not-so secret weapon in your prototyping arsenal. Take a look at how using the right UI components can supercharge your interfaces.

When it comes to prototyping user interfaces, whether for mobile or web apps, designers are always looking for ways to build faster and more efficiently. After all, snappy iteration cycles and quick-to-build prototypes have a direct impact on cost and timescale – the faster you work through low fidelity wireframes and get to your final high fidelity prototype, the shorter your overall development time and the happier your stakeholders.

There are plenty of ways to streamline your prototyping lifecycles, from agile-scrum project management to selecting the right fidelity, but one of the most effective is to make use of pre-built UI elements and UI libraries. These pre-baked goodies come with your prototyping tool (Justinmind has hundreds of pre-made UI elements for all interfaces, for example) and can be built into customizable patterns or ‘libraries’, meaning you don’t have to waste time designing from scratch every time you prototype, or even every time you iterate.

While UI elements are key to streamlining your prototyping life cycles, maximizing their possibilities is an art that needs to be mastered. Here we’ll look at how to use UI elements to prototype not just faster, but better.


Download Justinmind today and discover our unique UI elements

DOWNLOAD FREE


 

UI elements basics – buttons, boxes & baby steps 

The first steps in your prototyping process are in some ways the trickiest to get right, at least in terms of UI elements. You have to build something understandable for all involved (stakeholders and user testers included), but without closing down options on the visuals or functionality of the final product. No mean feat.

The key when starting out on your lo-fi wireframes – useful for defining user flows and basic functionality – is to see the power in even the most basic UI elements. Anonymous grayscale boxes and label-free buttons are the cornerstones for constructing a basic wireframe: an unmarked box lets your team know that something should go in that space, you just haven’t got down to what exactly just yet; an anonymous button marks where there is likely to be user interaction and, once in high-fidelity, animation. Image placeholders are the baby steps of eventual interface design – if you’re working on a prototype strictly for internal team purposes, you can even leave the imageholder empty. It’s surprising how much of an understanding you can get for prototyped software just by looking at design-agnostic structural elements.

how-to-use-ui-elements-prototype-better-boxes-buttons

Image courtesy Marta Fioni @Foursquare

Of course, there’s a risk that presenting super basic wireframes full of grayed-out boxes and image/text placeholders will confuse those not fully conversant with prototyping or software development. After all, Ryan Singer from Basecamp counsels that an interface isn’t just “screens or buttons or pixels,” but rather a group of “jobs,” each with a beginning, a middle, and an end. With a prototyping tool you can think in a task-orientated way from the beginning by including differentiated UI elements (those that are usually found on all devices) such as radio buttons, menus or select lists. These can be dragged and dropped into the prototype as they are, giving a pretty detailed estimation of product look and feel without any work on your part. Most of Justinmind’s UI elements, even in the basic category, are interactive: when you drag and drop a Select list element, for example, that element will be automatically interactive. You can change the content and design when you’re ready to move the fidelity up a gear.

Interactive wireframe - Menu items values

UI kits for high fidelity

Higher fidelity means you can start to add visual flourishes and direct the look and feel of the eventual product. This is obviously a little more time-consuming than just drag-dropping a couple of grayscale boxes and calling a design team meeting to present your wireframe to the guys. However, the transition to high fidelity is made easier by making use of specific UI kits. A UI Kit is made up of a range pre-built elements and screens, from basic to sophisticated, allowing you to implement atomic design principles and ensure the UX of the interface’s functionality. Prototyping tools should have kits specific to the type of prototype you’re making – choosing an iPhone 6 prototype, for instance, means the iOS UI kit will automatically appear in your toolbar – making it a whole bunch easier to move from low to high fidelity prototypes under time constraints. 

In your chosen prototyping tool, experiment with the specific kits for each Operating System. Justinmind’s iOS UI kits, which encompass wearables as well as standard devices, come with webfont-compatible iOS icons that you can use with Sketch, Illustrator and Photoshop, and the Android UI kits have over 300 components adapted to material design principles for all screens. And while designing Enterprise software can come with its own set of prototyping challenges, you can still take advantage of UI kits to smooth the process along – you can  design and simulate scenarios, and define a navigation flow in your prototypes. Combining and customizing kit elements according to client or user needs results in themes and content that are app-specific, fulfil design guidlines and support brand image.

If your prototyping tool is updated regularly you should also be able to jump on UI trends pretty easily with UI kits. Something like parallax scrolling can be catered for with a UI kit update, which enhances user experience by making it more dynamic and visually interactive while maintaining design flow. Staying ahead of trends and customizing standard UI elements to support brand identity results in a higher fidelity prototype, better UX and, hopefully, fewer reworks.

Save time with UI Libraries

Interface specific UI kits are indispensable for streamlining the prototyping process. But time isn’t always the only constraint: in many instances branding concerns and high level visual fidelity are just as important as bringing the prototype home on time. In the cases where the product appearance is priority, UI kits aren’t your only weapons: UI libraries are essential. Basically a commonly used pattern, UI libraries mean you can quickly prototype complex user interactions – such as standard search patterns – without fiddly design bits getting in the way (at least at this stage!). Their main usefulness comes from their customizable, reusable and shareable qualities.

Customize UI libraries

Design is very often about repetition – elements that appear on one page will often transfer over to others without any change – for example navigation bars or branding components – and it would be crazytalk to have to redesign every time. Creating your own custom libraries by grouping interactive elements together is a huge time-saver in the long-term; drag them to the screen and they’ll automatically bring their events and customization with them. If you’re prototyping with Justinmind, you have access to a range of downloable, pre-made UI libraries, but you can also build your own reusable, customizable UI libraries that can work across projects. This capacity takes your prototypes up a gear in terms of oft-neglected elements such as form fields: customizing a dull input field speaks volumes to your commitment to the usability and uniqueness of the end product. Check out Dimitri Fadeyev’s tips on how to make interfaces with stand-out input fields.

By taking time out to create unique libraries with their own design flourishes you’ll have a better chance of producing web and mobile apps that boost brand ideology. 

Reuse & share UI libraries

Sometimes you’ll need to repeat patterns not across screens, but across projects and teams. Saving your personal libraries and reusing them will help you save time without cutting corners, and may well save you a couple of design headaches along the way. And if you’re working on a big project, you might well be prototyping in a team, whether remote or office-based. You can save and share your custom UI libraries with different teams and in various projects within your prototyping tool. Using the team hive-mind may well refine the prototype’s functionality even before you get to user testing.

The takeaway

Unless you have a hankering to create everything from scratch every time you prototype, UI elements are an essential tool in your designer kit. Savvy application of elements and libraries will communicate functionality without dictating the look or style of the finished product. Building with UI elements and customizing them from project to project will make your iterations nimbler and, in the long term, your prototypes better.

download-justinmind-prototyping-tool-banner-1

Cassandra Naji

About the Author

Cassandra is Marketing Content Editor at Justinmind

Comments are closed.