Author: UXPin

UI animation has come a long way over the last decade. Animations don’t just look cool, but they’ve evolved into a universal digital language people recognize and understand.

These microinteractions allow designers to communicate with users through movement and animation to provide guidance, context, and an immersive user experience.

This article explores UI animation, the types, principles, and everyday examples to improve user interaction for your digital product.

Create high-fidelity prototypes with advanced interactions and UI animations that perform exactly like the final product. Sign up for a free trial to explore code-based user experience design with UXPin.

What is UI Animation?

UI animation or user interface animation adds visual effects to UI elements and components to make them interactive. This interactivity helps guide users through a website or digital product while creating an immersive and enjoyable user experience.

UI Animations & Microinteractions

As we discuss in an in-depth article, microinteractions occur in four stages:

• Trigger: user action or system state change
• Conditions: system rules that define what microinteraction is triggered
• Feedback: visual, audio, haptic changes to the user interface
• Mode: what happens once the microinteraction is complete–state or UI changes

UI animations occur during the feedback and mode stages when the user interface changes in relation to the trigger and conditions.

Why is UI Animation Important?

The primary role of UI animations is to draw users’ attention to an important CTA or show them what to do next. UI animations allow designers to communicate with users without text. 

For example, a progress bar will animate to draw your attention so you can see how much of a signup process you must still complete. The alternative would be text somewhere on the user interface saying something like, “you have completed 20% of this signup process.” 

You can imagine that a user interface would get very cluttered and confusing if text replaced UI animation!

UI animation also allows designers to communicate with users across cultures and languages. Animating a button to show a user where to click (or tap) will attract their attention, no matter what language they speak.

Lastly, UI animation plays a crucial role in design psychology and reducing cognitive load. Designers minimize the mental effort required to use a digital product by providing context, familiarity, and consistency through animations.

Types of UI Animation

There are four primary types of UI animations:

• Loading and progress
• State changes
• Navigation
• Microinteractions
• Branding

Loading and Progress

Loading and progress allow users to visualize where they are or what’s happening. 

• Loading: an animation showing the user that the system is working. For example, a loading animation (throbber) or percentage indicator showing a user that a product is busy loading a page or processing information. These loading UI animations are critical because users might think that the product or website has stopped working without them–which could mean they abandon the product before it’s had a chance to load!
• Progress: animations that show users where they are in a flow and how much they still have to complete. For example, a progress bar at the top of an eCommerce checkout flow animates each time the user moves closer to completion.

State Changes 

Designers often use animations to communicate a digital product or element’s state. 

For example, a button might remain dark and unclickable until a user complete’s the required form fields. Once the form is complete, the button’s state changes to active (or clickable), letting users know they can click the button to proceed.

Structure & Navigation

Navigational UI animations help users navigate user interfaces and find what they want. Designers will use animation to show users which page or tab they’re viewing or create page transitions that indicate which direction they’re moving.

UI animation is also helpful to communicate navigational hierarchy so users can understand the product or website’s structure–resulting in a more enjoyable user experience.

Microinteractions

Microinteractions convey feedback and information based on user interaction or system changes. This feedback and information almost always include some type of UI animation.

A microinteraction we see every day is a mobile text or message notification. When you receive a text, a popup appears on your phone to alert you. In some instances, the alert will show you the whole text message before minimizing it to show the sender’s name. This entire notification sequence is a UI animation triggered by the system.

Another common microinteraction is how a digital product responds to scrolling or swiping. As you perform these actions, multiple UI animations may take place, like a page transition, content loading, navigational changes, and more.

Branding

Animations are a fantastic way to promote brand awareness and interaction with users. Designers will often use fun logo animations to give the brand a lighthearted, welcoming appeal.

UXPin’s code-based editor enables designers to create JS-based interactions that look and feel like the final product. With high-fidelity prototypes that behave like the final product, designers get significantly better feedback from usability testing and stakeholders. Sign up for a 14-day free trial to experience advanced interactions and animations with UXPin. 

UI Animation Examples

Here are four creative UI animation examples designers have used to improve a product’s user experience. 

1. An Ecommerce UI Animation That Gives Users Control

Dribbble freelance UI designer Dannniel uses UI animations to give users a sense of control while shopping online. In an animation UI design concept for a shoe-seller, Dannniel created an interface where users can learn basic information about a shoe (such as price and reviews). 

Dragging to the left will open a screen overlay (simultaneously activating several UI animations) where customers can choose their size and color preference.

Why Does This UI Animation Matter?

Even the most successful eCommerce stores struggle to make shopping engaging and fun. These sites often have cluttered page layouts that aren’t always obvious for users and involve lots of clicking or tapping to access dropdown menus. These cluttered user interfaces don’t create a sense of control or fulfillment.

With Dannniel’s UI animations, shoppers can access and select product variants using one hand–perfect for users on a mobile device. As you scroll through the sizes, the product changes too. These small details create an immersive, more enjoyable shopping experience.

2. A Budget App Built on Colorful Intuition

Design agency Tubik has made hundreds of animated user interfaces for its clients. This budgeting app stands out for its clever use of motion and color to help users with their financial goals.

When users open the app, they can see daily, weekly, and monthly expenses expressed in a segmented circle graph. Each segment represents a different expense with its own color, so users can easily differentiate between each one. When a user taps a segment, an exciting UI animation creates a horizontal bar chart to display the expenses differently.

Why Does This UI Animation Matter?

Most people dislike budgeting and personal finance. It feels uncomfortable to confront financial decisions, especially when you might need to cut spending to focus on saving money or repaying debts.

Here are two ways Tubik’s mobile app design and UI animations make budgeting easier for users.

1. The UI animations gamify budgeting, making the experience of using the app and confronting your personal finance more enjoyable. The colors and motion help ease anxiety by connecting an undesired activity (budgeting) and something fun (video games). Users are more likely to use a personal finance app that gamifies the experience and rewards them with color and animation.
2. The app allows users to visualize their personal finance in colors and charts rather than numbers on a page. These charts will enable you to absorb the information much easier, which could help you manage your finances better–at the very least, make you more aware of your income and expenses.

3. Animation UI Makes Failures Less Frustrating

Animated components can minimize the frustration of errors. For example, if you make a typo in Grammarly, the app highlights the word in red. When you click the word, Grammarly displays the correct word or suggestions for you to choose.

When you click the correct word, Grammarly automatically changes the word for you–no need to retype the word to correct your error.

Why Does This UI Animation Matter?

No one likes errors or failures. UX designers can create UI animations that make errors less frustrating and provide users with solutions to fix the problem.

4. UI Animations to Create Mood

Designers can use UI animations to create mood or energy through the digital product. UXPin’s Calming App template uses slow, smooth animations to convey calm and peace.

On the Breathe page, a large circle pulses in and out. This simple UI animation compliments the physical action of someone breathing, thus creating an immersive user experience.

Why Does This UI Animation Matter?

Designers must use appropriate UI animations for the product. Slow, smooth animations make sense for a breathing and meditation app because you want the user to be calm and peaceful while they’re using it.

Summary

UI animations play an essential role in guiding users through a product experience. Good product design uses UI animation to communicate with users to make digital products more straightforward and enjoyable to use.

UI Animation With UXPin

UXPin’s advanced interactions and animations let designers create immersive user experiences for high-fidelity prototyping and testing. We even provide you with common ready-to-use UI patterns complete with animations for you to copy to your projects.

Take your UX projects to the next level with the world’s most advanced user experience design tool. Sign up for a 14-day free trial and explore how UXPin can enhance your prototyping and testing to build better products for your customers.

We’re happy to let you know that we’re hosting a free webinar “11 ways to start your inclusive, accessible design toolkit” with guest speaker Piotr Źrołka, Accessibility Expert, UX Strategist, and CEO of Kinaole.

Date and time: Jan 28th, 2021 at 10:00 AM PST

Join now for free!

During the webinar you’ll learn:

• How inclusive methods can build high-performance design solutions that work for all, 
• How to start building an inclusive culture, 
• Practical tips for accessible web design.

Video games might just be the most sophisticated and complex type of art today. It takes a perfect blend of technical skill and creative inspiration to develop an AAA title. Video game prototyping is one technique to help build a clear vision of the game you want to create early in the process – with minimal time and effort invested.

With so many factors, influences, and moving parts, it’s essential to have the flexibility to pivot or alter your initial ideas if they are no longer workable.

Perhaps, most importantly, knowing how to make promising prototypes can be the difference between whether your game gets picked up for development or not.

Luckily, we already have a set of techniques that deal precisely with this problem: Prototyping. More specifically, in this case, video game prototyping.

In this article, we’ll be looking at some of the most popular types of video game prototypes and how to use them to create a game as part of an iterative development process.

Popular and effective video game prototyping techniques

To keep things orderly, we’ll be looking at these prototyping techniques according to increasing fidelity and complexity levels.

Paper prototyping

The idea of simplifying your game into a raw, tabletop paper prototype might seem nearly impossible at first. The trick at this stage is to find the essence of your game to create the most minimal model that people can interact with.

The benefit of paper prototyping is that it’s the cheapest and most accessible type of prototype to set up. Paper video game prototypes can be little more than doodles that approximate the size, position, properties, and actions of elements in your game.

You should use paper prototyping to answer some fundamental questions about your game, for example:

• What is the orientation of the game world? For example, 2D or 3D environments.
• What is the orientation of the camera/characters? E.g., top-down, first-person, etc.
• In what dimensions can the character move in the world?
• What will your inventory system look like? E.g., a list of items or grid?
• What menu systems will you use?

A great example is if you were to recreate Tetris, how you could simply use different cutout shapes of papers that players can move around to play. A very innovative application of paper prototypes was made by the Spore team, who used paper cutouts of limbs, organs, and other parts that players could use as mutations to add or remove.

Wireframe prototyping

Ahh, wireframes. The staple of UX designers, particularly when it comes to website or mobile app interfaces. However, they can be just as useful in the early stages of developing a video game. 

If you squint your eyes a bit, you should just be able to make out the direction the project is going. However, a wireframe is NOT a piece of art. It’s a low-fidelity prototype meant to provide a better understanding of the layouts or mechanics of a game. 

A video game wireframe can accurately relay the placement and relationship between elements, like characters or environmental models. In-game menus, loading screens, or other mostly static experiences (such as conversations or Pokémon-Esque battles) can also be more accurately laid out. However, these representations should be free from the constraints of artwork at this stage.

Using a grid-like surface can help figure out scale and placement.

Wireframes will help you to start to define your game in terms of:

• The playable/non-playable characters (e.g., types of characters)
• The UI or HUD display (e.g., health and ability bars)
• Some of the mechanics or set pieces in the game (e.g., dialogues)

Including artwork at this stage would lead to too much time and effort invested. It might also set you on a path that’s more costly to turn back from.

As an example, wireframe prototypes should be simple enough to create using something like Google Slides or PowerPoint. However, tools like UXpin allow designers to create wireframes much quicker while also being able to collaborate in real-time. Each static page may have buttons that take you to predetermined other static pages, depending on what you click.

Greybox prototyping

Greybox prototyping can be as simple as replacing the 2D representations with equally generic 3D ones. However, even for 2D games, the difference is that a greybox prototype will include some of the final product’s physics.

For Burnout-type racing games, this may just mean grey cubes ramming into each other. However, you might already include some of the final steering, collision, and health/damage mechanics. If wireframes and mockups are meant to start showing you what a game will look like, greybox prototypes will show you what it feels like. You can also start building in the tracks or actual typography, laying the groundwork for creating individual levels.

Again, greybox prototypes shouldn’t be bogged down with finalized artwork. Even relatively simple texturing and styling for 3D models can be time and energy-consuming.

The cool thing about greybox prototyping is that you can start using the final tools you’ll be using to build your game. For example, you could use Unreal Engine with simple, geometric static mesh models and imported physics Blueprints. 

As you can imagine, it’s nearly impossible to script dynamic actions using paper prototypes or wireframes accurately. Greybox prototyping is also vital because it will help you analyze whether these interactions work and validate many of the initial ideas for your mechanics. You might find that many actions don’t turn out as you thought it would, thanks to the emerging complexity of adding physics to the mix.

What about rapid prototyping?

Rapid prototyping is a design methodology that depends on developing cheap and increasingly sophisticated prototypes in quick succession. It’s not exactly a new idea but is often viewed as a fun and exciting way to produce entertaining and successful games quickly. World of Goo is a famous example. The first level, Tower of Goo, was created within seven days as part of an Experimental Gameplay Project. 

The process involves rapidly going from one prototype to a slightly higher fidelity one in a short period of time. You continuously refine your ideas in small increments and iterate as many times as necessary. Video game prototyping is a more hands-on and intuitive game development process than brainstorming. As a bonus, it’s exhilarating to see how a single idea can change into a fun and complex game.

In conclusion

So, where do you go from here? Well, the logical next step would be to finalize your artwork and visual assets. If you’ve refined your physics and mechanics using greybox and high-fidelity prototyping techniques, it will be relatively simple to start importing your assets.

All-in-all, finalizing your game should be a much less stressful process. Using video game prototyping techniques to test and improve your initial ideas continuously, you should be much more confident in your ability to realize a working and, most importantly, fun game.

But more importantly, creating a functional prototype for a game is a collaborative effort. UXPin allows teams to create well-planned wireframes, while allowing your team to collaborate in real time.

Google Fonts has a library with over 1,000 fonts that you can easily add to your website with CSS. Having access to so many options sounds great until you realize that you will never have enough time to look at them all. Luckily, you don’t have to. Explore 30 of the best Google Fonts to decide which ones will look amazing on your next website design.

To make the process even more comfortable, UXPin now lets you add Google Fonts to your prototypes. You don’t have to worry about finding a go-around that puts your favorite fonts into UXPin. Just choose an option that suits your project and get to work!

Why using the best Google Fonts matters

If you don’t work in website design, you might wonder why it matters whether you have an extensive library of fonts. As long as text gives readers the information they need, it does its job well, right? The graphics and layout make sites look appealing. Who cares about the text?

People make a lot of incorrect assumptions about fonts. Graphic designers probably recognize some of those mistaken assumptions in the above paragraph.

The biggest mistake is confusing text with fonts. Text gives readers direct information. Fonts use typography to guide the website visitor’s eye, emphasize certain pieces of information, and add to a website’s attractiveness.

Choosing the best Google Fonts for a website can also:

• Create a visual hierarchy that makes some areas of the page look more important than others.
• Control how much white space designers use on pages.
• Add contrast between the page’s background color and the text’s font.

The best Google Fonts work well on mobile devices

Perhaps most importantly, today’s website designers need to think about how different fonts will appear on mobile screens. About 81% of Americans own smartphones. Most Europeans also own smartphones. 

By country:

• 81% of French adults own smartphones.
• 72% of adults in Spain have smartphones.
• 71% of Austrians own smartphones.

With so many people accessing the internet via smartphones, it makes sense for website developers to choose fonts that will look clear on small screens. The trend toward smartphone ownership will only continue. A lot of people still use desktop and laptop computers, but smartphones play an undeniable role in how people browse content, shop, and communicate.

Fonts can add to a website’s brand

Some companies invest a lot of money to have graphic designers create unique fonts that make their brands stand out. When you see Under Armour’s font, you immediately identify it with a brand that makes reliable athletic clothing, shoes, and accessories.

Other fonts that you probably associate with specific brands include those used by:

• Energizer
• Apple Abercrombie & Fitch
• BuzzFeed
• Walmart

Once you start paying attention to fonts, you can’t ignore the subtle differences that make some more unique than others. Walmart uses an interesting “t.” Apple uses a thin font that gives practically every letter “feet.” (More on those feet in the next section.)

Categories of Google Fonts to explore

Before you can distinguish the small differences between the best Google fonts, you need to learn the general categories that people use when identifying fonts.

Serif fonts

Serif fonts have small lines at the bottom of letters. The lines often look like little feet. Brands that choose serif fonts often want to look luxurious and intelligent.

Popular serif fonts used by today’s website designers include:

• Romana
• Ogg
• Garamond

If you’re not familiar with the latest typefaces, think of Times New Roman. It’s probably the most famous serif font used today.

Sans-serif fonts (often referred to simply as “sans”)

“Sans-serif” simply means “without serif.” These fonts don’t have the “feet.” Brands that use sans-serif fonts may want to create a modern, hip personality.

Popular sans-serif fonts include:

• Futura
• Circular
• Graphik
• Gotham

If you use word processing software, try Calibri to see a common sans-serif typeface.

The Best Google Fonts to Explore for Your Website Prototypes

Now, let’s look at 30 of the best Google Fonts available right now. They’re numbered, but don’t let that influence which one you choose for your next project. Always choose the best typeface for the project.

• Clean and curvy.
• Elegant appearance
• Looks strong without dominating the page.

• A readable typeface that works well for pages with a lot of content.
• Can work as a headline or content text.

• A good choice for strong, bold headlines.
• Has a traditional look when downsized.

• Clean, modern typeface that looks great as text for professional brands. 

• Extremely legible, which makes it great for long blocks of text or multiple blocks.

• Unique look that not many websites use.
• A modern, fun twist on Courier

• Geometric sans serif commissioned by Google.
• Meets the needs of diverse devices and screen sizes.

• Very easy to read.
• Fresh. simple look makes it a strong choice for trendy brands.

• Manages to look beautiful and legible on screens of all sizes.

• Simple look manages to grab attention.
• Futuristic aesthetic.

• Very modern, curvy typeface.
• Wide spacing makes it useful for headlines, sub-headers, and pull-out quotes.

• Sleek look that looks great as a stand-alone sentence.
• Unique curves make it charming without losing sophistication.

• Versatile font that will look great on any device’s screen.

• Extremely readable typeface for blog posts and articles.
• Looks good with many other fonts, including Roboto and Oswald.

• Heavy typeface that demands attention.
• Automatically adjusts itself to the reader’s device.

• Works well as an eye-catching display font.
• Thoughtful spacing makes it a good choice for text blocks.

• A font for all languages, making it suitable for websites used by people around the world.

• Has rounded terminals that guide the eye from one word to the next.
• Not an extremely popular option for websites, so you can use it to stand out.

• Modern aesthetic that exudes sophistication.
• A diverse typeface that can work as headlines, block quotes, and sections of text.

• Made specifically for computer screens.
• Adapts to mobile devices.
• Looks great on pages with minimal text.

• Highly versatile typeface with 18 variants.
• Multilingual features.

• Narrow text that looks amazing as a headline but can feel cramped as long-form text.

• Very readable on desktop, laptop, and mobile device screens.
• Diverse options give designers more control over its personality.

• Attractive, modern text that doesn’t sacrifice legibility for style.
• Good option for designers who want to add contrast to pages.

• Easy-going personality that puts readers at ease.
• Diverse options make it a strong choice for designers with an eye for balance.

• Serif typeface that makes headlines stand out.

• One of the most legible Google Fonts.
• Versatility makes it useful for text and headlines.

• Professional typeface for brands that want to reinforce trust and expertise.
• Easy to read.
• Works well in print and on screen.

• Stylized functional typeface that works in nearly any situation.

• Doesn’t distort regardless of screen resolution

Get started with a free trial from UXPin

Start adding the best Google Fonts to your website prototypes today by signing up for a free trial with UXPin. Once you see how UXPin makes it simple for you to create amazing websites, you’ll understand why so many other designers choose it.