John Riley
Process Book
Table of Contents INTRODUCTION
02. About My Process 03. About Pedal 04. The Problem 05. Pedal Overview
LOGO DEVELOPMENT
06. Logo Inspiration 07. Logo Concept 08. Logo Sketches 09. Logomark Creation 10. Logotype and Lockups 11. Logotype Rework 12. Logo Color Options 13. Logo Final
PATTERN DEVELOPMENT 14. Pattern Creation 15. Primary Typeface
IMAGE EDITING
30. Stadium Photo Manipulation
UX & WEB DESIGN
32. Pedal Website 33. Blockframes 34. Interfaces 35. Website Final 36. Digital Cards 37. Digital Ads
BRAND IDENTITY GUIDE
38. Graphic Standards Guide
SENIOR EXHIBITION
40. Mason Senior Exhibition 41. Acknowledgments
CONTACT INFO
BRANDING & MARKETING
16. Stationery 17. T-Shirts 18. Billboard 19. Banners
ADMISSION DESIGN
20. Recycled Wristbands 21. VIP and Staff Passes 22. Digital Ticket Creation 23. Seating Chart Map 26. Wayfinding 28. Parking Map 29. Parking Passes 1
About My Process ABOUT ME Hi my name is John Riley. I am a visual designer who finds inspiration from the world around me. I take in the things I see, hear, and experience to turn over designs that are bold and eye-catching. I always have a strong desire to create, especially when I feel inspired by music. Similar to how new sounds in music are continually being produced, I believe that you can always find a new approach to solving problems through design. COVID-19 PANDEMIC IMPACT Due to the ongoing COVID-19 Pandemic, the display of my project was greatly hindered. Originally, I planned on creating a 3D model of the music venue and printing out all of the designs that I created for the senior exhibition. However, because of the closing of nonessential businesses and delays in shipping, I was unable to fulfill my original plan. Instead, I ended up creating more than I previously planned to in the form of digital mock-ups and vectors so that my project can be viewed fully online.
2
Process Book
About Pedal WHY MUSIC? All my life, I have enjoyed music, so for my senior project I wanted to create something that included my passion for music. This is what led me to the creation of Pedal. Â WHAT IS PEDAL? Pedal is a fully self-sufficient and eco-friendly music venue located in Washington, D.C. Pedal strides to promote its environmentally friendly attitude through all of its practices.
3
The Problem THE PROBLEM A huge issue with music venues and festivals is the creation of waste. Coachella, a popular annual music festival, is responsible for generating around 100 tons of solid waste per day. Being an avid concert-goer myself, I am always disturbed by the amount of trash that is left on the floors afterwards. This issue inspired me to create Pedal. THE SOLUTION Pedal will exchange all wasteful music venue practices with fully eco-friendly alternatives. Pedal will use only recycled paper products, reduce the use of plastic, and all electrical energy will come from the venue’s solar roofing panels. With ticket sales, if someone decides to purchase a ticket at will call, they will be given a recycleable wristband right away and be granted entry.
4
Process Book
Pedal Overview THE GOAL To create an eco-friendly system that will be imitated by other music venues around the globe in an effort to better the environment. TARGET AUDIENCE Millennials interested in contemporary, alternative rock, rap, and R&B music. People older than 30 who want to support a music venue that is conscious of the environment. TONE Innovative, bold, sustainable, caring. COMPETITORS Echostage, The Anthem, 9:30 Club, Union Stage, FedEx Field, Capital One Arena.
5
Logo Inspiration VISUAL AUDIT Venues that are local to Washington D.C. and are direct competitors of Pedal. Places where I experienced waste firsthand. I first found what the competitor logos look like in order to give me ideas for how to differentiate Pedal from the competitors.
PEDAL’S COMPETITORS
6
Process Book
Logo Concept LOGO INSPIRATION When developing ideas for the visual identity of Pedal, I wanted to create something that was a mixture of nature and music. During research, I found the symbol in piano notation for lifting one’s foot off of the pedal. When developing the logo, I wanted to create a logomark that gave reference to that symbol.
INSPIRATION
7
Logo Sketches LOGO CREATION When creating the Pedal logo, I started off by sketching out over a hundred thumbnail marks. While making my sketches, I thought of symbols that represented a piano pedal and a flower petal. After I create a hundred marks, I continued the process to develop more ideas.
SELECTED MARKS
8
Process Book
Logomark Creation FROM SKETCH TO VECTOR Once I selected a few promising marks, I then transitioned into Adobe Illustrator to create them as vectors. Below, I have highlighted the evolution of a mark from sketch to vector.
9
Logotype and Lockups CHOOSING A TYPEFACE While creating my logo, I found a few typefaces that fit well with the digital marks I created. I created three final version logo options. During the digital iterations, I removed the dot in the mark because it was too visually distracting. LOGOTYPE OPTIONS
Pedal
KOMODA REGULAR
Pedal Pedal Pedal AUDIOWIDE
Pedal Pedal HEEBO
RUBIK
Pedal Pedal RIGHTEOUS
BROTHER
LOGOMARK EDIT
DIGITAL LOGO OPTIONS
10
Process Book
RYMAN ECO
ABEEZEE
Pedal Pedal UBUNTU
OXANIUM
Pedal Pedal
COOLVETICA
LEMON MILK
Logotype Rework ROUNDING COOLVETICA To make the logotype of Pedal’s logo match the flower mark, I slightly rounded the sharp edges of the sans-serif typeface Coolvetica.
11
Logo Color Options PICKING A COLOR When deciding the palette for the Pedal brand, I wanted to choose natural colors that would coincide with Pedal’s eco-friendly philosophy.
COLORS
12
Pedal Earth Pantone 346
Pedal Stone Pantone 5463
CMYK: 69 | 0 | 63 | 0
CMYK: 85 | 63 | 50 | 39
RGB: 72 | 187 | 136
RGB: 40 | 66 | 79
HEX/HTML: 48bb88
HEX/HTML: 28424f
Process Book
Final Logo PEDAL’S LOGO The Pedal logo consists of a flower logomark and modified sans-serif typeface Coolvetica.
LOGOMARK
LOGOTYPE
SIGNATURE
13
Pattern Creation THE “SOUNDWAVE” For the pattern, I wanted to create something that would represent a sound wave. To create this pattern, I first took the Pedal mark and then removed the inner part of it to create a shell. Then I placed the mark in the center of the shell and repeated layering this shape until I was left with a flower that echoes the Pedal mark. I call this pattern the “Soundwave”.
THE SOUNDWAVE
14
Process Book
Graphic System HOW TO APPLY THE SOUNDWAVE The Pedal pattern, the Soundwave, is meant to be cropped and placed in an area of focus so that it adds motion and gives life to the object.
15
Stationery COHESIVE DESIGN For the Pedal-branded stationery, I wanted to incorporate the Pedal pattern, termed the “Soundwave�, along with imagery to make the design feel completely on brand.
FINAL
16
Process Book
T-Shirts MERCH DEVELOPMENT For the Pedal apparel, I wanted to incorporate the Soundwave pattern cropped along with Pedal-branded imagery. The t-shirt will be available for purchase at the music venue during concerts alongside visiting artists’ merchandise and online on the Pedal website.
FINAL
17
Billboard BILLBOARD CREATION For the billboard design, I wanted to create something that expresses the emotion of the featured artist and give off a sense of motion and sound. To achieve this, I used the Soundwave pattern to visually display the sound wave vibrations from Dominic Fike’s guitar. BANNER DESIGN
FINAL
18
Process Book
Banners BANNER CREATION The Pedal banners were designed to be vibrant and expressive. I cropped the Soundwave pattern so that it looks like it’s echoing. The banner is displayed throughout the arena.
FINAL
19
Recycled Wristbands WRISTBAND CREATION Concert wristbands are available at almost all small music venues to determine who is of drinking age. For the wristbands, I wanted to keep a familiar shape and use my photographic pattern to give them an element of branding. The back of the labels provide important information about how to recycle them and a barcode for scanning during venue entry.
FRONT
BACK
RECYCLE SYMBOL
FRONT
BACK
20
Process Book
PIN-HOLES
BARCODE
VIP and Staff Passes PEDAL PASSES CREATION When creating the VIP and Staff passes, I originally tried to create something very minimal; however, the design did not feel on brand. With the final version, I changed the imagery, incorporated the full-color Pedal logo, and added the Soundwave pattern. FIRST DRAFT
FINAL
21
Digital Ticket Creation DIGITAL TICKET CREATION For the digital ticket design, I wanted to create a design that uses imagery of the featured artist and has a minimal style. At first, I tried to create a ticket that used a full-bleed image, but it did not work. As the drafts progressed, I took a traditional approach by adding a section for the information that looks like it can be torn off. The Soundwave pattern is used to add motion to Dominic Fike’s guitar.
FIRST DRAFT FINAL
22
Process Book
I added cut-outs like a traditional ticket so that it would feel more like a real ticket.
FINAL
23
Seating Chart Map SEATING CHART MAP EVOLUTION When approaching the idea of creating a stadium seating chart map, I was completely lost. I began with researching other stadium maps to get an idea of what they look like. I then sketched out a map that would make sense based on the stadium image I chose on the right. Next, I went through iterations on Adobe Illustrator and added details such as standard icons and a map legend.
SKETCH BASED ON IMAGE
24
Process Book
ICONS
FINAL
25
Wayfinding ARENA NAVIGATION Wayfinding is an effective way to make a space more comforting for people unfamiliar with an environment. With that in mind, I created wayfinding that is very simple and easy to get the message from quickly.
1ST LEVEL Concessions Restroom Elevator Stairs
Entrance Handicap Restroom
26
Process Book
BRAILLE
27
Parking Map PARKING MAP CREATION To create the parking map for Pedal Arena, I first looked at satellite views of multiple football arenas to get an idea of how parking lots were structured. Using that knowledge, I sketched out my own parking map.
FINAL
Pedal Arena Parking Map C2 B2 A2 X2
B1
C1
D2 D1
E2 E1
A1
F1
X1 STAFF
VIP1 VIP2
LEGEND GENERAL LOT HANDICAP PARKING STAFF PARKING VIP PARKING CROSSWALK ELECTRIC CAR PARKING LOT ROADWAY
28
Process Book
STAFF
F2
Parking Passes PARKING PASS CREATION My initial idea for the Pedal parking passes was to incorporate the Soundwave pattern. By using the Pedal-branded photography, I found it more visually interesting and legible. I created three versions: staff, VIP, and handicap parking passes. I added details such as instructions, production numbers, and expiration dates.
BACK
K
FRONT
FRONT
REMOVE BEFORE VEHICLE IS IN MOTION
BACK
FRONT
BACK
FRONT
BACK
REMOVE BEFORE VEHICLE IS IN MOTION
FRONT
REMOVE BEFORE VEHICLE IS IN MOTION
S IN MOTION
REMOVE BEFORE VEHICLE IS IN MOTION
STAFF
VIP
PARKING
PARKING HANDICAP PARKING
FRONT
EXPIRES JANUARY 2021
20207384
BACK
FRONT
REMOVE BEFORE VEHICLE IS IN MOTION
STAFF PARKING 20207384
FRONT
EXPIRES JANUARY 2021
BACK
20204820
EXPIRES JANUARY 2021
20201048
FRONT
REMOVE BEFORE VEHICLE IS IN MOTION
VIP
STAFF
VIP
PARKING
EXPIRES JANUARY 2021
BACK
20204820
EXPIRES JANUARY 2021
PARKING
HANDICAP PARKING
20201048
PARKING
FRONT
REMOVE BEFORE VEHICLE IS IN MOTION
20207384
RY 2021
EXPIRES JANUARY 2021
20204820
VIP
PARKING HANDICAP PARKING
20204820
EXPIRES JANUARY 2021
20201048
29
Stadium Photo Manipulation PHOTO EVOLUTION To best represent what I envisioned Pedal arena to look like, I first found a tennis court image. I then isolated the sky and fixed the saturation issue. Then I removed the tennis net and other out-of-place objects with the ContentAware effect, the Patch Tool, and the Paint Brush tool. To finalize the image, I added the Pedal logo, advertisements, and Pedal banners to make it feel more realistic. BEFORE
30
Process Book
LEFT AD CLOSE-UP
BANNER CLOSE-UP
RIGHT AD CLOSE-UP
AFTER
31
Pedal Website PARKING MAP CREATION When creating the website for Pedal, I started by researching local competitors’ websites to figure out standard sections they use. I then created sketches, developed blockframes, and interfaces to get the final.
DESKTOP BLOCKFRAME
32
Process Book
Blockframes MOBILE BLOCKFRAME
33
Interfaces 1920 X 1080 PX
IPHONE 11
34
Process Book
Website Final
35
Digital Cards EVENT INFO CARDS When creating the Pedal website, I wanted to create digital cards for each event to improve the user experience of the website.
MOBILE CARDS
DESKTOP CARDS
36
Process Book
EMAILING LIST
Digital Ads ONLINE ADVERTISEMENT Every music venue has digital ads that promote each event that is upcoming. I created some for the Dominic Fike concert in some of the more popular digital ad dimensions.
320 X 50 PX 300 X 600 PX
300 X 250 PX
336 X 280 PX
728 X 90 PX
37
Graphic Standards Guide HOW TO USE PEDAL’S VISUAL IDENTITY Graphic standards guides are essential tools for maintaining a brand’s visually identity. When creating one for Pedal, I made sure to include all the key pages, such as typography, color, and logo usage. I also added everything that I thought would be helpful in guiding someone through using Pedal’s branding systems.
38
COVER
ABOUT PAGE
SECTION TITLE
TAGLINE
Process Book
CLEARSPACE TITLE
PEDAL-BRANDED IMAGERY FOLIO TYPOGRAPHY
PALETTE
39
Mason Senior Exhibition PEDAL ONLINE DISPLAY The Mason Senior Exhibition limited me to nine images that best show off Pedal. Below are the nine images that I chose for the display.
40
Process Book
Thank You! PEOPLE THAT MADE PEDAL POSSIBLE First, I want to thank my friend, Jonathan Alvarado, for all of his hard work copyediting my project’s text. I also want to thank my girlfriend, Daniela Aguero, for all the support and one-on-one critiquing of my project. I would also like to thank my Professor, James Quigley, for his dedication to making this semester feel normal and run smoothly during all of the craziness of quarantine. Lastly, I want to thank my family for their constant support in my life.
41
540-222-4657 jorildesign.com johnjriley49@gmail.com 42
Process Book