Yoki Sounds Like...


In March 2014, I was commissioned to create a website that would act as a digital flyer for the artist Yoki. The aim of the website was to give the artist an online presence and also raise awareness of the upcoming release of his debut EP, Runaway. This project commenced March 2014, and completed April 2014.

The Brief

To create a website that would act as a digital presence for the artist, Yoki. The site must be simple, relevant and appealing to the artist's target audience. The site should focus on the upcoming debut EP release of Yoki.

The Role

I designed & developed the website along with the 'Yoki' emblem featured as the hero of the page.

The Technology Stack

HTML5, LESS CSS, JQuery, Bootstrap Framework, Grunt task-runner and the Bower Package Manager.

The Software

Adobe Photoshop CS6, Adobe Illustrator CS6, Sublime Text 3, Mac OS X Terminal

The Colour Palette


The Design

I worked on this project as part of a small creative team. The team included an illustrator and a Graphic Designer. The Graphic Designer was taking care of the print design and the album cover, and I was taking care of the digital design. The illustrator worked between us both and provided some amazing illustrations. His work can be seen in the form of the 'Yoki heads' at the top of the 'About' section of the page.

My first step in this project was to speak to the client and find out exactly what sort of thing he had in mind for the site. I also listened to a lot of his music to get a feeling for who his audience might be, and what might appeal to them. Once I had some ideas for styles, I spoke to the team involved with the project and looked through everything they had produced so far. I looked through some of the amazing work produced by the illustrator and also the album cover designs produced by the Graphic Designer.

I decided to go for a design that had strong links to Yoki's home, California. At this point I began sketching and getting as many ideas and key-words down onto paper as I could. One thing I had decided early on was that this should be a single page app. There were two reasons for this; firstly, there wan't enough content to warrant multiple pages, and two, there wasn't enough time for me to create anything too complex.

When I first started on this site in March, parallax scrolling was still a relatively new idea on the web and I was eager to use it in a project as soon I could. The first idea I came up with was to use illustrations of a forest to build up layers from which Yoki would emerge as the user scrolled. Here are some of my very early design concepts (before I abandoned them).

This design featured a multi-layered hero that created a sense of depth when scrolled. As the user scrolled down the page, a small figure, Yoki would emerge on the horizon. Below the hero there is also a custom audio player. Unfortunately, I didn't have nearly enough time to create anything as complex as this.

After working through a few iterations of this style, I eventually decided it was to clean and too styled. It needed to be a lot more personal and relevant to the client and the client's needs. As a result I scrapped what I had and went back to the drawing board. From here I struggled to come up with a design I was happy with.

After a lot of trial and error, I took a break and decided to try something different, I decided to try creating a little brand for Yoki, a classic label. In no time at all I had come up with this.

Once I had found this new path, the rest of the page came easily. I sent the brand to the client, who was very happy with the design, and so from here I produced the final page design. Using the Bootstrap framework, the site was designed to be built upon a 12 column grid, allow the site to respond from a desktop viewport to a portrait phone viewport.

The site received a Google PageSpeed insights UX score of 96 / 100, only losing points on the sizing of tap targets in the Twitter and SoundCloud embeds. Without which, the site would have received close to a perfect score.

The Development

The vast majority of this site was simple HTML5 and CSS3. Fortunately, I didn't have to support any browsers older than IE8 on this project, meaning I could implement a lot of features using simple vendor-prefixed CSS3 as opposed to using endless JQuery for backwards compatibility.

The first interesting part of this website is the parallax scrolling featured at the top of the page. Parallax is a displacement in the apparent position of an object. Simply put, when your viewpoint is moving, objects that are closest to you will appear to move at a higher rate than objects that are further away from you. This translates to the web as having elements move at different rates relative to one another. In this case, the Yoki brand moves at a different pace to the background image.

The parallax effect itself is a very simple JQuery function that is bound to the browser's scroll handler. Inside the function, the current scroll position relative to the top of the browser window is stored in a variable, scrolledY. The Yoki brand and the background image are then adjusted by different multiples of scrolledY, to give the different scroll rates.

$(document).ready(function(){ $(window).bind('scroll',function(e){ parallaxScroll(); }); function parallaxScroll(){ var scrolledY = $(window).scrollTop(); $('.header_bg').css('background-position','center -'+((scrolledY*0.7))+'px'); $('.header_brand').css('top','-'+((scrolledY*0.2))+'px'); } });

For my purposes, this script worked perfectly. Generally, it is not a good idea to attach function to a browser's scroll handler as it constantly updates with the user's scrolling and can lead to lag. Howver, this is fairly light-weight and cause no problems. One issue I did find, however is that iOS devices handle scroll in a strange way. As opposed to constantly updating the scroll handler, iOS devices tend to wait for the user to stop scrolling before updating the browser window. The effect of this is that the user will not see any scroll until the scroll has fully stopped. To get around this inconvenience, I decided to use a media query, that, at a width of 500px, would change the display property of the element and disable the parallax effect. Unfortunately, at the time of writing this website, I didn't own an iPad and so the site will suffer from this effect on iPads.

The next most interesting (or painful) parts of the site were the embedded SoundCloud and Twitter widgets. At the top of the page, there is a simple JQuery tab that pulls down a SoundCloud playlist, which was Yoki's EP. This was relatively straight forward, except for the fact that I wanted to style and customise the player, which I found incredibly difficult. This was the same for the Twitter widget, although that was a little more forgiving.

My favourite part of the site is probably the 'About' section where the two different Yoki heads are featured. These were created by the incredibly talented illustrator. I put the illustrations into Photoshop and made these two versions. They were then applied to the Boostrap grid to be responsive. I just think they create a really cool feature with Yoki's name overlayed on the top of them.