BEHIND THE SCENES

THE PROCESS OF MAKING THIS WEBSITE

Why Make a "Behind the Scenes"?

I believe in the story behind the story. As an avid fan of movies in general, I’ve come to appreciate the wealth of special featurettes that give people an inside look at the thinking and effort that goes into putting together such an experience. It’s with this mindset that I sought to create a page which would give people a glimpse into the process and design considerations behind creating this website. So while it’s been condensed a bit, I do hope you enjoy this brief look behind the scenes.

Design Mocks

After having a good sense of the layout from the various wireframe prototypes and with style guidelines in hand I dove face first into creating design mocks for the various pages of the site. This stage would help immensely to inform the development of the site in creating reusable blocks and consistent design aesthetics throughout the site. The process also allowed me to think strategically about the types of assets I would want to display, be they images or videos and how I would want to display them.

Coding

Coding for the site was completed using Skeleton as a boilerplate coupled with Sass CSS preprocessing to keep the code as efficient and orderly as possible, and to make sure that the code was optimized for responsive development. The grid was modified to a sixteen column layout and a 1200px layout was added for more optimal viewing on larger screens. jQuery was utilized for interactivity, resizing and for parallax on several site components.

Frequent User Testing

As coding for various portions of the site was completed, I made sure to continuously get some user testing in to make sure the various components conveyed their message in a clear and effective manner. Various animations and transitions were also adjusted to make sure they weren’t too distracting or overwhelming. Additionally, this process is what lead to the modification of the homepage from what you see in the wireframe prototype above to what the current homepage looks like now.

Adding Dashes of Personality

Overlooking the Style

This section is the last component of the page, but certainly not the least. Adding touches of my own personality in all aspects of this site, be it through this page, the videos, the copy or even the 404 page was something I strived to do throughout the design and development process. The projects and work history do their job to describe my work ethic, but these small human snippets littered around the site help convey the kind of person I am and I feel that that’s just as important. Plus it gives a reason to include a video with lasers. Win win.

Next Project
Yokohama Tires Canada
Website Redesign and Launch