Enhancing my design tool stack— Creating an animated prototype with InVision Studio
As a developer working in the tech scene, I know all about beefing up my skill stack. Before becoming a designer, this meant building new projects in Ember or React to gain practice — but now it’s a whole new ball game.
The market for design tools is huge and many of the programs are either too costly or provide free versions that are limiting. Recently I had some experience in Principle thanks to their free trial offer. But as that was going to end soon I needed a new tool for animation. So I was happy to learn that InVision Studio was offered for free, and after using it I have to say that I prefer it.
THE PROS
- The platform is free and offers easy posting to InVision’s cloud-based platform. Posting new prototypes is seamless and seemingly unlimited. You can start and finish your design in InVision studio.
- When dealing with Principle there were many conflicts with symbols or elements created in Sketch using various plugins. Often I would have to convert many vectorized elements to pixelated bitmap images just so that I could use them in Principle, which was a hassle. Importing from Sketch in InVision Studio is easy and problem free.
- Studio’s interface is comfortably familiar as it mirrors the feel of Sketch. I felt at ease beginning in Studio with a blank artboard and some direction.
THE CONS
- The one notable con that I could see was an issue with importing symbols from Sketch. Animating changes to these symbols from page to page is not allowed. But this problem is quickly fixed in by detaching the elements from the symbol.
THE PRACTICE
As a web-development instructor, I was always asked to share resources or advice on how to learn new frameworks and I would always tell my students the same thing.
If you want to learn a framework, the best thing you can do is to build a project in it.
And that is what I set out to do with InVision Studio.
THE PROJECT
I was challenged by my Ironhack design mentor Murilo Mafra to create a microsite centered around an event. Many of Muri’s other pupils chose to create microsites describing music festivals, but I wanted to try something different. So I began thinking of events that would be a weekend or a week long. Something instantly came to mind — company employee retreats.
Recently I worked for a progressive company based in Helsinki named Leadfeeder. 90% of their employees work remotely while living in several different countries around the world. Twice a year, Leadfeeder flies all of its employees to a central location for a week so that they can collaborate on work, ideate on the future of the company, and of course have a good time with their estranged co-workers. I was lucky enough to join them last year in Malaga, Spain and I thoroughly enjoyed spending time with my teammates and learning more about them in person.
I began to research different companies that offer similar ‘employee team-weeks’ and I came across many options for a user base for my project. Some more notable companies were Basecamp, Stack Overflow, and InVision. Now I’m a fan of irony, so because I already planned to use InVision Studio for this project, I went with the obvious choice. I began designing a team-week teaser for InVision… in InVision. I’m meta like that.
ADDITIONAL RESEARCH
Using the company information I had I began to research how the different companies approached team getaways. Because this is a relatively new practice many leaders in the movement are willing to share their experiences and suggestions.
Here is a list of some employee concerns that many companies mentioned in various articles:
- Employees want to know details about what is included and what is expected of them
- Employees expect to continue to be paid during team outings and don’t want the trip to take out of their vacation time
- Employees like to have the ability to vote on the location where they will all meet
Companies use these trips to boost employee morale and increase employee retention. To do this they make sure the trips are fun and focus on team building and strengthening relationships.
Based on the insight of these companies, I decided that the flow of microsite should be fun and exciting enough to get employees 100% interested in attending team-week. It is assumed that, when working for a company like InVision, a person would already know about team trips like this. Hell, it’s usually one of the selling points when recruiting new employees to these companies. It’s because of this that I felt the microsite did not need to be informative as to what a team-week is and what it entails, and instead it should just focus on details of that particular event.
UNDERSTANDING INVISIONS DESIGN STYLE
I went through InVisions different websites and screen caps of their advertisements/application walk-throughs and I collected a sample of their design scheme. The goal was to use this as a “style guide” for the design of this project.
InVision’s style is sleek and bold, they use dark backgrounds (usually black) and bright fonts. Many of their sites include a large header with a moving .gif or video covered with a dark filter and bright text. With a style in mind, I was able to have a clear vision for the pages and animations that I wanted to create. Beginning with blank artboards I created my screens one by one in InVision.
I skipped a mid-fidelity and focused only on a hi-fi because the plan was to use animations heavily and I was unsure of the animation capabilities of Studio. I noticed that InVision likes to use a large pink period symbol across many of their sites so I made that a key animated element helping me to move across the pages. The result was a clean and coherent multi-view teaser that would have provoked excitement in any employee who viewed it.
MOBILE FIRST — DESKTOP WHEN?
With only one week to develop this responsively, I had to sacrifice on the desktop side of the project. Instead of focusing on creating every page for desktop and adding animations I decided to adapt the main info page for desktop and add a video background to the header. You’ll remember that a video header with a dark overlay fits with the InVision style and brand on their existing sites. So I tried to add a .gif and learned that InVision (just like Principle, Sketch, and others) does not allow you to add animated images to an artboard. With all the possibilities for animation in this app, it is upsetting that adding a simple animated photo is impossible.
I didn’t give up though, using my experience in front-end web development I quickly thought of a workaround. Within InVision I created the page and added a large header with a slightly shaded transparent background. Then I exported the page and loaded it in Google Chrome. Opening chrome editor I added the desired .gif to the Chrome page and using CSS I positioned the .gif to fit neatly behind the header as a background image. I then faked the page change action by using short cuts to switch between the two screens on the browser. The resulting animation was a bit slow to load but for a rapid-prototype, I would say it got the point across.
MY FINAL THOUGHTS ON INVISION STUDIO
The animations turned out cleaner and easier to set up than previously in Principle. The controls and customizability were intuitive and easy. Being able to slow down and loop the animations really helped me to be precise with the details and the results were great. Overall, I prefer InVision Studio to Principle for animations but I am not completely sold on using it as a replacement for Sketch when designing. I have since used Sketch combined with Studio for more recent rapid-prototypes, and I find the combination to be a powerful 1–2 punch.
ADDED BONUS
Connected to InVision Studio is a built-in Zeplin-like engineering handoff tool called Inspect. This essentially eases the workflow of handing off design specs and assets to engineers. See the automatically generated example below.
