・Brief
The brief was to create a website landing page that would form the centrepiece of branding for the Trucksong novel. The site needed to promote the novel and the soundtrack, using the visual identity I created for the design of the book cover.
・Solution
I decided to use the landing page to take the user through some of the scenes in the novel, using a jQuery plugin called Parallax which provides a scrolling effect. I incorporated some important visual elements such as the Australian landscape and crow images. I also customised an HTML5 canvas animation so that it would appear as a flock of animated crows on the landing page.
I worked with the author to illustrate important elements of the story, displaying the visuals with three layers including background, a primary image element and text.
As the user scrolls down the page, they transition through four different parts of the novel, each with its own image element and teaser text from the story. When they arrive at the bottom of the page, they can click on the ‘top’ button, which takes them back through the animations and transitions as they return automatically to the top of the page.
I also integrated a music-player interface for the novel’s soundtrack, which was written by the author. This is linked to a Bandcamp page where the user can go to download the music.
The website features full responsive design, but due to usability and loading time issues with Parallax, I decided to create a different design for mobile devices using a creative solution to the problem. In the novel, the main character uses a handheld device to communicate with a truck. My idea was to create the mobile site so it would mimic the interface of this device, using only text inspired by old microcomputers because the influences for the novel came from 70s truck movies and 80s cyberpunk fiction.
As the main goal for the website is to sell the novel, I needed to create a landing page that would work on a wide range of browsers and devices. Older browsers such as IE 6/7/8 are supported via the mobile design.
I also created a download page for the extras, which include an alternative experimental version of the novel and previous short stories set in the same universe.
The site is an extremely successful marriage between contemporary web technology and the concept and visual identity of the novel.
I worked with the author to illustrate important elements of the story, displaying the visuals with three layers including background, a primary image element and text.
As the user scrolls down the page, they transition through four different parts of the novel, each with its own image element and teaser text from the story. When they arrive at the bottom of the page, they can click on the ‘top’ button, which takes them back through the animations and transitions as they return automatically to the top of the page.
I also integrated a music-player interface for the novel’s soundtrack, which was written by the author. This is linked to a Bandcamp page where the user can go to download the music.
The website features full responsive design, but due to usability and loading time issues with Parallax, I decided to create a different design for mobile devices using a creative solution to the problem. In the novel, the main character uses a handheld device to communicate with a truck. My idea was to create the mobile site so it would mimic the interface of this device, using only text inspired by old microcomputers because the influences for the novel came from 70s truck movies and 80s cyberpunk fiction.
As the main goal for the website is to sell the novel, I needed to create a landing page that would work on a wide range of browsers and devices. Older browsers such as IE 6/7/8 are supported via the mobile design.
I also created a download page for the extras, which include an alternative experimental version of the novel and previous short stories set in the same universe.
The site is an extremely successful marriage between contemporary web technology and the concept and visual identity of the novel.
