I started doing the layout for the fluid responsive website while at the same time Martin started coding it. We were constantly sharing files via Airdrop which I now realise is extremely useful and time saving. At this point in time we feel we have done enough research to coherently start designing and implementing the work in context.
We have identified that we need to start working on the navigational video. This will serve as our main final product. The video will be two minutes long and show how the website in a perfect world would work.
Navigational video
The script, storyboard.
Start on google start page, tenori-on google doodle. User
clicks on tenori-on and the search term Yamaha tenori-on is entered.
*tenori-on has some kind of animation that follows the
mouse, makes it interactive.
Then the browser loads and our website appears starting with
the Yamaha logo – inspired state of mind. Scroll down and the logo explodes.
Next page takes you to ‘featured video of the day page’,
zooms in over the words “featured pick of the day” with a definition of what
the tenori-on is!
Then you see the tenori-on in action and music starts
playing. On the video it says ‘innovators in technology’ or some kind of
statement.
From there the angle zooms out and starts moving down the
page.
*Music is still playing
Next page is a statement that says ‘investors in people’ or
‘Investors in people, creativity and artistry’, something along those lines.
Something that says Yamaha is in harmony with society and valuing people.
The next page features speciality instruments and drums.
After that there is a philosophy about technology and we continue to introduce
Yamaha products.
At the same time as delivering products we are showing the
navigation of the website and features such as multi-language, multi-device, multi-platform.
*Responsive web design needs showing off!
After the last product the next page is the Yamaha logo
coming back together with the quote ‘isn’t it great when creativity and
technology come together?’ Then that fades out and the kando philosophy appears
and then fades out.
If we need more content it would be useful to put the
website in context. Show some images of the website on different devices, maybe
still images. – Tablets, phones etc.
Website layout
I began designing the original layout with a colour scheme and set typeface specifically chosen with the capabilities of web in mind. From the brief we originally wrote we said that the website had to be 'clean' and clutter free as this is what is wrong with the current Yamaha brief, so in response to these mandatories we selectively began making changes and alterations to our layout.
I designed the first layout in InDesign and it seems more appropriate to me, but for the navigational video I needed to design it in Illustrator so that Martin could format it correctly. Apparently it is easier to do with a vector. It took me longer to make finalised design decisions because of this software change, just little things such as underling text - I had to literally draw a line and use a stroke as it seems faster to do this then go into the preferences window and do it from there.
We received some feedback on our colour scheme from a few people who suggested maybe we could investigate further into the chosen colour scheme. They were right the purple did look slightly crap with the orange and black colours we used with it. Currently we are using a background of orange with white body copy. Wen eed to experiment further with colour.
Martin has told me about a piece of temporarily free Adobe software in Beta called Adobe Edge Animate which apparently is a replacement of flash for animators in the HTML.
It makes complex Javascript effects easy to achieve for designers familiar with the After Effects workflow.
The elements shift within defined parameters responding to changes in browser window size.
It is still unclear if we are going to use this piece of software but something to consider.
Current website design:
We coded this with the intention of this page being after the initial landing page which features pur logo exploding off the page. I coded this but it isn't responsive currently. We are finding it hard to code the website with it being fully responsive and fluid.
Second page is pretty similar to the previous. Again we want the text to reformat when the page is resized. Currently it doesn't.
Although I have re-designed the layout we have not updated the coded website yet as it has been put on the back burner. We will continue coding the website once we have finished the navigational video. Although we will finish each task in this order we need to code the website before we can film the website in context on different devices with different resolutions.
Here you can see how the fluid design works. This is how it would appear on a mobile device. We still have some formatting to do and making sure everything is aligned properly.
The featured video page automatically resizes and tiles the videos when the dimensions of the page are changed. We will need to test the website on every device available.
Here is featured video page on a laptop.
Illustrations
Martin sent me the new illustrations and I began working hem into the layout I designed.
No comments:
Post a Comment