2550 Stephens St.
Vancouver, BC  Canada V6K 4K4
+1 604 565 0382
info@studiofaculty.com
M–F / 900am–500pm
2014

Make Directory

Branding / Website Design / Application
www.makedirectory.co

BACKGROUND

We first met Sheila Lam of Make Directory at a nearby coffee shop, a block from our first studio space. Just as she does now, Sheila travels a lot and just came back from a recent trip with much inspiration and energy. Yet as we talked over coffee, it became clearer and clearer that Sheila’s perspective of travel and location was quite unique. Sheila was interested in a person’s choice spots in the city and how these selections defined the city for the individual. This was how Make Directory began.

 

DISCOVERY

At the time that we started working together, Sheila was working for a Hackers Conference. Perhaps it would be a slight influence from the tech world when she presented to us the idea of calling her brand “Make Directory”. In programming, the make directory (mkdir) command was script language to make a new directory. The name also proved to be appropriate for her objective in making directories of places, experiences, and local spots. Our shared vision for the platform to be a more minimalistic, edgy, and stark presentation of travel made it an effortless collaboration.

Faculty-MKDIR-introduction-1w

MKDIR Brand Identity

Background photo credit: Make Directory

Faculty-MKDIR-about-3w Faculty-MKDIR-about-2w

Through interviews, words, photography, and short films, makedirectory.co invites the first step in exploring a city from the people who know it best.

left: Photo excerpt from interview with Luke Beard in San Francisco.
top right: Photo excerpt from interview with Aimee Laurel in Toronto.
bottom right: Photo excerpt from interview with Jayne Min in Los Angeles.

DESIGN

In our design process of the brand identity, we focused back on the two themes—travel and code. A common method we use occasionally is to identify a list of visual cues from our themes and study them in conjunction with one another. This was the case for MKDIR as we drew inspiration from passport stamps and short forms of code. Though the references are not apparent to outside observers, the mark for Make Directory would be comprised of the option code “-m” and a basic circle ring of a circular stamp. As for the wordmark, the full name “Make Directory” would always be presented in the short form “MKDIR” to make the connection to code more clear. For the wordmark, we developed custom letterforms for the uppercase sans serif in MKDIR. This simply allowed us to have greater control the weight of the letterforms, the right sensibilities of the type and the right width and height of the characters.

Faculty-MKDIR-brand-colour-1w Faculty-MKDIR-brand-typeface-1w

Brand Colour and Typography

Faculty-MKDIR-logo-design-process-1w

Branding Process

Our aim was to create a custom typeface for the wordmark which embodied a polished rigidity to its appearance.

Faculty-MKDIR-logo-design-process-2w

Brand Process

A secondary mark/symbol was created for the brand. The circle format is inspired by stamps from travelling.

Faculty-MKDIR-logo-design-process-3w

Brand Process

Make Directory is a command key and – M is the permissions of directories.

Faculty-MKDIR-letterhead-design-1w

Secondary Mark and Letterhead Design

The finished secondary mark is the combination of the circle and – M graphic.

Faculty-MKDIR-business-card-design-1w

Business Card Design

The dash ultimately takes form into a line graphic used in the business card design.

WEBSITE

Going into designing the website, we wanted to present the same unconventional presentation of travel stories. Together with Sheila, our first step was to cultivate a sitemap that helped organize and clarify the content needed on the website. In the end, we divided the content and site navigation into three main categories: interviews, directories and film. Continuing from the brand direction, the website used a simple and rigid design typeface called Source Sans Pro. A uniform use of white space, a grid system and font size treatment allowed for a more pleasant online reading experience. For viewers who want to explore the city through photos only, the interview page has the option of hiding the article essay. At the end of each interview, a handwritten questionnaire can be found.

Faculty-MKDIR-website-design-7w

makedirectory.co Homepage Design

The homepage features a large image area to display the featured article as well as a white stripe with the MKDIR logo in the centred.

Faculty-MKDIR-website-design-8w

makedirectory.co Homepage Design

Featured quick links are also accessible from the homepage.

Faculty-MKDIR-website-design-4w

makedirectory.co Directory Page

A simple grid layout with city names are displayed in the Directory page. A thumbnail image appears when viewer mouseovers each city.

Faculty-MKDIR-website-design-6w

makedirectory.co Website Overview

Consistency of image sizes, grid system, type and colour treatment were considered.

Faculty-MKDIR-website-design-5w

makedirectory.co Mobile Responsive Layouts

Faculty-MKDIR-interview-form-design-2wFaculty-MKDIR-interview-form-design-3w

makedirectory.co Interview Form Design

Each interviewee receives an interview form in which answers are written by pen or pencil.