HARLAN FROST
PORTFOLIO
Hello.
Here is a collection of my work that I have developed, designed, and arranged together. This body of work is a representation of the type of work that I am drawn to, as well as an example of what I am capable of creating. I am most attracted to simple, clean, design accompanied by atmospheric, thought-provoking imagery. I tend to think about things on a level that reaches far below the surface, and I strive to show that in my work.
CONTENTS
Blockface Type Design
Club Deluxe Branding
/ 03
/ 15
Dutchman Poster Design
/ 27
/ 55
Mary & Max Web Design
/ 65
Editorial
/ 75
Urban Post / 35
Sitting Bull Branding
Branding
Urban Grid
Dubliners Editorial
Sustainable SF State
/ 45
Research & Development
/ 85
Type Design
Blockface / Blockface is a typeface developed to represent the San Francisco neighborhood, Parkmerced. Blockface is a font designed to work at various sizes, mostly display, and invoke a feeling of the neighborhood when seen or used.
Process
Product
In-World
Design Inspiration & Ideation
Portfolio | Blockface
Blockface is inspired by the Parkmerced neighborhood and reflects various characteristics found within the geographical space. Similar to Parkmerced, Blockface exhibits a similar, constructed appearance, representative of the analogous architecture found throughout the neighborhood. I was inspired by three-dimensional letters, representative of the built, assembled environment found within the neighborhood.
05
Process
Product
In-World
Angled Corners
Design Elements When creating this typeface, it was my intention to reflect the assembled, inorganic, repetitive atmosphere of the Parkmerced neighborhood. I demonstrated this concept by creating tall, thin, similarly constructed letters that each retain a third dimension. In order to exhibit the strange quality of the neighborhood, I designed an unconventional crossbar for various letters, providing an aesthetic that feels both curious and unfamiliar. Similarly to the neighborhood, when viewing this typeface from a far distance (an outside perspective) it appears a certain way, but when viewed up close (internally) it presents the audience with an alternate understanding.
Detached Crossbar
Skills:
The detached crossbar is employed to letters whose stems connect on either side, such as A, B, R. Letters without connecting stems (E, F, K) don’t utilize this style of crossbar.
Portfolio | Blockface
Illustrator Glyphs
07
The angled corners are only applied to some of the characters within the complete alphabet. This purpose is to create a bit of difference when viewing the letters together, adding to the strange element of the entire typeface.
Third Dimension The third dimension represents the constructed, built, assembled environment of Parkmerced. The characteristics highlight the unique qualities of the design.
The character set displays each letter of the alphabet in the final typeface design.
ABCDEFG HIJKLMN OPQRSTU VWXYZ
Character Development
Portfolio | Blockface
The character development began as a simple, thin stroke with a soft, curved apex. The original design approach was to make the shape simple and direct.
09
The third dimension was quickly added to the design of the character set. This additional dimension works to demonstrates the inorganic quality of the typeface.
The characters kept their cur ved apex when the third dimension was added but the height of the letter grew taller and the width became more condensed.
The characters were eventually constructed with more symmetry in mind. The precise edges were a means of reflecting the built atmosphere of the neighborhood, with explicit boundaries and structure.
Once the fundamental foundation of the letter was decided upon, I chose to disconnect the crossbar on a variety of letters with the intention of bringing a uniqueness to the typeface that reflects characteristics of the neighborhood.
The typeface was designed so the letters appear similarly and all retain a related structure. When placed in close proximity, they fit together with ease.
BLOCKFACE
Branding
Club Deluxe / Club Deluxe is a rebrand of a long-time business establishment, developed through an identity system that represents the tone of the venue, using a comprehensive graphic language. I chose to rebrand this jazz venue on Haight Street in San Francisco due to its swanky, inviting appeal. Various research methods were implemented in order to fully understand the history, demographics, and overall atmosphere of the establishment. Brand guidelines and a logo were designed to graphically represent the business.
Process
Product
In-World
Design Inspiration & Ideation The inspiration for this project came from various posters and venues that exhibited jazz and a swanky nightclub feel. The contrasting colors seen in the inspiration photos is reflected throughout the final design.
Portfolio | Club Deluxe
Many logo iterations were made before arriving at the final design. It was my intention throughout the process to keep the type classy and sophisticated, appropriate for the vintage interior of the space.
17
06
Process
Product
In-World
Design Elements The elements used in creating this identity worked together to set the tone for a place whose appearance reflected that of decades past. Deco-influenced typography with modern colors can be seen throughout the final design.
Skills:
Portfolio | Club Deluxe
Photoshop Illustrator InDesign
21
255/255/255 0/0/0/0
0/0/0 0/0/0/100
205/173/90 21/29/77/0
Blake ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Gill Sans SemiBold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
CLUB DELUXE Primary Logo
CLUB DELUXE Alternate Logos
Portfolio | Club Deluxe
Process
23
Product
In-World
Vinyl Record Design
Business Card Front
Business Card Back
All of the objects associated with Club Deluxe reflect the graphic elements present in the rebrand. The visual language is consistent and exhibits an intriguing, classy appearance like the venue itself.
Menu Cover Design
Portfolio | Club Deluxe
Process
25
Product
In-World
Poster Design
Dutchman / Dutchman is a poster designed for the film Dutchman by Anthony Harvey, that graphically expresses my interpretation of the movie. It was my intention to successfully translate the characters, metaphors, and racial dynamics present throughout the film within my design. I wanted to utilize all of the elements within the film, including the story, cinematography, and the particular time in history.
Process
Product
In-World
Design Ideation & Iterations
Portfolio | Dutchman
I began this project by making a list of words that I felt reflected the film. Rhythm, camouflage, morphed, tension, and revolt were a few of the words from the generated list. From this list I began sketching and manipulating paper in a three-dimensional space. From these 3D iterations I arrived at my final design.
29
Be cool. Be cool. Thatʼs all you know...Shaking that wildroot cream oil on your knotty head, jackets buttoning up to your chin, so full of white manʼs words. Christ. God. Get up and at these people.
SCREAM
A film adaptation of the play Dutchman by LeRoi Jones A film by Anthony Harvey
Shirley Knight Al Freeman
A film adaptation of the play Dutchman by LeRoi Jones
Directed by Anthony Harvey
Shirley Knight
A film by Anthony Harvey
DUTCHMAN
a film adaptation of the play Dutchman by LeRoi Jones
Al Freeman
Process
Product
In-World
Design Elements The elements used in designing this poster are reflective of the film, arranged in a way which exhibits the struggle, tension and manipulation expressed by the characters throughout the story.
Skills:
Portfolio | Dutchman
Photoshop Illustrator
33
252/243/235
135/2/0
0/4/6/0
28/100/100/34
0/0/0 0/0/0/100
Futura Condensed ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Garamond Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789
The final poster design evokes many of the characteristics and elements as seen within the film. The typography is rough and the color is dark to signify struggle and hardship. The conveyor belt appearance is reflective of the cycle of racism present within the story.
Editorial
Dubliners / Dubliners is a reinterpreted design of the layout for James Joyce’s novel, Dubliners. My design decisions were informed by my understanding of the content and story, as well as other works written by James Joyce.
DUBLIN ERS
Process
Product
In-World
Design Inspiration & Ideation
Portfolio | Dubliners
I wanted to apply a more modern feel to this text (written in 1914), while being sure to captivate and hold the attention of the reader. I wanted to suggest a contemplative state, allowing a chance for the reader to reflect throughout the story. These intentions can be seen within the final design. I began by exploring other works that exhibited a contemporary aesthetic and created my concepts based on my discoveries and influences.
37
A selection of work from James Joyce’s
DUBLIN SRE
DUBLIN DUBLIN SRE SRE
Dubliners
DUBLINERS selection a
of
stories
a selection of short stories by James Joyce
DUB LIN ERS
from
James Joyce
A Selection of Work
Dubliners a selection of short stories
Process
Product
In-World
Design Elements I chose to use a strict grid throughout the design of the book, only breaking it with imagery (sourced from Uta Barth) and some text, in order to represent the disruption of daily life present in the story. Gill Sans was chosen to provide a clean, contemporary aesthetic, while Letter Gothic was used to represent times past, as well as the monotonous tone of routine experience.
Skills: Photoshop InDesign
225/225/225
165/165/165
214/198/182
0/0/0/0
38/30/31/0
16/20/26/0
Portfolio | Dubliners
Letter Gothic Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
39
1234567890 Gill Sans Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789
Portfolio | Dubliners
Process
41
Product
In-World
Chapter Opener
When creating pull quotes, my intent was to allow the reader to pause and reflect (with the use of large imagery and white space), just as the characters did throughout the stories.
“Her time was running out but she continued to sit by the window, leaning her head against the window curtain, inhaling the odour of dusty cretonne.�
43
Portfolio | Dubliners
Interior Spreads
Branding
Sitting Bull / Sitting Bull is a branding project inspired by the life and politics of this specific activist. I designed a special edition box set that is influenced by the traits, beliefs, and history of the activist. The designed box set includes a poster, book, DVD, vessel, and movie trailer, all of which commemorates the chosen activist, Sitting Bull.
Process
Product
In-World
Design Ideation & Iterations
Portfolio | Sitting Bull
I began this project by sketching, visiting museums, speaking with experts, and looking into my own family history, when forming the design for my chosen activist, Sitting Bull. I knew that the graphic language had to be powerful and loud when communicating the attributes of this individual.
47
Process
Product
In-World
Design Elements The elements used in designing this box set are reflective of Sitting Bull’s existence, exhibiting his connection to the buffalo and the many hardships he faced. The overall color resembles the earth as well as his various struggles and challenges.
Skills:
Portfolio | Sitting Bull
Photoshop Illustrator InDesign Photography
49
153/51/54 27/90/78/22
0/0/0 0/0/0/100
165/146/125 36/39/51/03
Cochin ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Courier ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789
The final poster design evokes many of the characteristics and challenges that Sitting Bull faced, and can be seen within the distorted typography, distressed color palette, as well as the skewed shapes and placement.
Portfolio | Sitting Bull
Process
51
Product
In-World
Primary Book Cover
An alternate cover was created so that the reader could choose to wear it anonymously, similar to Sitting Bull’s early existence and life experiences.
Book Interior
Following Page: Additional example of book interior.
9. THE LAST BUFFALO STANDING Sacred A Hunkpapa Lakota chief and holy man under whom the Lakota tribes united in their struggle for survival on the northern plains, Sitting Bull remained defiant toward American military power and contemptuous of American promises to the end. Born around 1831 on the Grand River in present-day South Dakota, at a place the Lakota called “Many Caches” for the number of food storage pits they had dug there, Sitting Bull was given the name Tatanka-Iyotanka, which describes a buffalo bull sitting intractably on its haunches. It was a name he would live up to throughout histribes life. united in their struggle for survival A Hunkpapa Lakota chief and holy man under whom the Lakota on the northern plains, Sitting Bull remained defiant toward American military power and contemptuous of Born around 1831 on the Grand River in present-day American promises to the end. South Dakota, at a place the Lakota called “Many Caches” for the number of food storage pits they had dug there, Sitting Bull was given the name Tatanka-Iyotanka, a buffalo bull the sitting A Hunkpapa Lakotawhich chiefdescribes and holy man under whom Lakota tribes intractably on its haunches. It was a name he would plains, united in their struggle for survival on the northern live Bull up toremained throughout his toward life. American military power and Sitting defiant contemptuous of American promises to the end. Born around 1831 on the Grand River in present-day South Dakota, at a place the Lakota called “Many Caches” for the number of food storage pits they had dug there, was given the name Tatanka-Iyotanka, which describes a buffalo bull sitting intractably on its haunches. It was a name he would live up to throughout his life. 100
A Hunkpapa Lakota chief and holy man under whom the Lakota tribes united in their struggle for survival on the northern plains, Sitting Bull remained defiant
contemptuous of American promises to the end. toward American military power and
Existence Resisted
Born around 1831 on the Grand River in present-day South Dakota, at a place the Lakota called “Many Caches” for the number of food storage pits they had dug there, Sitting Bull was The Last Buffalo Standing given the name Tatanka-Iyotanka, which describes a buffalo bull sitting intracta-
Branding
Sustainable SF State / Sustainable SF State is a redesign of the visual identity system for the Sustainable SF State organization located on the school campus. The identity system is cohesive, easily read and understood by a large audience, as it is meant to be displayed throughout campus on a variety of waste bin surfaces.
Process
Product
In-World
Design Ideation & Iterations
Portfolio | Sustainable SF
The concept for this project was inspired by simple, friendly icons. The simplicity of the design allows the user to easily understand the meaning that is communicated. A small group collaborated on the creation of this project, each member contributing different elements of the final project. I have chosen to exhibit my personal attributes to the project, which include a logo as well as various icons.
57
Process
Product
In-World
Design Elements The design contains various elements that work together to make a simple, inviting system. The color palette is light and reflects hues related to energy and the surrounding environment. This typeface was chosen because of its rounded corners and playful aesthetic.
Skills:
Portfolio | Sustainable SF
Illustrator
61
240/233/43
170/223/238
0/0/0
9/0/93/0
31/0/05/0
0/0/0/100
Quicksand Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Quicksand Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789
Primary Logo
Alternate Logos
Portfolio | Sustainable SF
Process
63
Product In-World
Web Design
Mary & Max / Mary & Max is a UI design for the re-release of the film Mary & Max. The intention of the website and mobile app is to excite audiences for the fictional re-release of the film, as well as provide information about the film’s content and its making.
.. Loading...
Process
Product
In-World
Design Inspiration & Ideation
Portfolio | Mary & Max
Throughout the website and app I chose to highlight the beautiful claymation present in the film. I drew inspiration from other films whose artistry I considered visually appealing, as well as websites that had playful, exciting, interactive interfaces. I chose to design the site and app in a clean, straightforward way, making sure to provide the user with a unique and memorable experience.
67
Loading Page
Home Page
Cast Page
Media Page
Fact Page
Contact Page
Process
Product
In-World
Design Elements The overall layout is based on a symmetrical grid as to keep the design simple and highlight the imagery in the film. The color palette reflects the hues used throughout the film, exhibiting a gothic/ noir aesthetic, with the addition of a bright accent color. The chosen typefaces reflect youthful handwriting as well as typewriter characters, both of which are present within the film.
Skills:
Portfolio | Mary & Max
Photoshop Illustrator
69
225/225/225
206/83/62
78/77/77
0/0/0/0
14/81/82/3
65/58/57/57
Courier New ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Cuddlebugs ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789
App Icon
Home Page
Portfolio | Mary & Max
Process
71
Product
In-World
Screen Captures
73
Portfolio | Mary & Max
Tablet Version
Editorial
Urban Grid / Urban Grid is a magazine that was created, designed, and pitched to a panel of six judges prevalent within the industry. Urban Grid is a concept and design that I arrived at through my love of urban exploration and interest in social connection. It is a San Francisco based publication that promotes connection between people living in different neighborhoods and provides a welcome escape from daily routine.
Process
Product
In-World
Design Inspiration & Ideation
Portfolio | Urban Grid
I began this project by developing a wide range of market research in order to see what other publications existed to serve urban culture and communities. From there I began to sketch and explore design iterations, keeping the overall appearance clean with captivating imagery and a stationary grid.
77
grid URBAN
grid URBAN
grid URBAN
grid URBAN
Process
Product
In-World
Design Elements The elements used throughout this magazine are influenced by the concept of a city grid, which is reflected in the name of the publication as well as the layout. The palette is soft with a condensed type as to keep the overall appearance both minimal and interesting.
Skills:
Portfolio | Urban Grid
Illustrator InDesign
79
225/225/225
222/221/216
195/176/161
0/0/0/0
12/09/12/0
24/28/34/0
Futura Condensed ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Avenir Next Condensed ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Portfolio | Urban Grid
Process
81
Product
In-World
Interior Profile Spreads
Portfolio | Urban Grid
Process
83
Product
In-World
Issue 1
Issue 2
Issue 3
Additional Issue Covers
Research & Development
Urban Post / Urban Post is a project created to connect, preserve, and retain the memories and stories of San Francisco inhabitants living in a quickly changing urban environment. This project was inspired by the problem of gentrification prevalent within the city. I decided to address the problem of San Francisco losing its identity and culture to change, through designing a solution that focuses on preservation, community, and connection.
GREETINGS FROM
Process
Product
In-World
Design Inspiration
Portfolio | Urban Post
The inspiration for this project was drawn from other story-telling projects that have had the potential of reaching large audiences in urban areas. Among these influential projects are StoryCorps, Narratives of Displacement, Humans of New York, and a project by the ad agency, Droga5, titled Recalling 1993.
87
I gathered data and research for this project using various methods which included a digital survey and many observations. I also approached people on the street in order to gather their stories and memories about place (small sample of results shown on the right).
Skylark
16th/Valencia Street
Clarion Alley
17th/Valencia Street
Amnesia Bar
20th/Valencia Street
Subject: Grew up in the Mission, 27 years
Subject: Works, 1 year
Subject: Lives/Works, 20 years
“Oh man, Skylark was the place growing up. When I was in high school my friends and I quickly became friends with the bouncer here. He always let us in underage. I haven’t been in there for years. I wonder how it is now?”
“When I first started working in the neighborhood, my co-worker and I would come hang out in this alley after our shift and share a pint of tequila. We’d complain about work and watch the tourists taking photos.”
Subject: Lives/Works, 3 years (grew up in SF)
Subject: Lives/Works, 5 years
“I remember when this bar was called Chameleon. I went there once a week, they had a great pool table. It was a bike messenger bar back then. It was full of tattooed dudes and punks. Almost every time I went there would be the same guy doing donuts on his motorcycle in front. That’s the kind of place it was.”
“This was the bar that just about anyone could get into underage. I remember this one time my friends and I were in line to get in, and we just kept passing the one fake I.D. we had back in line. We passed it along through five of us. There’s no way they couldn’t have known. They just wanted everyone to have a good time.”
“This alley is a personal place for me. It represents community - or what’s left of it. I’ve been working on this mural for about 4 weeks now. This is a place of impermanence, it’s always changing - the art, the people, the weather. I was so moved by the concept and overall message of this alley that I brought this idea back home to Bolivia a few years ago and started a similar project.”
Subject: Lives/Works, 15 years “I used to work at this bar about ten years ago. It was always loud and a fun place to be. The same bum would be sleeping across the street at the park and the crystal man would be selling his crystals. Back then I would’ve described it as “alive”. Now I would say the color is white, like a ghost.”
Process
Product
In-World
Design Ideation
Portfolio | Urban Post
After many sketches of various solutions to this problem, I arrived at the idea of using postcards as a means of sharing, connecting, and preserving memories and stories. Postcards, as a concept, are meant for people to use and share their experience about a known place, while reaching others on both an interesting and personal level.
89
Greetings From...
Greetings From...
Greetings From...
Greetings From...
GREETINGS FROM...
Various postcard iterations were created before user-testing took place. I wanted to keep the overall aesthetic of the design simple, realistic, and easily understood, in order to allow my audience the chance to relate with the story and imagery on the postcard.
Process
Product
In-World
Design Elements The elements used throughout the final design are reflective of the urban environment found within San Francisco. The imagery is honest and straightforward and the type choice is simple yet appropriate. I wanted the aesthetic to be both personal as well as captivating for the user.
Skills: Illustrator InDesign Photography
225/225/225
240/171/33
35/31/32
0/0/0/0
05/35/99/0
0/0/0/100
Portfolio | Urban Post
Courier New ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
91
Seravek ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
Urban Post is a postcard project that encourages participants to share stories and memories about place, providing a means of connection and preservation throughout the city.
Portfolio | Urban Post
Process
93
Product
In-World
GREETINGS
GREETINGS FROM
FROM GREETINGS FROM
GREETINGS FROM
GREETINGS FROM
GREETINGS FROM The final design is simple and straightforward as to allow an immediate connection between the user and the design. It was my intention to develop this project in a way for San Francisco inhabitants to feel connected to the places and stories shared through the use of postcards.
Portfolio | Urban Post
Process
95
Product
In-World
Home Page
I also developed a website for the Urban Post project to encourage users and community members to participate. The site includes various pages, with an explanation of the project and how to participate.
Participation Page
Thank You.
Contact: Harlan Frost harlanjoy@gmail.com 415.847.2025