Designing an idea

Creating useful work that is purely conceptual

Designers often have a tough time showing work that they really consider “of the moment” or even of their highest potential. Production timelines are long, clients often have previously unforeseen business requirements to satisfy, and development issues arise that require ad-hoc solutions. Over the years I’ve waited for many launch dates that have been pushed, and looked on enviously as colleagues and competitors have celebrated the release of various labors of love.

So how can designers stay relevant, both in terms of their portfolio and their activity within the design community? Enter the personal project. These are nothing new within the design community. Various colleagues of mine including Anton Repponen and Tobias Van Schneider are outspoken and quite prolific in creating work outside their normal day-to-day. But what sets them apart and what I strive to do is communicate a way of thinking. The design is then the vehicle to communicate that idea–and it should be excellent too.

The piece to remember is that a project like this should be more than just layout. There are thousands of Pinterest entries for web design that look beautiful, but show nothing more than that the designer knows how to use grids and type. I kill myself over pushing to create something new and different that works so much harder than visual flair.

Coming up with the idea

The obvious first step was figuring out what I wanted to explore. I wanted something that has been explored, but is heavily locked down because of regulations or marketing rules. Automotive fits right into that category, and what better brand to choose to “zag” with than Tesla. They are creating cutting-edge vehicles, so why not use them as a platform for re-thinking the automotive web experience.

The Framework

Once the content is selected I move into sketching a framework. This will be the interaction model that hopefully innovates and differentiates this project from all the other layouts that exist online. This is where I ask all the questions, such as “What is the story I’m trying to tell?” then “How will that inform the way the user navigates?” All of these questions are answered with sketches — not of a final layout, but instead where elements might go and what they’ll contain.

As I explored how to navigate the experience I kept thinking about the range of emotions a Tesla driver might experience from the moment a charge is complete to the moment he must roll back into a charging station. It must be a roller coaster! One moment your life is full of possibility, then as you drive you realize the planning required to be sure you make it to the next outlet within your available range. I was struck that this single journey could tell the entire story of the vehicle, and a phrase kept popping into my head.

What is the life of a single charge?

Using this approach I broke out each section I wanted to cover into a plain english phrase that communicated a driver’s emotion in relation to his vehicle’s available charge. In this case, the journey started with a full charge at the dealership, and ended with the driver planning his next trip.

Setting up the grid and visual style

Once a framework is chosen, it is necessary to determine how the piece is actually going to look. For me, I often have an idea of this when I’m first selecting the topic of the project. Not only do I want to explore a certain subject, but a different style as well.

Tesla was inspired by the duality of the heritage of the automobile industry and the introduction of brand new technology, so I wanted a web layout that looked like a printed piece of collateral. I highly recommend you study Grid Systems in Graphic Design by Josef Müller-Brockmann if you haven’t read it. I breezed through it in a weekend and it’s made a huge difference in the way I define grids. Of course as is the case with any guideline, the moment you digest it is the moment you should start working to break it.

“Picnic blanket” Anton’s 20px standard grid
Navigation is added and excluded from content grid
“Print-like” modular grid is then added

Once I started laying content into the page I was conscious of using full-bleed imagery or type that sat in the same place on each layout. An adequate amount of white space was key to the mood I was working to create, and I worked endlessly to create a proper rhythm for the eye as it scanned down the page.

To be honest, I don’t think I consulted any of my “web design” inspiration stockpile for this project, instead opting for collected examples of printed matter.

I love that books and magazines give designers full freedom to put elements on the page wherever they choose, without the worry of whether the final product will actually allow it.

In reality, a double-page spread is very similar to a single browser frame: The viewer is focused on a single, horizontally proportioned area until he decides he’s ready to move on.

I take this layout approach to every project I work on. I don’t really consider webpages long, singular experiences, but instead a series of frames that dissect the overall story into manageable bites. Here is what my PSD looks like as I work through the design.

Create intriguing layouts

This is a design exercise after all and in addition to demonstrating new ideas personal projects should really be explorations in creating work that is unique, different, and potentially outside the realm of what a client might willingly approve.

Landing marquee with minimal text, giving the impression of the vehicle in a showroom
Individual features are called out separate from the context of the vehicle

Uniformity was the enemy of this project, there were no templates developed to standardize the content. Instead I used the grid to maintain sizing and treated each section as a blank canvas.

Some standard elements were used, such as this tab bar for driving characteristics
A “screenshot” of the Tesla dashboard software which I recreated by hand
The charging layout which was purposely designed to look full of content in order to convey a high level of choice

Tie back to the concept

When working through layout issues it’s often easy to lose sight of the big picture concept that you came up with in the first place. Believe me, I feel a great sense of relief when I can find the right placement for all my content, but I’ve also learned to continuously ask how my decisions relate back to the big idea that anchors the whole piece.

In this case, staying true to my conceptual approach meant making sure that the content in each section related directly to my predetermined theme, and made sense that the driver would be considering it at that stage of his vehicle’s charge.

As an added bonus I designed the loader to replicate charging the battery (duh!) and eliminated any other elements in an attempt to cleanse the viewer’s pallet. My reasoning there was that he would be experiencing something new and therefore needed to eliminate other distractions.

The loading sequence and ultimately the navigation indicate the level of charge as it relates to the page content

Create ownership through detail

I firmly believe that each project needs at least one element that makes it feel “branded” or unique — such that it feels as though it could only work for that one client. I advocate strongly for designers to create their own iconography and this project was no different.

Every icon was created uniquely for this project and this project only, demonstrating not only attention to detail, but a level of effort above and beyond what might typically be accepted as necessary.

Maintain proper workflow habits

Just because this is your project doesn’t mean it’s a time to get sloppy. I’ve worked with a number of designers over the years who seem to covet their own personalized methods of organization. In reality it seems to be a protective counter measure ensuring that they can’t be let-go.

If they can’t decipher my file structure they can’t get rid of me!
(Kidding. Kind of. Maybe?)

Cleanliness is godliness in my book and it absolutely applies to your own work. Why not treat yourself with the same respect you do to others at work. Even better, it’s easier to find files when it’s time to once again update your portfolio.

People who design with me know that I am a huge opponent of Photoshop’s Layer Comps. This sentiment probably warrants a post of its own, but in short I feel that they have unwittingly created a class of lazy designers who feel no need to organize their files.

Even though this is a personal piece of work, I have developed a habit of working against the possibility that my file might be handed off to another designer at any point and therefore must be neatly organized into meaningful groupings and properly labeled.

This way, there is no possibility that the file will get “out of whack” and there is no need for even myself to remember where elements are located. It would be very easy for me to open this file months from now and be able to quickly make changes to it without having to get acquainted with it all over again.

You can also see here that I organize all key layouts into a single PSD when I start a project in order to create the proper visual flow from one layout to the next. As pages get increasingly complex I’ll break them out into their own files to maintain a speedy workflow.

Finally, enjoy yourself

I know this is a cliché, but it’s absolutely worth speaking to. Design is a rewarding career, however, it’s still a client services industry. A designer will lose as many battles that he wins while trying to push his ideas through, that’s simply the nature of the business.

Personal projects such as this one should be done to create enjoyment. They’re out of the realm of business needs, brand standards, and in many cases rational thought. It’s important to keep this perspective despite the obvious tendency to stress about creating unique work.

The best advice I can give is to set an aggressive though realistic deadline so that the project stays fresh, lean, and as lighthearted as possible. This way, you’ll enjoy the journey as much as the end result.

Thanks for reading, I hope this was insightful!

If you’d like to see the design-focused case study for this project you can check it out either on my Behance site or my portfolio site.

Published in Startups, Wanderlust, and Life Hacking