Location: http://www.legendofdrew.com/brian/
Friends need to look after friends, right? It’s what friends do. My friend Brian is a pretty cool guy, but sometimes, he can be quite stubborn – he has refused to play Legend of Zelda: Ocarina of Time almost non-stop for the last 9 months. Seeing a fun opportunity, I made Brian Should OoT – a chance to persuade him in the form of a CSS poster.
A Bit of Background
Legend of Zelda: Ocarina of Time, also known as OoT, is a game released for the Nintendo 64 in 1998. Since then, it’s been re-released on GameCube, Wii, and will be released on the Nintendo 3DS. Ocarina of Time is a classic story of good and evil, with quests, magical worlds, beautiful music, and time travel. It is widely considered to be the greatest video game of all time – in this compilation of top 10 video game lists, Ocarina of Time is on the most lists – 32 out of 43 (74%).
Brian is an introvert, just like me, spending lots of time with video games and computers. Plus, he’s already played Legend of Zelda: Twilight Princess (which is a newer game in the Legend of Zelda series), so it’s only natural that he should play Ocarina of Time. About 9 months ago at his birthday party, another friend of ours gave him Ocarina of Time, which we forced him to play that night. Since then, he’s only played it on his own once. Here’s where my web design shenanigans come into play.
Behind the Scenes
Fueled by my love of video games and web design, inspired by the Lost World’s Fairs, I had tons of fun on this experiment. Ever since I started it, I knew I wanted a poster with a beautiful landscape and giant typography. I also knew I wanted it to be made with HTML, CSS, and other new technologies – just like the Lost World’s Fairs. I started out sketching on paper and moved to designing in the browser – my preferred method. Let’s take a look through my process.
First, let’s look at the video game elements. The sky and the ground below are from Hyrule Field – the iconic center of Ocarina of Time. I also knew I wanted to use the owl Kaepora Gaebora – he has all sorts of wise words. But, beyond that, I needed a few brainstorming sessions to come up with the rest.
When coding, I focused on clean markup and threw old browser compatibility to the wind. Because this is an experiment, I went crazy with web fonts and other HTML5/CSS3-era technologies. Also, two hat-tips are due – one to Nicolas Gallagher for his pure CSS speech bubbles, and the other to Chris Coyier for his full page background image.
Left: the original logo. Right: its CSS adaption.
Next, let’s look at typography. I knew from the start that I wanted the ever-amazing League Gothic at giant sizes to give it that poster feel. For the logo recreation above, I used the fonts Triforce and Charlemagne from here – both are the same fonts (or recreations) used in the original logo. I wasn’t as lucky with the body text (for the speech bubbles), though. I found out that the font used for in-game dialog is Chiaro, but the site’s in Japanese. I have no idea how to obtain the font, nor if it’s legally web-font available. Sadly, I just stuck with Arial for everything else.
My poster isn’t perfect; I could spend hours and hours making the images better quality or trying to acquire Chiaro. But, it served its purpose as an experiment well. It let me dabble with web fonts, research aspects of Ocarina of Time, and design a poster site – quite different from designing a normal website. My only hope is that Brian will enjoy playing Ocarina of Time as much as I enjoyed making this.
