An Emergent Designer
Passionate, friendly, experienced Web Designer, fervidly devoted to design, coding, typography and exploration of the design cosmos. One bright point of light amongst a multitude of stars, I thirst for digital adventure and new horizons. Looking to the future, I use HTML5, CSS3 and the latest frameworks to shape new worlds, and discover paths to different places. palebluedot is about finding our coordinates in the universe, and the eternal call of the open road…
To celebrate the 90′s Ottawa band The Age of Faith’s 25th anniversary reunion, they decided to re-record some classic tracks and release them on the web, along with a much-needed launch of our digital back-catalog. It seemed like the perfect opportunity to depict this moment in type, so after some brainstorming and experimenting, I landed on portraying the band’s name and most well-known song titles as an audio waveform.
The assignment also entailed making 3 postcards and one collateral item, all of them being “in-family”. For the postcards, I decided to use the text-waveform background and feature one song per postcard, with a selection of lyrics from the song:
My class at Langara was approached with the exciting opportunity to come up with a poster to promote the City of Vancouver’s “Zero-Waste by 2020″ program. I was moved by the presentation, and especially the need for Vancouver to reduce its use of single-use, non-recyclable items, with coffee cups being one of the most prolific and high-profile, so I decided to focus on the coffee cup. After a few revisions, it dawned on me to portray Vancouver’s skyline as being made up out of discarded coffee cups. I had to experiment with creating custom brushes in Illustrator, and it was a pretty intense, time-consuming process to get the whole skyline filled, with a perspective effect. I’m happy with the result and hope I get to do more environmental work in the future!
When asked to choose a website that I felt needed a rethink, I felt that popular author Suzanne Collins’ site was a prime candidate. Despite being rich and successful beyond imagine, the author’s site was drab and uncompelling.
To start off with, below is a screencap of Ms Collins’ original site:
This site seems to have been put together by a single person, using an old copy of Dreamweaver. While I commend the DYI initiative, I can only imagine how many eager young visitors search in vain for a more modern, interesting and engrossing site. With this in mind, I set out to design a site that might appeal more to the author’s demographic and provide content that would encourage visitors to explore the site.
My first step: read the book.
The book is quite thrilling and engrossing—I can really see what all the fuss is about!—making the website’s drabness doubly confounding. To better design a site that conformed to the energy of the books, and the needs of her demographic, I came up with a “persona”; a common advertising strategy that involves creating fictional characters that represent the market for a product. In this case, the Hunger Games books and movies.
My persona was a 21-year-old bank teller named Elana.
She makes between $25-35k, is energetic and well-liked at work. She loves to tell her co-workers and friends about the latest book or movie she’s into, and tends to like fast-paced, modern books and movies, not into the classics so much. She lives with her boyfriend and their two cats. She usually parties once a week and likes to entertain friends. She is very loyal and passionate about her pursuits.
Now that I had my persona, I went about creating a wireframe of the site, thinking of how she might expect to see the content at her favourite author’s website.
I decided to stick with a rather conventional design, with a large header, a jumbotron media slider below that, and a 3-column grid below that, containing blog, social media and other activities for visitors to enjoy.
With the book, the market—and even some of the branding for the films—in mind, I set about culling images and textures that evoked the feelings of reading the books, their content and message. I extracted a colour palette from from the moodboard and proceeded with branding and mockups.
Since the original site did not seem to have any branding, I took it upon myself to brainstorm a brand for Ms Collins, settling on the iconography of the quill as a symbol for an author, with a hexagon representing the many sides of writing.
From here, I moved on to mocking up the site.
Below is an early mockup for the site. While it is similar to the end product, after some feedback from peers, I pulled the lavender colour from the site, feeling as it was one colour too many, and led to a confused palette. I decided to incorporate a large image of the quill in the background to lead the viewer’s eye through the content, solidify the new branding, and it is also reminiscent of the firey imagery used in the Hunger Games’ branding.
Cutting and Coding
My goal was to use as much CSS as possible and avoid heavy image use, so I cut out only the image sections I needed, and using Sublime Text, I hand-coded the website to look exactly like my final mockup. The results can be seen below.