large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/the-making-of-reforma-horaria-9c6c3b06dd58?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Magoz 
<h4>The Process Behind the Animation</h4>
by <a href="http://magoz.is">Magoz</a>
<img alt="" src="https://cdn-images-1.medium.com/max/765/1*nIhf2464C86CJ-e1B9ELKg.gif">
This post originally appeared on my <a href="https://magoz.blog/making-reforma-horaria-animation-process/">Blog</a>. You can find more illustrations, animations, and articles on my <a href="http://magoz.is">Website</a>. Follow me on <a href="http://instagram.com/magoz">Instagram</a> and <a href="http://twitter.com/magoz_">Twitter</a>.
At the end of 2016, I received an assignment to create a 25-second animation.
It was a very intriguing project for the Catalan government that would introduce changes to their citizens’ time tables, aligning them with the European style (starting the work day earlier, taking shorter lunch break, and finishing work earlier).
From the very beginning, I became very excited about the project because <a href="http://somosusted.com/">Usted</a>, the agency who commissioned me the animation, gave me a lot of creative freedom and trusted me.
<h3>Starting Point</h3>
The starting point was to create a 25-second animation about how the Catalan’s life was going to be improved with the time change. The spot was going to be broadcasted on TV.
They provided me with the following script:
<blockquote>Hey! Why don’t we add time to our lives? To learn new things or to rest properly. More time to grow with the culture, to share with friends and family. Or to do nothing at all. Days have only 24 hours, but what if we could find time inside of the time? Join #reformahoraria and discover the life that is waiting for you.</blockquote>
The available time for working on this project was 2 weeks, which was incredibly tight and a big challenge.
Due to the scope of this project, I knew I would need a team to work along with me. As always, I counted on <a href="http://www.joselorenzodesign.com/">Jose</a> for the animations. I also contacted <a href="http://www.noiz.es/">Noizes</a>because I needed someone else to take care of the music and sound effects.
<h3>Our Proposal</h3>
Usted sent me a proposal to start working around the idea of The life that is waiting for you to develop conceptual illustrations. They included some ideas and examples and we started working together on how to find the best solution for this project.
Our proposal was to focus on the individual scenes of the script and create conceptual animations. The connection between scenes would be the colors and the graphic and conceptual style of the animations.
As we only had two weeks to develop the project, it was going to be much more productive to work on the scenes separately. In that way Jose could animate each scene as soon as we had the approval while I was still working on the other concepts and finals.
It turned out being one the best decisions of the project.
<h3>Finding the Concepts</h3>
I treated this animation as a series of independent illustrations that were going to be animated as a short gifs (with sound). The briefing for each image was the context of each part of the script (relax, culture, friends, etc.).
Here are some of the <a href="https://magoz.blog/photoshop-to-illustrator-part2-sketching-workflow/">sketches</a> I developed:
<img alt="" src="https://cdn-images-1.medium.com/max/900/0*w-buQNRW1MhnqC-k.jpg"><img alt="" src="https://cdn-images-1.medium.com/max/900/0*xGn_OMm9iBwqjmgI.jpg">
Once the sketches were approved, I created the finals which were ready to be animated. We skipped the color sketches and animation sketches because the deadline was extremely tight, and we didn’t have time for it.
<h3>Storyboard and Animatics</h3>
We didn’t develop a proper story board for this animation because we didn’t have time. But it was also because the way I conceived the animation was very straightforward, and Jose and I have a lot experience working together.
Instead, I recorded myself reading the script and then placed the sketches in order to know how much time we had for each animation. It also helped to work on the rhythm and the entire piece. That worked as an animatics and helped us a lot during the process.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F203879807&amp;dntp=1&amp;url=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F203879807&#038;image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F618267295_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1280" height="720" frameborder="0"><a href="https://medium.com/media/ef823d32c1f8dd25d997e892f2709783/href">https://medium.com/media/ef823d32c1f8dd25d997e892f2709783/href</a></iframe>
<h3>Colors</h3>
I usually start <a href="https://magoz.blog/how-i-use-colour-in-my-illustrations/">working on the the colors</a> at an early stage of the illustrations, and I keep tweaking them throughout the project. But this time, as we had a tight deadline, I worked on the color palette while I was creating the finals. We even started animating without having the color palette ready.
<img alt="" src="https://cdn-images-1.medium.com/max/900/0*t4Lh-JPawUP4FVFR.png">
As always, I tried to keep the colors as simple as possible. This time we needed a lot of impact as well as flexibility, and that’s why I chose a bunch of very bold and strong colors that were able to combine well with each other.
<h3>Animations</h3>
The animations had to enhance the illustrations, making them more interesting and appealing and creating a rhythm between the scenes. We had 2–3 seconds per animation so we couldn’t achieve big reveals or surprises with their movements.
That starting point was crucial to the animating process, because it allowed Jose to start working on the animations while I still was working on some of the sketches and finals. Being flexible was critical, and it was the reason we finished the animation on time.
The <a href="https://magoz.blog/how-to-create-animations/">animation process</a> went as usual: me giving directions to Jose and he implementing the actions and movements brilliantly. We reviewed each scene a few times and we worked on several approaches for solving a few challenges that we faced.
Here is an example:
<img alt="" src="https://cdn-images-1.medium.com/max/900/0*qJIrXAKp68j3h5Hx.gif"><img alt="" src="https://cdn-images-1.medium.com/max/900/0*kXwR7GRfOGm7MKND.gif">
The animatics I created earlier recording my own voice as a guide defined the amount of time we had for each scene.
<h3>Voice-over</h3>
When all the scenes were finished, it was time to record the voice-over. This part of the process was handled by Usted, who contacted and selected an actor and recorded the voice-over based on the finished animation.
<h3>Music and Sound Effects</h3>
While working on the animations, pending concepts and finals, I started to work with Noizes to take care of the Music and Sound for this animation.
The starting point was to create an optimistic and calm music that fit the spirit of the animation. Sounds and special effects were needed as well to add a more human touch to the animation.
We went through several versions until we had the perfect balance between the music and sound effects.
<h3>Final Result</h3>
The team made an incredible piece of work and everything went as planned. I’m very proud of the finished animation.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F193513549&amp;dntp=1&amp;url=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F193513549&#038;image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F605222498_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1080" frameborder="0"><a href="https://medium.com/media/be49053ea436bc7a49358a68ef0a66ab/href">https://medium.com/media/be49053ea436bc7a49358a68ef0a66ab/href</a></iframe>
It was a challenge to create a 25-second animation in 2 weeks keeping my quality standards and meeting my conceptual and creative aiming. The experience of leading and directing a multidisciplinary team was amazing.
<h3>Impact of the Campaign</h3>
The spot was broadcasted on the Catalan TV and internet, and also many static pieces were printed and used as posters and advertising. Usted created a fantastic campaign that you could see on the streets of Barcelona.
<img alt="" src="https://cdn-images-1.medium.com/max/900/0*b89XeNz-3WajKe7d.jpg"><img alt="" src="https://cdn-images-1.medium.com/max/900/0*4YN7XBQC29KTmoxd.jpg">
When we launched the campaign we received amazing feedback. The impact was huge; for instance the actual Catalan prime minister, Carles Puigdemont, posted the campaign on his Facebook page.
<img alt="" src="https://cdn-images-1.medium.com/max/500/0*dTdwk3uRGobBjfK7.jpg">
<h3>Conclusions</h3>
<a href="https://magoz.blog/animation-techniques-to-create-animations/">Creating animations</a> require a lot of planning because the process takes a lot of time, and you can’t afford having to go backwards because something is not working. But in this particular case, with the two weeks deadline, planning was even more crucial.
Developing a proposal that allowed the different team members to work independently was a wise decision. It added flexibility and allowed us to work without being blocked from each other’s process.
And finally, having a great and talented team that you can trust and be trusted is imperative. I’m very fortunate to be able to work with all of them.
This post originally appeared on my <a href="https://magoz.blog/making-reforma-horaria-animation-process/">Blog</a>. You can find more illustrations, animations, and articles on my <a href="http://magoz.is">Website</a>. Follow me on <a href="http://instagram.com/magoz">Instagram</a> and <a href="http://twitter.com/magoz_">Twitter</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9c6c3b06dd58" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/the-making-of-reforma-horaria-9c6c3b06dd58">The Making of Reforma Horaria</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Making of Reforma Horaria

The Making of Reforma Horaria

The Process Behind the Animation

Top Stories