Up your design game! Learn how to incorporate these five prototyping features into your next design project.
Prototyping tools are an essential part of any UI/UX designer’s toolkit. They allow for apps, websites, or digital experiences to be designed with a high level of accuracy before they’re passed to development for building.
Rather than having to rely on primitive sketches or, worse still, attempting to verbally communicate intentions, designers can use prototyping tools to visually represent their thoughts. In fact, they can even create truly immersive experiences complete with interaction, animation, and sound effects.
But, that’s only if they take advantage of the most game-changing features available across major offerings, of which there are many (AdobeXD, InVision, Sketch, Figma, etc.). With that in mind, here are the five prototyping features every designer should check out.
(Note: Keyboard shortcuts and menus may differ from product to product. So, be sure to check out your particular tool for specific functionality.)
1. Advanced Animations and Sound Effects
To create a truly memorable experience, consider including micro-interactions in your design. These single-purpose, almost blink-and-you-miss moments, are what delight users and have them coming back for more.
Prototyping tools now give you the ability to ramp up your interactions with super-advanced animation capabilities, sound effects, transitions, and more.
With animations, you don’t even need any formal motion design experience. Simply create one artboard with a start state for your animation, another with an end state, and join the two together. If you want to fine-tune, add more artboards between the start and end to create high-fidelity motion within your prototypes. No After Effects required.
2. Voice Commands
The rise of voice assistants such as Siri and Alexa have revolutionized the way we interact with our devices. By consequence, simulating voice commands is a key component of prototyping tools.
If you’re assuming this is some kind of trickery, or a sneaky keystroke that a presenter might tap while people aren’t looking, then you’d be wrong. We’re talking about straight up, genuine voice commands.
Say you’re creating an interface for a music or podcast app, and you’d like users to be able to navigate their catalogue, skip songs or episodes, or build playlists via voice commands. As with any other interaction, you’d simply hook up the two artboards in question. Then, choose the “Voice” trigger, and you’ll be asked to type in the command you’d like the prototyping tool to recognize.
When you present your design, you simply hold down space, or another trigger key (depending on the app you’re using), speak the command into your computer, and the artboards will transition. Couple this with a nifty voice assistant confirmation micro-interaction, and perhaps even a success sound effect for additional feedback, and the transition will look—and sound—incredibly impressive. Yes, the future really is here.
3. Beefed up Collaboration and Handover Capabilities
Let’s be honest, the handover of prototypes to development can sometimes be a bit of an unpredictable affair. Modern prototyping tools can now ease that process, allowing you to collaborate with as many people as you’d like from whatever point in the process you’d like to bring them in.
So, rather than spending months on a design, bringing development onboard, and then being told there’s an immutable reason why it can’t be built, now you can bring development in from the beginning.
With advanced commenting and markup tools, development can inform the design as you’re building it. Once you’re ready to handover, advanced export tools can package up your design with all the assets and animation rules. Now the developers don’t have to painstakingly recreate everything from scratch.
4. Coding Help
One aspect of UI design that clients often find frustrating is what they see as the need to build everything twice: Once as a designer creating a prototype, then again as a developer recreating that design in code. It’s easy to understand from a layperson’s perspective how this process can feel circuitous.
For teams where resources are tight, or for the less complicated designs you might be creating, modern prototyping tools can reduce a large chunk of the development process for you. By running your prototypes through machine-learning algorithms, it’s now possible to turn your prototypes into fully-functioning code.
We can’t do this this in-app yet—we still need to use plugins or mods. However, we’re now in a world where we can transcode visuals on-the-fly into HTML, CSS, and JavaScript.
For those worried that this is eradicating jobs—don’t. Undoubtedly, machine learning will continue to improve, but there will always be a need for a developer to refactor, optimize, create efficiencies, deal with security, set up servers, and deliver databases. Plus, developers will need to hand-code those areas of a design that a machine simply can’t get its head around.
This feature is more about freeing up developers to work on the areas where they bring the most value, and allowing computers to churn out the repetitive tasks.
5. Advanced UI Libraries
Gains can be made on the design side, too. All the major prototyping tools now offer extensive UI libraries containing useful assets such as individual icons that you can incorporate in your design. Others even offer entire frameworks and UI paradigms.
Say you need to create a check-in app for an airline. Rather than creating every element manually, you can download components from the UI library. These components often come with interactions and transitions built in, so you simply adapt them to your needs.
You may think this is cheating, but it’s fair to say that UI paradigms are fairly well-established now. It’s unlikely we’ll see a major overhaul of how playlists work, or how a list of emails displays, anytime soon.
In fact, we’re now so conditioned to the UI paradigms in our devices, it’s often jarring when functionality doesn’t work the way you have come to expect. Pull to refresh is a perfect example of this, or scroll to top when you hit the bottom of a webpage on mobile.
We all expect these features to work a certain way. Instead of creating those elements from scratch, let the UI libraries take care of them for you so that you can work on the parts of the design that require more intensive skills or thought.
Bottom line: Now that prototyping tools are so advanced, and continuing to improve everyday, creating accurate concepts of your designs is really only limited by your imagination. With advanced animation techniques, export to code, voice commands, and more, it’s never been easier to communicate your intentions to both clients and development teams.
With that in mind, perhaps now is finally the time to get your killer app idea off the ground.
For more design advice, tips, and techniques, check out these articles:
Cover image via Aleksandr_a.
Source link
