YAMAHA D&AD Martin O’Dea & Sam Hoh Brief: Develop a digital campaign for Yamaha to promote its wide range of products.
Delivered: 2 minute video explaining the navigation of a Yamaha campiagn website.
Concept: A multi-language, cross-platform website that promotes the philosphies of Yamaha whilst demonstrating that it is at the forefront of music technology.
ILLUSTRATION Our roles were very clearly allocated from the start, Sam focussed on the layout side of the project whilst I worked on the image-based elements. One of the core jobs was to create the product illustrations to be used throughout the website.
Here were the 8 illustrations I produced to represent Yamaha’s different product types. This involved researching the latest model of each of the categories and simplifying the indtrument to a neutral grey layered vector illustration. This style was settled on after a few attempts that we jointly decided were not working.
CODING Our original intention was to make our final deliverable a fully-coded responsive website, so Sam and I tried to split coding responsibilities, transferring the root folder by airdrop and keeping everything clearly labelled.
Having done my research into building truly responsive HTML5 pages that would work natively across different screen sizes and resolutions, it was my role to make sure that this worked correctly. I set up the core elements of the page and Sam added content and formatting to perfect the layout.
The most challenging part of this was creating a grid of featured youtube videos that scale down to any device and become a list when viewed on mobile.
ANIMATION This was by far my biggest role in the project. Instead of producing submission boards we chose to take advantage of the submit a 2 minute video. I knew that we could use my previous experience with AfterEffects and create a really polished video that demonstrates the navigation of our site.
This was an extremely time consuming process, and as it was so close to submission by this point, I had a lot of full days of animating. Sam was producing the vectors I needed to manipulate, and sending them over as we went along. We had written a script that we would stick to throughout.
TWEAKING The hardest part of the video to animate was the section where the language is radidly changed. This involved making the UI expand, contract and highlight in specific areas in response to a moving mouse. Switching between Sam’s different language versions required really careful adjustment of timing for the result to be believable.
We had a long evaluation process of exporting renders, watching them until we had identified every flaw, I went through and fixed the list of problems and we repeated the process. Most of the biggest tweaks came in this language section and in the transitions between scenes.
FILMING In order to show our site used in context, Sam produced pdfs that we could scroll through on different devices. In the AV resource, we set up lights and a video camera. I watched the result on an external screen while sam moved through the site.
This method worked well, as I was able to pass directions to Sam based on a live veiw from the camera. This allowed us to get our timing right and focus on specific sections of the site. Focussing on the detail in-camera reduced the amount of post-editing.