At SVGator, one of our core objectives is to support students, teachers, and mentors with the toolkit necessary to make both teaching and learning the inner workings of motion design accessible to all. Alamance Community College (ACC), with the aid of Advertising & Graphic Design Instructor, Matthew Gordon, successfully integrated SVGator into their curriculum over the course of only one semester.
This case study goes over the logistics involved in using SVGator for education, the animation curriculum used, the student experience with this academic collaboration, and the educator’s perspective on teaching motion design with SVGator.
Want to optimize your students’ educational experience and better prepare them for thriving careers in motion graphic design, with the help of SVGator? Let’s collaborate!! By the end of this case study, you’ll be equipped with all the necessary information to get started with your new and improved design program curriculum.
Table of Contents:
- How to Get Started with SVGator for Education
- SVGator for Education - The Logistics
- The Animation Curriculum with SVGator
- The Student Experience with SVGator
- The Educator Experience with SVGator
- Teach Motion Design with SVGator
How to Get Started with SVGator for Education
All you need to get started with using SVGator for educational purposes is a proactive class instructor among the faculty of your graphic design program, like Matt Gordon! He was the one that reached out to share his feedback on our online animation tool. Voicing his intention to incorporate SVGator into the college courses at ACC was all it took for this academic collaboration to be put into motion.
Granted, Matt was already an SVGator connoisseur, having worked with SVGator as a freelance artist, along with other design industry-standard tools (like Adobe’s Creative Suite). Although this college instructor didn’t require an involved level of support from the team behind SVGator when lesson planning, educators that are new(er) to SVGator can expect to have the team’s full support during the entirety of the teaching process.
Here’s how ACC describes its advertising and graphic design program:
“The Advertising and Graphic Design curriculum is designed to provide students with the knowledge and skills necessary for employment in the graphic design profession, which emphasizes design, advertising, illustration, and digital and multimedia preparation of printed and electronic materials.” - Applied Skilled Trades Division at ACC
Does this course of action match your university’s goals for your students?
If so, you’re most definitely going to want to read on!
SVGator for Education - The Logistics
- Educators are assigned an SVGator contact person (in this case, SVGator’s Community Manager - Patricia Egyed). You are encouraged to reach out to this contact with any and all questions regarding the logistics of the collaboration, tool functionalities, teaching material support, industry insight, and anything in between.
- Educator sends over a list of student email addresses (all participants must first create a free SVGator account by registering here: https://app.svgator.com/auth/register#/).
- Your SVGator contact person upgrades all forwarded student (& educator) accounts to SVGator’s PRO plan for an agreed upon number of months (e.g., the duration of a semester/entire class)
- Educator works with students using SVGator’s full-featured PRO version (which can be explored on the app’s Pricing Page)
- Optional: Educators and students are invited to share a bit about their experience with SVGator at the end of the semester/class (your SVGator contact will provide you with a custom “testimonial submission link” – requiring as little as 2 minutes of any student’s time).
- Do it all again with a new class of students – and watch the world of web animation be flooded with more and more talented, inquisitive minds that have mastered motion design with the help of SVGator!
The Animation Curriculum with SVGator
Here are a few motion design effects, techniques, and use cases that Matt, ACC’s advertising and graphic design instructor, introduced to students. The goal was to give students the opportunity to practice and achieve proficiency in web animation, with SVGator:
Animation curriculum example:
- Squash & Stretch
- Loading Animations
- Motion Path Animation
- Animated Ads
- Faux 3D Effect - Position & Rotate
- Walk Cycle
- Character Animation
- End-of-Class Project - Fruit/Veggie Pun Web Animation
- Miscellaneous Motion Design Explorations
1. Squash & Stretch
The concept
“Squash and stretch” is a motion design technique that consists of emphasizing the movement and weight of an animated object. Students learn to apply squash and stretch to create lifelike motion graphics that mimic the natural behavior and organic details that make professional animations stand out.
The inspiration
The results | Student work
2. Loading Animations
The concept
Loading animations, also known as preloaders, help improve the UX (user experience) of a website/app by concealing wait times. Students learn to design animated loaders that can keep visitors engaged, preventing them from leaving the page while a request is being processed.
The inspiration
The results | Student work
3. Motion Path Animation
The concept
Motion path animation entails moving an object along a predefined path. Students learn how easy it is to animate an element along a custom path using SVGator’s automatic motion path feature. This technique is essential to storytelling and efficiently directing viewer attention using motion graphics.
The inspiration
The results | Student work
4. Animated Ads
The concept
Animated ads excel at capturing attention and conveying messages more effectively than their static counterparts. Students learn to design and animate advertisements intended for use in marketing campaigns.
The inspiration
The results | Student work
5. Faux 3D Effect - Position & Rotate
The concept
The fake 3D design technique, also known as 2.5D animation, consists of creating the illusion of 3D visual depth with the use of 2D graphics. Students learn how to use basic animators (Position and Rotate) to give their animations an immersive feel.
The inspiration
The results | Student work
6. Walk Cycle
The concept
Walk cycles are a fundamental skill in character animation. Students learn to animate realistic repetitive character movements for an easy walk cycle.
The inspiration
The results | Student work
7. Character Animation
The concept
Character animation consists of bringing characters to life using convincing movements, such as walk cycles, expressing emotions, interactions with other animated elements in the scene, etc. Students learn the basics of character animation, gearing up to their end-of-class assignment: creating a fruit/veggie pun web animation.
The inspiration
The results | Student work
8. End-of-Class Project - Fruit/Veggie Pun Web Animation
The concept & the inspiration
We’ll let Matt explain his vision for the capstone project he assigned to the class:
“For the final project of the semester, my college students were required to animate a fruit or veggie pun. I decided to join them in the work. “Fruit Punch” was created using SVGator, the fantastic online animation platform. I owe a HUGE thanks to the good people @svgatorapp who partnered with me to create a great learning experience for my students.” - Matt’s Instagram post on the end-of-class project
The goal here was for students to come up with a fun and creative animated project that showcases the skills and abilities they have worked on throughout the duration of the class.
The results | Student work
9. Miscellaneous Motion Design Explorations
Students are free to explore SVGator’s vector creator, editor, and animator capabilities for their own personal and professional projects. They can also take advantage of the tool’s extensive asset library that includes static and animated elements that are free for commercial use (created by our in-house team of designers).
The Student Experience with SVGator
The students’ perspective is ultimately the deciding factor in wrapping up the conclusion of this case study. That’s why we invited students Ruby Stonesifer and Spencer Stewart to answer a set of questions about their first impressions of SVGator, and how they see motion design playing a part in their future career goals.
1. What areas of graphic and motion design are you most interested in?
Illustration is my main area of interest, whether it be for editorials, websites, or promotional advertisements. I believe visual interest is a powerful tool, both to draw people in and to create memorable graphics.
2. What were your initial thoughts on being introduced to SVGator?
I'm not actually a graphic design student. I'm a fine arts major, and I took this class out of curiosity. I've had very little experience in digital media as a whole, let alone animation. I wasn't nervous about learning to use the program, but I did expect it to be much more difficult than it turned out to be.
I was surprised by the simplicity of the interface - even with little experience with digital programs, the layout is very easy to navigate. It's very straightforward to move and edit keyframes, and the custom easing feature and presets make movement very clean and smooth.
3. How did you find this online animation tool compared to others you’ve used?
This is my first time using an online animation tool of this sort.
4. Would you see yourself using SVGator professionally in the future?
Yes! I think this tool will be useful in creating an effective portfolio site for myself first. I wouldn't have considered working with motion graphics otherwise, but SVGator is so simple to use that I will most likely end up using it again. In the future I plan to experiment more with the morph animator and gradient tools specifically.
5. What’s next?! Tell us about your professional vision!
I plan on transferring to university to continue my studies in fine arts, as well as pursuing an education in marketing. At the moment, I'm working on learning the process of creating graphic novels. I'm passionate about visual storytelling, and I hope to create meaningful stories that help young people to become excited about their real lives, rather than providing an escape from them.
Get in touch with Ruby Stonesifer: rubystonesifer@gmail.com
1. What areas of graphic and motion design are you most interested in?
I am most interested in pursuing character illustration work, but I am intentionally flexible and trying to broaden my abilities. I want to become proficient in as many facets of digital art and design as possible, so I can produce more unique work.
2. What were your initial thoughts on being introduced to SVGator?
When I first found out we'd be leaving the Adobe Suite and moving to a browser-based software for our animation unit, I was surprised and a little apprehensive. Those worries were lost pretty quickly however, when I realized how simple and familiar the UI was – especially as someone who has done a decent amount of keyframing in Adobe Premiere Pro.
3. How did you find this online animation tool compared to others you’ve used?
I found the workflow very similar to creating simple animations in videos using Premiere Pro (although none of those animations have matched the scale of the projects that I have managed to create in SVGator). Other than that, I have only done simple frame by frame animation using Photoshop and Clip Studio Paint, which is hard to compare to the vector based animation that SVGator works with. That being said, having used those programs' animation tools, SVGator's UI felt immediately familiar to me, aside from a few features unique to vector animation in general.
4. Would you see yourself using SVGator professionally in the future?
I potentially see myself using SVGator in the future on professional projects. My current commission work doesn't usually include animation, but there are a few instances that do, in which cases using SVGator could help get a smoother look easily. I’m definitely open to trying out working with motion design now.
5. What’s next?! Tell us about your professional vision!
My immediate next step is looking for paying work over the summer, while I have fewer classes to occupy my time. In the long term, after college, I hope to join the industry design world, while I continue to work on my personal illustration commissions on the side until they become a more stable source of income. Ultimately, freelance is my dream goal, but until then I am eager to build my portfolio between classes and real work.
Get in touch with Spencer Stewart: https://scstewart412.myportfolio.com/
The Educator Experience with SVGator
Matt’s role as a college instructor played an essential part in this collaboration. He has contributed immensely to kickstarting our “SVGator for Education” project. Nonetheless, it’s Matthew’s artistic talent, passion for teaching, and phenomenal design skills that have done the heavy lifting! All the more reason why we consider his views on teaching motion design with SVGator to be the most compelling arguments in support of this project:
“One of the reasons why I love SVGator is because I love to teach it! With its simple user interface, it makes for a great learning tool for beginner students. Now, don’t get me wrong, I’m a fan of Adobe’s After Effects. I use it all the time in the work that I do. But AE can be daunting. There’s a lot to it!
With SVGator’s intuitive interface, I can teach my students critical concepts like: how to set keyframes, how to work on a timeline, and the importance of timing; without them getting overwhelmed by unnecessary effects or other features. And so, for me, that simplicity is gold.
My students are able to export their work quickly, either in animated SVG format, or in MOV or MP4. They can see their work living in the wild instantly, and that is rewarding and fulfilling. For them, that’s exciting. For me, it’s exciting! It’s exciting as a teacher!”
Teach Motion Design with SVGator
Get in touch with SVGator’s community manager at patricia.egyed@svgator.com and get all the information and support you need in order to customize your experience with “SVGator for Education”!
