When building prototypes for user research, there is no shortage of tools. But how do you make sure that you are building your prototypes with the right amount of empathy and truly human-centered? Penny Collisson and Genny Mangum from Microsoft share six strategies for staying focused on people while prototyping.
Voice interfaces are on the rise and it is becoming ever so obvious that we need a way to design for voice interfaces today. And this is where the lately added voice prototyping feature of Adobe XD comes in. In this detailed article, Graeme Fulton explores where the differences and strengths of voice interfaces are, explains which best practices already exist, and then shows how to prototype a voice interface with Adobe XD.
Journey maps are a UX tool to visualize a process in an interface that a user goes through to accomplish a certain goal. A journey map can be a prototype by itself but it is also really useful if you want to plan and build a user-centered prototype because it helps you identify scenarios to focus on or potential pitfalls to avoid. In this post, Nielsen Norman Group’s Chief Designer Sarah Gibbons explains the basics of journey mapping and how to use it successfully.
ProtoPie is a prototyping tool that has its strengths in UI animation and interactions including multi-touch and even sensor input. Fredo Tan shares a curated list of the best high-fidelity prototypes embracing advanced interactions from 2018. A great source of inspiration and a joy to watch, too.
Since October, Adobe XD comes with a feature called Auto-Animate which lets you animate the elements between two artboards with automatic transitions. Shane Williams put the feature to the test and took the time to build some really impressive examples of UI animations and interaction patterns like pull to refresh, swipe to delete, or a comparison slider.
At the end of every year, the UX Collective team shares their State of UX report, isolating a few trends in what our industry is writing, talking, and thinking about. One of the thoughts that stood out to me is that new technologies like voice, augmented reality, virtual reality, platform integrations, or social channels are such seamless experiences and in a steady state of flux that they will require new metaphors beyond the good old artboard – which is still the dominant way to design for the screen although it is not how people will experience our design. Once more, prototyping FTW. ;)
Kathryn McElroy, author of the O’Reilly book “Prototyping for Designers”, talks to Per Axbom and James Royal-Lawson about the importance of becoming a multi-modal designer today, how prototyping with electronics can help to bridge the gap between the physical and the digital, and many other benefits of prototyping.
Tom Chi served as head of product experience at Google X developing technology such as Google Glass and Google's self-driving car. In this talk, he emphasizes the importance and huge potential of prototyping for making decisions without smart guesses but based on direct experiences while also increasing certainty. Also ideally, instead of just testing your product for completeness, you should use prototyping to find what Tom calls the “magic moment” – that moment when people use your product and their eyes light up.
In this talk from An Event Apart Denver 2017, Daniel Burka, then design partner at Google Ventures, shows how to level up your effectiveness with the use of prototyping by creating a shared understanding of the problems you want to solve. He demonstrates how you can use prototyping to test hypotheses with realistic customers, and – the master class – how a team of professionals can create a prototype together and test it in a realistic setting with real people within one week, also known as a Design Sprint.
Uizard lets you transform your hand-drawn paper wireframes into Sketch files and prototypes — automatically using machine learning. You can test your ideas quickly, create high-fidelity prototypes, and even export front-end code. You can sign up for the beta now.
Draftium is a website prototyping tool allowing you to quickly visualize an idea based on templates and collect online feedback from your team or clients – all in one place.
Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by generating native code that can be directly incorporated into larger more complex projects by a developer.
Yet another tool based on machine learning and you probably already heard of it: Remove.bg removes backgrounds from photos, 100% automatically and in 5 seconds – without a single click. No more cutting out of hair in Photoshop. The output size is not that large (yet), but especially for quick prototyping Remove.bg is super fast and convenient.
The December 2018 release of Adobe XD brings new features again: The team has improved collaboration with cloud-native documents, you can now flip objects, search the layers panel, preview linked symbols on the canvas, and much more.
Mateusz Wierzbicki created a great design kit for Figma which you can use to create high fidelity wireframes and prototypes, user interfaces, and style guides for your desktop products. It’s fully customizable and free.
With Montage, you can prototype your app with a user-generated library of components. No design skills are needed. All you need to do is browse a library of app components and add them to your prototype. Montage is free for public projects.