Why consistently hitting design walls is a good thing
It’s all about getting back up on your creative feet
Build a strong, long-term learning strategy
Newly acquired skill sets are the best way to expand our design mind
Today, I hit that black wall while I was following along a design tutorial on YouTube about dynamic animation. Everything went well for the first 10 minutes. I learned how to output an After Effects (AE) text animation to JSON with bodymovin [1], an extremely useful AE extension to export Lottie animations [2].
Bodymovin exports AE animations by default as .json files that utilize the lottie.js player that comes along with the plugin. (More on the Bodymovin plug-in for After Effects in reference 1.)
Outputting an AE animation as a .json file is extremely useful for developers to utilize JSON to build dynamic animations, using a, for example, class=“username”, to link through code to the dynamic live text.
The .json .username is exactly the point where I hit my roadblock
It was about the .json statement. How exactly does my AE layer name .userentry, output to .json, relate to the dynamic text entry again? Say that again? And again.
We’ve all been there.
We can build a great work of design, render it in a variety of web-ready and compatible files, but the real end product eludes us still. There is an entire back-end process that remains opaque and unknown, as of yet.
But hey, we designers are not bots, nor AIs. We’re humans with a wide array of development experiences based on individual circumstances. WiFi access can greatly vary for each designer, or for that matter, access to learning labs.
Identifying the best free (and almost free) learning hubs
Striving for the best learning access to study design tools
Hitting walls in the design process is basic experience. It’s a valid experience. It needs to be out in the open.
Designers are constantly inventing. In every aspect. In fact, repeating a design we’ve done before is boring to us, we continually want to travel to the new frontier. And that’s a great thing!
There are so many online academies, learning platforms, study groups. They all offer learning modules for beginner, intermediate and advanced levels. Join them.
So how do we continue the learning process?
Keep learning simple. Expand your knowledge foundation one block at a time. What we’ve used yesterday is only part of what we’re using tomorrow.
Listen for industry buzz words. Google web, graphic, fashion, architecture design trends for the new year. A great many innovative design approaches utilizing new tools will present themselves.
Investigate design trends
Example 1: JSON files
JSON-rendered animation is one of the many behind-the-scenes trends. As a designer, I will need to know about json files, what it offers to web designers and animators. While we may not need to expand on this particular coding language, it’s important to me that I understand its role in the web universe.
I can create an animation in AE and export it as a JSON file. It exports as editable code that can be adjusted with code. It’s scalable, it’s editable, it’s adjustable. It’s a delight. — Brock Prescott, Creative Technologist
Example 2: Dynamic animation where UX meets design, and design meets development
User-centric animation is future (and trending) implementation of adapting JSON-rendered animations react to different types of user actions.
This opens up UX questions such as: What type of user do we have? What do we have to do to finesse the animations based on the user interaction?
This in turn reveals that the design team creates as a fully integrated design unit, all understanding what the other is doing. No small feat for everyone involved, and an excellent reason to learn as much as possible about all the steps needed to develop a superior product.
Give yourself the time to learn
My hitting that wall with the JSON file is just one example of the many times I hit that wall. And that’s ok. As long as I give myself the hours to actively study and learn new design tools every week, I’m on the right path.
Scheduling time for learning is a must, if we want to expand as designers. Everyone has a different learning path, but the time we give ourselves to learn is the same concept for everyone.
Overcoming the wall
Learning particular design tools will make you realize that maybe the wall is not as tall as you had imagined it. You can take that ball and successfully throw it across the wall into a bright future, once you have studied the missing link to getting the project done.
As for myself, I still have to study the JSON-specific .username input, but I have learnt how to play an animation on the browser as an HTML-embedded JSON file, using the Lottie lottie.js player as animation player. I’m happy, for the moment.
In summary
Hitting design roadblocks or walls are inherently positive challenges.
Use “not-knowing” as a kick-off point to learn that specific design tools.
Set a learning schedule for yourself to allow maximum return on studying new things.
This principle applies to life in general. As designers, we can benefit from an ever-changing environment.
References:
[1] https://aescripts.com/bodymovin/: Bodymovin lets you render animations in the browser on svg, canvas and html. It supports a subset of After Effects features. Animations can also be played natively on iOS and Android using Lottie.
[2] Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. The top 500 apps on the App store now use Lottie to engage users and enhance conversions.
Animations designed in AE, saved as gifs for Medium. ©Eva Schicker 2022.