One year ago, I knew next to nothing about building motion. It didn’t help that the prospect sounded scary — motion means animating, right? And animating means I have to—what—design across time? I just mastered organizing my Sketch symbols, but okay.

After several months of diving headfirst into After Effects (it’s the industry standard for motion graphics), I’m glad to say I’ve learned the ropes of both After Effects and motion design in general. If you’re new to motion design or are looking to add it as another skill in your designer tool belt, these tips can help you master it a little faster.

First, think like an engineer

The science: Learning how to physically build motion

The first step to learning how to build motion is to learn how to speak the language. Some of the technical aspects (and the overwhelmingly dense After Effects interface) became less scary after I familiarized myself with a few key concepts.

Easing is the acceleration or deceleration of motion between two key points. “Ease out” refers to motion that decelerates as it reaches its end value and is a common form of easing in UI motion (just ask Google).

Interpolation is the calculation of values in between starting and ending values. Easing curves affect the interpolation of two key frames.

Key frames are specific values in time. Key frames are what you create and manipulate in most animation programs. They mark the initial, in-between, and ending states of an object.

Duration is the length of an event from start to finish. In web and app development, this is measured in milliseconds, but in traditional animation tools like After Effects, you may be working with frames per second. For example:

• Shortest amount of time perceivable by the human eye = ~3 milliseconds
• Button depress and release upon click = ~9 milliseconds
• Card expanding upon tap on mobile screen = ~18 milliseconds

Parenting is creating object relationships by linking one object’s properties to another’s.

Now, actually applying these concepts can take a bit more grunt work. After all, you’re working in the fourth dimension! That requires a good deal of planning, structure, and experimenting. For example, if we want to animate a card expanding into a full-page takeover, we have to consider:

• What do the initial and end states look like? (This is usually solved for in initial static design phases)
• How soon after user input (click or tap) does the card begin to change scale?
• Which elements will move continually between states and which will fade in or out?
• How long does it take for the card to move from its original scale to full size?
• How will each element’s values change over time?

Then think like a designer

The art: Understanding motion qualities, principles, and best practices

Once you master the technical aspects of building motion, building a successful animation comes down to its mindful application. Luckily, the foundations of designing statically and designing with motion aren’t as different as you may think — there are steps we can take in both processes to support the user or to express a brand language.

To get started, answer a few questions:

How important is this interaction?

When it comes to motion design, less is more. Don’t overwhelm users with too much — they don’t need a loading bar that twists itself into a checkmark then rotates in 3D and shoots confetti from both ends. We can draw just as much attention to important interactions by changing one or two values over time, like a swift change in color and increase in scale.

How can this interaction express the brand language?

When it comes to expressing brand language, describing motion design is just as important as the words, typography, color, and images we use statically. Motion can be just as expressive as it is functional.

• If the brand is playful and fun, there may be sharper easing curves and larger shifts in scale.
• If it’s personal and straightforward, try softer easing curves and shorter, more abrupt moments of motion.
• Keep experimenting with speed, duration, and easing to see how that affects the motion. You might be surprised how something small can change the feeling of the motion.

How can motion help support the user experience?

We should also consider the functional purposes of motion. How can motion impact the users’ experience and perception of an interaction? How can we help them know where they’re going?

• Be mindful of the direction of motion, especially in screen transitions (e.g., if a user clicks a “→” button, the destination screen could move from left to right on top of the current screen.)

And, finally, how are all the elements choreographed together?

Remember when I said “less is more”? That’s especially important to remember when choreographing motion together. What seemed like an elegant interaction in isolation may be overwhelming in the context of the entire experience. Once you’ve built a sequence of events, it’s best to take a step back and replay it several times to see if and where you can remove complexity.

Of course, building motion is much more complex than just answering these four questions, but it’s certainly a great place to start. Luckily, there are other amazing people on the internet who have written extensively on motion design best practices.

Here are a few articles I reference often:

• The ultimate guide to proper use of animation in UX
• Motion design in digital products: A white paper
• Creating usability with motion: The UX in motion manifesto
• How do design systems incorporate motion design?

Finally, observe and learn

Any successful designer is like a sponge, observing and absorbing the experiences and information around them. Take your new eye for motion into the world. Notice not only the static visual design details, but also how those details change over time. The next time you’re perusing the digital world, keep an eye out for:

• How long it takes content to load
• The direction pages move as you navigate further
• How the motion feels (e.g., bouncy and playful or straightforward and pragmatic)
• How motion helps you understand where you are in the architecture
• How content maintains continuity between states? (e.g., from a list item to an expanded card)

Originally published in thirteen23’s agency publication, The Garage.

The Art and Science of Designing With Motion was originally published in Modus on Medium, where people are continuing the conversation by highlighting and responding to this story.

Warning: This article contains references to emotions and feelings.

Having an open conversation about mental health can be difficult to initiate. The invisible nature of mental health obscures our ability to determine whether someone is actually struggling. It either goes unnoticed or feels too awkward a topic to bring up.

While working as a clinician in children’s hospitals, I found myself in a number of hard discussions with families in distress. This taught me the importance of engaging in difficult conversations rather than missing an opportunity to connect. These conversations can cause a moment of discomfort, but it is only a moment and can be so vital in supporting others to feel comfortable talking about their mental well-being. I later decided to make a move into software development (more on why another time), and over the past year or so, I have thought about the differences in human interactions between the two professions.

Moving from a very human-centered, empathy-driven profession to an industry that is a little less human-centric was (and still is) a big adjustment. I still consider myself new to the industry and have been lucky enough to find myself in the company of those who value growth and individuality. I have supportive colleagues and mentors and a good amount of autonomy in my role.

However, I know this is not the status quo. While speaking with others in the industry, I heard stories of burnout, discrimination, and the glorification of destructive work habits, which all aggravate mental illness. Not to mention the stereotypical image of a software developer as one who works alone, devoid of human interaction. That is quite different from my experience as a clinician, where my role was to protect and improve the health and well-being of the population and minimize health inequities. I wanted to find out if there was any crossover between empathy and technology. Is it possible to reclaim humanity within the tech industry?

Good mental health is more than just the absence of mental illness — it is your resilience, your ability to learn, and your ability to form and maintain strong relationships.

With this question in mind, I went to the AnxietyTech conference. I didn’t know what to expect from it, but I had so many questions about how technology affects our mood and mental health. How could I initiate mental health conversations at work, and what could I do to help others who may be having a hard time? Thankfully, the conference allowed for plenty of thought-provoking discussions, which helped answer some of these questions. I want to discuss how we can be more deliberate in incorporating mental well-being at three levels: individual, organizational, and product.

Individual

We might think of burnout as simply a feeling of “I’m so sick of coding, I’m gonna take a break,” but really it’s bursting into tears because you can’t find your left sock. Burnout is physical, emotional, and mental exhaustion caused by excessive and prolonged stress. Stress manifests in different ways, and it can have a debilitating effect on your day-to-day functioning.

Mental health is key to an individual’s overall well-being. Without it, you cannot truly be yourself. As a result, you struggle to realize your full potential. It affects the way you think, feel, and interact with the world.

Good mental health is more than just the absence of mental illness — it is your resilience, your understanding of your strengths and weaknesses, your ability to learn, and your ability to form and maintain strong relationships. The importance of one’s mental health is undervalued in today’s society.

At the conference, the majority of talks that focused on the individual’s mental health were from developers talking about their experiences in the industry. Between them, they had gone through a wide range of adversity including postnatal depression, ADHD, alcohol addiction, self-harm, and anxiety. Speakers who stood out for me on the individual level included Julia Nguyen and John Sawers. Both spoke about struggles with their personal mental health in a candid way. They also discussed their personal contributions to these issues and reminded us that we need to take care of ourselves so we don’t suffer the same burnout we are trying to fight against.

From listening to all the speakers, I compiled a short list of things you can do for yourself:

• Set healthy boundaries (saying no to working on weekends)
• Practice self-care (have some downtime, get adequate sleep)
• Indulge in other passions/hobbies
• Ask for help (of course, for this to happen you need to feel safe enough to do so; more on this in the organizational section)
• Recognize your feelings
• Verbalize those feelings (by yourself, with someone else, with a group—whatever works for you)

People often struggle to identify what they are actually feeling. This Feelings Wheel was referenced in Sawers’ talk and might help you identify what you are feeling, which in turn can help you to reflect on and better process that emotion.

Another important point raised in these talks is that the individual should get to control where and when they express their feelings. The real difficulty lies in having to consciously process them — something that takes a lot of practice.

Organizational

Let’s be real, it doesn’t matter how many superlatives are attached to your job title. If you are expected to work 60+ hours a week, do as you are told without question, and endure immense pressure at your job, there is no way you can bring your whole self to work day in, day out.

At the conference, there were only a handful of talks addressing mental health at an organizational level, but in an industry that glorifies 10x engineers, ninjas, unicorns, and rockstars, the discussion is sorely needed. We spend so many of our waking hours at work, so we need to ensure that our workplace has supportive mental health initiatives. Hopefully, these initiatives can become an industry norm.

Vinciane de Pape discussed the need for employees to have tools and resources to do their best work and the importance of psychological safety in the workplace. She also gave us some terrifying facts about how too much work can affect your health. For example, working 11+ hours a day doubles your risk of depression and leads to poorer performance in information processing, vocabulary, problem-solving, reasoning, creativity, and reaction times.

Although the organizational level talks were few, the speakers had a good list of things that companies can do to build more supportive workplaces:

• Offer remote working
• Offer mental health coverage (e.g., employee assistance program)
• Have inclusive company events (e.g., don’t make things like alcohol the focus of the event)
• Create unlimited vacation policies
• Listen to feedback
• Be willing to change
• Offer flexible work arrangements
• Honor a 40-hour week
• Reconsider open-plan layouts
• Respect boundaries
• Educate and learn to develop empathy
• Lead by example

One of the best ways to support good mental health practices in your organization is to normalize the conversation around mental health and be there for teammates who might be struggling.

What can I do to support my team?

• Be the one to reach out first
• Listen and show empathy
• Educate yourself about mental health
• Ask how you can help
• Be mindful of your language (i.e., avoid saying words like “crazy” or “insane”)

With these mental health initiatives, companies see a slew of benefits, including a decrease in employee absenteeism, improved employee engagement, improved levels of trust in the workplace, decreased employee turnover, decreased errors and inefficiency, and increased satisfaction with leadership. I think these benefits make these mental health initiatives well worth exploring.

Product

As an industry, we are moving forward with making our products more intelligent. But what about making them emotionally intelligent?

I had never thought about products in this way before the conference. As a community, we have an emotional attachment to technology. There are so many products that cause anxiety and depression; driving users to obsessively seek fulfillment through counting likes is just one example. Other products can bring about feelings of connectedness; for example, the ability to see and speak with family members across the world. As people who work in such an influential industry, we should look at how our products affect those who use them through a holistic lens. It’s easy to forget that we are also casualties of these products we have built.

So what should we consider when designing products? The book Emotionally Intelligent Design might be a good place to start. I had a brief conversation with the author at the conference, and she mentioned that technology does not know when we are having a bad day — technology knows nothing of emotional range. It’s a fair point.

What if we took into account vocal intonation when designing products that use voice-recognition technology? Can we use facial expressions or physical signs such as heart rate in designing new products? The developers of SimSensei, a virtual human interviewer, looked at using those kinds of indicators to identify distress. It was demonstrated at the conference and responded quite accurately to a person’s emotions. Despite this progress, there is still a long way to go in refining this technology. Until then, we should be conscious of our technology use rather than using technology as a distraction.

Pete Dunlap gave a fantastic talk on how to detangle ourselves from technology and create better habits for mindful technology use. Many companies aim to keep customers on their platforms for as long as possible, causing them to feel trapped. They employ strategies such as infinite scroll, push notifications, and gamification to keep the upper hand in the attention economy.

Dunlap had a number of practical tools and tips to help people become conscious consumers.

One great tool is the ScrollStopper, a Chrome extension that prevents infinite scrolling on social media sites—a simple yet genius idea. I know I get caught on that thumb treadmill of a social media infinite scroll for no other reason than to distract myself. This experience often leaves me with feelings of immediate guilt and regret when I realize how much time I have wasted.

Cleaning up your home screen to remove nonessential items is another practical way to disrupt the urge to mindlessly check apps. He also touched on society’s obsession with frantic multitasking and said we shouldn’t undervalue mindfulness.

Looking forward to future products, Bradley Gabr-Ryn spoke about designing with mental health in mind. He encouraged people to design through understanding. He spoke about the importance of making no assumptions during the design stage and ensuring simple things such as color and text are welcoming and approachable. Essentially, it’s important to value your customer’s time and design for people’s mental health, not their attention span.

I couldn’t have agreed more when Gabr-Ryn so aptly stated: “People should stay with your product not because they are addicted, but because it adds value to their lives.”

AnxietyTech’s ability to create a safe space and enable these discussions was one of the biggest takeaways. This backdrop of respect allowed attendees and speakers to be open and honest in discussing delicate issues — a refreshing contrast to other tech conferences I have attended. I think the ultimate goal of AnxietyTech is for attendees to take the knowledge they have gained at the conference back to their teams and communities to continue the dialogue. After all, the first step to advocating for mental health is to have an open and honest conversation; including mental health in the discourse will enable us to break down barriers.

As Nguyen insightfully pointed out, “The way we measure impact in this industry disregards self-care and humanity, and often excludes marginalized groups such as LGBTQI & BIPOC communities.”

Perhaps if we as an industry started to incorporate empathy, digital responsibility, and increased respect for human emotion into our work, we could begin to measure how our products and work practices add value to people’s lives. Acting on these measures could allow us to build an industry that aims to intentionally protect and improve the health and well-being of everybody involved in technology.

At the Intersection of Empathy and Technology was originally published in Modus on Medium, where people are continuing the conversation by highlighting and responding to this story.