Nota SEM 20042

Getting to know UI / UX for Mobile AppsDevelopment
139

Low-fidelity prototypes

Low-fidelity prototypes—often referred to as paper prototypes—are the quickest, lowest-
effort prototypes one can create. They represent a simple, incomplete version of your product,
and are a great way to test high-level concepts prior to investing more time and energy in the
design. Low-fidelity prototypes also allow you to gather feedback and test concepts during the
early stage of the design process. Since they are created with pen and paper, designers are
enabled to test different concepts easily, allowing them to adjust accordingly prior to jumping
into digital wireframes.

Pros Cons
Quick. Paper prototypes are easy and fast to Unrealistic. At the end of the day, paper
create, and they are great for brainstorming prototypes are a poor substitute for a digital
various ideas and concepts. Additionally, you can experience. There is a lack of realism that
make changes and updates on the fly. impacts the user feedback, which can lead to
false positives.
Inexpensive. Low fidelity prototypes are cheap
in both labor and materials. Pen and paper are False positives. Inaccurate feedback from users
common office supplies, and since they are quick due to lack of realism in the experience. Users
to create, labor costs are significantly low. may “fill in the gaps” in ways that are different
than what the designer has in mind, therefore
Empathy building. Paper prototypes are a great impacting results.
team-building exercise, resulting in increased
involvement, ownership, and empathy towards
the users and product.

Honest user feedback. During usability testing, a
user is more prone to giving their honest
feedback if they think you did not spend a lot of
time on it. Users tend to be more open with
their feedback towards paper prototypes
opposed to higher fidelity prototypes.

Figure 72: Two people working on a paper prototype together.

Getting to know UI / UX for Mobile AppsDevelopment
140

Medium-fidelity prototypes

Medium-fidelity prototypes are the next level of prototyping. Often referred to
as wireframes12, medium-fidelity prototypes are digital and created in greyscale. They limit the
design to user flows and information architecture while omitting branding elements, photos,
and logos.

Limiting the prototype to user flows and information architecture in greyscale allows the user
to focus on the fundamental aspects of the design, without the potential of getting distracted
by colours, photo placement, and logos. This enables the designer to test the core usability of
the product prior to beautifying the product.

There are great wireframing resources—including wireframe examples and templates online.
But first, let’s discuss wireframing pros and cons.

Pros Cons

Increased realism. Since medium prototypes Nothing will beat the final product. Although
are digital, they are more realistic low- and medium-fidelity wireframes are
experiences for user testing. This will impact cheaper and quicker, the final product will
feedback, since the prototype resembles the always be the best representation of your
final product more than paper prototyping. work to gather user feedback. Lacking visual
elements (e.g., photos, text, and colours) could
Quick iteration. Medium-fidelity prototypes impact the overall experience and feedback
allow for faster iteration than adjusting a you receive.
high-fidelity (or nearly complete) product.

Lack of fine details. They are a great way to
test an idea before getting too invested and
bogged down in the fine details.

12 A wireframe is a schematic illustration of a page interface used to demonstrate the placement of content and
functional elements on the page. Wireframes help establish relationships between individual pages and serve as a
foundation for prototypes.

Getting to know UI / UX for Mobile AppsDevelopment
141

Figure 73: Medium-fidelity wireframe showcasing the digital interfaces in greyscale.

High-fidelity prototypes

After several rounds of testing with low- and medium-fidelity prototypes, it is time to invest
time in rendering your design in high fidelity. This is when the designer brings in branding,
photos, copy, colours, and animations to bring their experience to life. As your design nears its
final stages, it is important to test high-fidelity prototypes with users prior to the development
phase.

Getting to know UI / UX for Mobile AppsDevelopment
142

Pros Cons

Realistic experiences. Users engage in Expensive to create. High-fidelity prototypes
experiences that mimic the most accurate are the costliest, as they take the most
final product, yielding more accurate and resources to create. Therefore, as a designer,
applicable results. Testing a high-fidelity it is important to validate your concepts in
prototype is the best way to predict how lower fidelity prior to jumping into high
users will react to it in the marketplace. fidelity.

A final test. High-fidelity prototypes are a More time to create. Due to the inclusion of
great way to test your final product prior to fine details, high-fidelity prototypes take
entering the development phase. Testing longer to create. Therefore, when testing a
your final concepts will allow your team to new concept, it is important to begin in lower
enter the development phase with fidelity.
confidence, as they know they are creating a
usable, desirable product. Hesitation on user feedback. When a user
thinks you have spent a long time on
Communication tool with something, they may “settle” and not speak
development. High-fidelity, interactive up as much as they would when interacting
prototypes are a great way to collaborate with a paper prototype.
with developers, giving them a clearer idea
on how the product should behave. This
really helps in the development handoff
process.

Figure 74: High-fidelity wireframe showcasing a final design with colors, branding, and other visual
elements.

Getting to know UI / UX for Mobile AppsDevelopment
143

What is the website prototyping process?

Prior to diving into website prototyping, you must have identified your users, defined their
problems, and ideated a proper solution to solve their pain points. Once you have these
steps complete in your design process, you can begin prototyping.

Here are the steps of an effective website prototyping process.
1. Select features to test. Select the key features you want to test on users. It is impossible to

effectively test all features of your product in one session. Therefore, pinpoint key features
you wish to spotlight in this discovery session.

2. Create your design prototype. Next, create your website prototype to exemplify those key
features and flows identified in the previous step. Creating a prototype to exemplify all
features could take a substantial amount of time and be unnecessary. Instead, create a
prototype to highlight the key features you wish to test. You can note any incorrect clicks or
taps on their journey to get there.

3. Test your solution. The next step is to bring your design to users, partners, and stakeholders.
Observe and record them interacting with your product, taking note of any usability issues in
the current design. Usability testing and prototypes go hand in hand.

4. Make updates to resign. After your testing session, synthesize your feedback into key
takeaways and update your designs accordingly.

5. Repeat the process. Finally, bring your updated website design back to users and repeat this
process.

Getting to know UI / UX for Mobile AppsDevelopment
144

Test your
solution

Figure 75: steps of an effective website prototyping process

Getting to know UI / UX for Mobile AppsDevelopment
145

9 UI Animation Tools Every
Beginner Should Have on
Their Radar

Jaye Hannah, Updated On July 15, 2021
Source Link: https://careerfoundry.com/en/blog/ui-design/ui-animation-tools/
UI animation is fast becoming an indispensable component of any successful digital product. Not
only do animations help to orient your users as they navigate through an interface; they also
strengthen your brand’s story and breathe life into something that would otherwise be static.
The demand for edgier, more creative animation is growing, so it’s no surprise that more and
more designers are adding UI animation to their skillset.

Behind every successful UI animation whiz is a reliable tool. If you’re new to the animation game,
these nine tools will see you integrate seamless UI animations into your next project and beyond.

Getting to know UI / UX for Mobile AppsDevelopment
146

1. Adobe After Effects

Adobe After Effects is hailed as the industry-standard UI animation and motion graphics software
in the design community and for good reason. From adding motion to characters and logos to
animating in 3D, there’s truly nothing you can’t create in this powerhouse of a tool. Alongside
being easy to follow, it’s also integrated with other Adobe software, including Adobe XD and
Adobe Portfolio. Adobe offers a 30-day free trial for those looking to test the water before they
commit.

Figure 76: Adobe After Effects

Getting to know UI / UX for Mobile AppsDevelopment
147

2. Motion UI

Motion UI is the new kid on the block of animation tools. Despite not being around for very long,
it’s already a go-to for thousands of seasoned designers. Boating a Sass library, anyone can
quickly and easily create flexible CSS transitions and animations—either by choosing from the
existing effects or creating your own. It also provides code tutorials for each animation, making
it a fantastic prototyping tool. A winner all round!

Figure 77: Motion UI

Getting to know UI / UX for Mobile AppsDevelopment
148

3. Flinto

UI animation prototyping software Flinto is lightweight, easy to get to grips with, and totally free.
In other words, it’s perfect for beginners—while still being fully comprehensive. In Flinto, you can
create interactive transition-based animations for websites and apps, and easily preview your
animations on both desktop and mobile devices. You can even add sound effects.

Figure 78: Flinto

Getting to know UI / UX for Mobile AppsDevelopment
149

4. Framer

Framer is an open-source software that allows designers to create animations and prototypes
with ease. In Framer, you can design, draw, prototype, animate, and create custom transitions
and import all of your creations to other tools like Sketch and Photoshop. You can also collaborate
with other designers, and facilitate a seamless handoff to developers with the tool’s own ‘handoff
mode.’

Figure 79: Framer

Getting to know UI / UX for Mobile AppsDevelopment
150

5. Origami studio

Origami Studio is a free UI animation tool created by the masterminds that comprise the
Facebook web development team. With a straightforward drag-and-drop interface, the tool
boasts an extensive library of UI components, open-source software, and a splitter tool that
allows users to incorporate various data types. While Origami Studio takes a more web
development approach to UI animations, it’s still a fantastic tool for designers and free, too!

Figure 80: Origami studio

Getting to know UI / UX for Mobile AppsDevelopment
151

6. Mockplus Cloud

Popular among both designers and developers, Mockplus Cloud is a tool that focuses on
collaboration. with Mockplus Cloud, designers can seamlessly and automatically hand off designs
that have accurate assets, specs, interactive prototypes, and code snippets. You can also upload
your prototypes and animations from other tools, including Adobe XD and Sketch.

Figure 81: Mockplus Cloud

Getting to know UI / UX for Mobile AppsDevelopment
152

7. Lottie

Open-source animation tool Lottie was created by Airbnb, and its key features include in-app
notifications and full-frame animated illustrations. It also supports Android, iOS, and Windows,
and can render JSON files exported from Adobe After Effects. Hey, if it’s good enough for Airbnb,
it’s good enough for us!

Figure 82: Lottie

Getting to know UI / UX for Mobile AppsDevelopment
153

8. InVision Studio

InVision is most commonly known as a powerful design and prototyping tool, having risen to
popularity through its ability to facilitate interactive designs that reflect a real web experience.
It’s no surprise, then, that this all-in-one platform also holds up when it comes to animation.
With InVision studio, you can add gestures and motion to your interactions with the Motion
transition tool and collaborate on your animations with other team members on the platform.

Figure 83: InVision Studio

Getting to know UI / UX for Mobile AppsDevelopment
154

9. Animate.css

Last but certainly not least is Animate.css, one of the simplest (yet most effective) animation
libraries on the scene. Featuring an extensive library of common animations that you can use for
just about any project, Animate.css is a great choice for those just starting out. Once you’ve
downloaded the code file for your chosen animation, you add it to your project folder, and voila—
you can animate your element. The simplicity of the tool means you can animate UI elements
with little stress and low load times. Win-win.

Figure 84: Animate.css

Getting to know UI / UX for Mobile AppsDevelopment
155

APPENDIX