Product Design

Nov. 5, 2015

/ case studies

Back To The Frontend - the journey to the future in the eyes of a Frontend Dev

Marcin Wasilewski

October 21st 2015 is a very important day in the history of time travel and important date for fans of cult movie "Back to the Future" from all over the world - it’s a day when Marty McFly travels to the future and saves his family. We decided to unveil our new HTML5-fuelled micro-site honouring "Back To The Future" trilogy. What was the creation process of Back to the Frontend from the backstage?

Back to the Frontend – beginnings

12:28, a phone rang in one of our rooms on the second floor.

- Marcin? Hope you’re not sleeping? – the voice asked.

- N-no. Why would I?  - I answered while rubbing my eyes, trying to yawn silently.

- Come to the conference room, it’s important.

- Ok, coming.

It was our COO and my namesake. I took a sheet of paper and a pen and went downstairs to meet with Marcin. I gave up on taking a skateboard… I probably wouldn’t survive riding it down the stairs…

But let’s go back a few weeks in time…

While visiting QA team, I noticed that our graphic designer was designing a logo looking oddly similar to that of “Back to the Future”. I immediately asked what’s that all about. When he said that we’re going to use “Back to the Future” theme – the movie which has a special place in my personal ranking of movies since I first watched it when I was a teenager, I knew I had to get it.

After a few days of uncertainty, our COO asked me to come to his office and admitted that he also enjoys this movie and that he “can’t say no to an enthusiast”. The moment he said it I knew upcoming weeks will be quite interesting. That’s how my journey with“Back to the Frontend” started. Since it was an internal project we had no limitations apart from the deadline that couldn’t be crossed. October the 21st was the date when the main character travelled to the future (in the second part of the trilogy). Apart from that one restriction, we were free to choose the way we present the site and what technologies we use. We chose the theme, we had a deadline set  - what we lacked was the detailed idea.

We exceed  88 mph, but no deadline

When I got to the conference room, a not-so-small team – graphic designers, a project manager and previously mentioned COO – awaited me. We started our brainstorm, looking for a golden mean and a vision that would satisfy everyone. We had a few ideas that we revised over a few days. Time was our enemy – we had to be sure we will make it on schedule, with no excuses. Firstly, we came up with an idea of creating a one-page site with scrollable sections, later on we added a DeLorean’s cockpit view…

wireframes

Many could argue that working as a programmer in a software company is all about following orders from clients, sometimes for PMs as well. From time to time we have the occasion to step out of the shadow, just like I could in this case. I suggested an isometric view of hill Valley (the city presented in a movie) with a delicate parallax effect. After considering pros and cons the idea caught on. Additionally we enriched it with elements we talked about before – we added scrollable sections that allows to read all the content without going back to the main illustration and a panel imitating the cockpit – we implemented the navigation of the site there.

wireframes

Obviously, we couldn’t forget about infamous 88 miles per hour! The speed should increase with the scrolling of the sections;  after reaching said speed, the jump to the contact form happens. All sounded promising – I started working on the site’s logic, graphic designers started designing the graphic part of the concept. Naturally,  we maintained the atmosphere of the second part of “ Back to the Future”, revealing that the future in front-end had already come.

Spine like a hoverboard

As I already had experience in using the parallax effect and animations from the last year’s project – Polish Christmas Guide – I could use it in this project.

Wherever I could, I used default solutions, so in "Back to the Frontend" I mostly used CSS-based animations supported with a great javascript library GASP which allows to create smooth and fully controlled animations via DOM. The lights imitating the skyway as well as a thunder are displayed in Canvas. Since in 2015 the Internet got conquered by mobile devices and RWD is a standard nowadays, we couldn’t forget about them. In case of mobile devices we decided to show the sections one below another. Also, the website may use gyroscope (if your device has one) to rotate the illustration via rotating the phone!

 

proposals of BTTF design

The sentence "third time’s a charm" turned out to be true in this project, because the third design was fully accepted ;) Although the whole was designed in vector graphics, I decided to use halftones due to performance issues. That choice was made based on my experience – during the tests of “Polish Christmas Guide”, the version that included halftones worked way smoother than with SVG ones. All in all, I’m personally a fan of SVG files because they allow to obtain great effect, which – looking a few years back – wouldn’t be obtainable (although I don’t understand why Mozilla didn’t fix the issue that makes group of SVG files fail to rotate properly…). 

One of the most exciting parts of the work on "Back to the Frontend" was the use of Spine program intended for a skeletal animation. Colleagues from MerixGames department came with help as they had already used that program for animations in Kopanito All-Stars Soccer game.

Spine and skeletal animations

Luckily, skeletal animations aren’t foreign to me, as I had already met them during my work with 3-D graphics (the 2-D animation is easier in my view). I could export the effects of my work in Spine to either a JSON file so I could later animate SVGs via scripting or to a sprite – that means, to frames of animation in a single file. I decided to choose the second option, because I didn’t want to make movement’s calculations too heavy and because I could animate passers-by movements via CSS using stop-motion technique.

Trial flight, a.k.a vehicle tests

The indispensable part of our work, especially in the later stages, is the contact with QA department. Our meticulous testers checked the website on every possible device and in every possible configuration we have in our company. Thanks to that we were able to adjust the page so it works smoothly on as many devices as possible. I have to admit that I enjoy working with our testers who uphold the quality of projects we create. However some tasks related to mobile devices’ drawbacks make us (frontend team) annoyed because some trivial errors take ages in order to get fixed. 

Minor works such as bug fixing, uploading the content and consultations with our boss lasted 2 remaining weeks before the deadline.

Back to the future

The project kept gaining momentum as we were approaching the deadline. The whole Internet buzzed and celebrated the arrival of Marty McFly to the future. That day our project went live and was presented to several CSS galleries’ sites and the company received congratulations on job well done. I was happy to help with my movie’s knowledge as well as my frontend developer’s skills. Pity it’s over… "Back to the Frontend" is a project that was the most enjoyable for me so far. On the other hand, the completion of that project means the beginning of new challenges waiting for me in MerixStudio. 

To feel the atmosphere and to celebrate Marty’s return to the future I wore a movie-themed T-shirt and decorated my desk with mini DeLoreans – after work I arranged a “Back to the Future” marathon for my friends ;)

Like Dr Brown said: “It means your future hasn't been written yet. No one's has. Your future is whatever you make it. So make it a good one, both of you”.

 

We use cookies on this site to improve performance. By browsing this site you are agreeing to this. For more information see our Privacy policy.