Know Your Tools
After completing this unit, you’ll be able to:
- Research design tools based on your needs.
- Explain the difference between low-, mid-, and high-fidelity prototypes.
- Follow rapid prototyping best practices.
Now that you’ve gone through research, sketch sessions, and multiple rounds of feedback, you already have a better understanding of what you need to bring your prototype to life. Now, it’s time to find the right tool(s) for the job.
Know the Different Design Tools and What They’re Used For
There are many design tools out there that focus on specific functions. Some even bring certain design functions together. This list enables you get familiar with the essentials and how they help you on your app design journey.
|Type of Tool
||What It’s Used For
||Building layouts, or wireframes, meant to communicate the structure of an app or web page. They also convey the overall direction of a user interface. Wireframing focuses on function (how the app or web page layout works) rather than visual design. However, some wireframing tools let you add visual elements to support rapid prototyping (more on that in the next section).
||Building interactive, mock apps or web pages. These often come after wireframes, giving stakeholders a combination of what the app or web page looks like, and how users interact with said app or web page. Prototyping tools also focus more on detailed, advanced design elements like colors and fonts.
||Creating movement within a prototype or actual app or web page. This is an advanced design element that often comes later in the design process. Animation can convey function (like a spinning wheel to communicate an app is processing information), engagement (like elements moving across the screen as the user scrolls), or a combination of the two.
Using these tools and sharing your mockups can be a process in itself. This far along, it pays to find a tool (or set of tools) that allows for collaboration, feedback, and if possible, testing. This way, you can iterate quickly, even as you hone in on the details of your design.
Other questions to consider when evaluating design tools:
- Are the features intuitive and easy to use, or will I be distracted by the tool?
- Can I deploy my prototype to various devices to create a realistic testing experience?
- If you’re working remotely, is it easy to share the prototype and conduct remote testing? Will I need to supplement with other collaborative tools, like one for virtual meetings and screen sharing?
Work with a Design System
A design system is a place where you can store reusable components (like buttons, screen animations, branding, and so forth), style guides, code snippets, and more. Design systems:
- Make it easy to build a library of common design elements and best practices for your company, no matter what it’s working on.
- Give designers, administrators, and developers an efficient way to take design from ideas to prototype to actual products.
- Give companies the ability to create a consistent user experience.
Typically, design systems integrate with wireframing, prototyping, and animation tools. This makes it easier to work with this library of assets. In Linda’s case, she has a wealth of premade content with the Salesforce Lightning Design System. She was able to use it as a reference for her sketches. Now, it helps her move quickly through prototypes.
Know Low-Fidelity, Mid-Fidelity, and High-Fidelity Prototypes
“Wireframe” and “prototype” can be confused to mean two different things. In actuality, a wireframe is a prototype. So, where’s the difference and why is it important to know?
- A low-fidelity prototype is typically a wireframe sketched on paper or a whiteboard.
- A mid-fidelity prototype is also a wireframe, but produced on screen using a wireframing tool. It can contain some design elements, like images and words, but it’s still largely focused on an app or page layout, rather than function.
- A high-fidelity prototype is an interactive mockup, often built closer to what the actual app will look and act like in real life.
Knowing the tools and how to use them is important. Knowing when to use them is just as important. This is where rapid prototyping comes in.
Linda Follows Rapid Prototyping Best Practices, and You Should Too
Even though Cloud Kicks is a lean company with a smaller amount of stakeholders, Linda knew she had to go through many ideas and revisions before landing on the right designs. When it comes to prototyping, the approach doesn’t change.
The best way to do this is through rapid prototyping, or simply, the process of moving through idea to prototype to test and back, quickly.
Keep It Low- to Mid- Fidelity for Quick Feedback and Iteration
Up until now, this is what she’s done. With all the sketching and follow-ups with her team, she was able to pinpoint the right design ideas as well as get the essential workflow and functions of the app using the most important design tools of all—paper and pen.
Now, Linda’s moved on to wireframing the app with more detailed design elements like information (images and words) and navigation (buttons and interactive elements), accessibility, and user experience in mind. Answering questions like:
- What does the first screen look like when the sales rep opens the app?
- Where are they inclined to go first?
- What does the next screen look like in the workflow?
…and so on.
Linda shares the wireframes with a select few sales reps—the same reps who she had followed up with after her survey—and gets their feedback. She’s able to go through two rounds of this before moving on to the more interactive, and thoroughly designed prototype.
Go High-Fidelity, Collaborate, and Test Again
High-fidelity mockups are the most time consuming and labor intensive. However, if you’ve gone through several rounds of low- and mid-fidelity prototypes with thorough feedback, by the time you get to this phase the challenges and solutions should be clear.
Linda chooses to work with InVision Studio to create her high-fidelity mockups.
- Webpage: InVision Studio
- Site: Salesforce Lightning Design System
- Trailhead: Lightning Design System Basics
- Article: Low-fidelity vs. high-fidelity prototyping (InVision)
- Article: Website & App Wireframe Examples for Creating a Solid UX Design (InVision)
- Article: What is rapid prototyping? (InVision)
- Webpage: Design System Manager