Growing up I was never that attracted to art because I felt that in order to be an artist I needed to know how to be talented with pencil and paper. Drawing was never my strength, but through learning about the prinicples of graphic design I’ve come to learn that I have my own level of creativity. I succeed by applying systems thinking and logic to my projects that helps justify my decisions. Graphic design has allowed me to be the creative person I’ve always wanted to be and Interactive design has become one of my strong suites. When smartphones first came out I got one early and spent a considerable amount of time on it. Little did I know this was training for my interactive design focus. Each of those swipes, clicks and movements was ingrained in me and made designing user experience flows much more natural. I may not have known the correct terms, but I was building a wealth of experiences I still recall regularly. I remember frustrating experiences as well as successful ones and my main focus when designing is to always create an effortless experience for users that fades into the background and creates a sense of ease for the user.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Tripmark Instructor
Project Type
Font
Category
Paul Drohan Signika
Mobile App Interactive
Tripmark is a vacation advisor tool that users can use to plan a getaway. The objective was to design an app in an organized fashion that would create an experience where everything the user needs to plan their trip would be in one space. By using the Tripmark app users will be more organized and have all their traveling needs at their fingertips on their mobile device. The Tripmark experience begins by a series of questions that allows the app to cater its offerings to each of its users preferences. This company needed an eye catching design to look more professional and align with travel agency competitors. A simple user interface was created to allow the user to get their travel information in as few screens as possible. Most travel sites are overly complicated and often one color so I gave it a fresher look with hues of blue,orange, yellow,and green.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
01
02
Colors
#f15b41
#43ac6a
#145eaa
#ffc200
Typography
Signika ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(.,;:?!$&*)
03
Iconography
#408dd2
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Off the Clock Instructor
Project Type
Font
Category
Sean Bacon Luxury
Restaurant Menu/Website Branding/Interactive
Off the Clock Restaurant and Lounge is a luxury eatery located in the Gaslamp Quarter of San Diego. This restaurant was inspired by the idea of people winding down and wanting to enjoy a delicious gourmet meal after work where they could mingle with friends and coworkers. I needed to create a menu and website that was cohesive so the guests would be able to identify the brand and help it differentiate from competing restuarants. Rich warm tones of gold and burgundy were chosen to give the brand the sense of feeling of luxury and provided an elevated experience that made after work feel upscale, but still relaxing and fun. The typefaces used are from the Luxury collection by House Industries which helped drive the brand voice, but also created unity in the menu text while also helping differentiate the different sections. The menus were printed on a textured cream paper to add to the ambiance of Off the Clock.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
70 Miles Instructor
Project Type
Font
Category
Min Choi
Milano Typeface
Beverage Packaging
Branding/Packaging
70 Miles is a distillery located in the heart of San Diego and is dedicated to serving it’s community and culture. The name is derived from the length of shoreline in San Diego County and subtly hints at the sunny beach lifestyle that is common in this region. They sell a line of mixed cocktails in a bottle. This drink is for all sun lovers ages 21 to 30 who enjoy a good drink. The packaging is bright and fun with sporty typography. The logo is made from the font Milano and is modified to contain waves reminscent of San Diego’s beauitful beaches and coastline. The colors chosen for the three flavors are blue, yellow, and green corresponding to the cocktail flavors. The white labels were selected to differeniate from the predominate clear bottles in the market. Clear bottles allow the consumer to see the colored beverages on the shelf.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
01
02
Colors
#27ACB2
#FFD552
#65C295
#0D6266
#FEC210
#0B7643
Typography
milano typeface ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890.,?!$ &*)
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Apptive Instructor
Project Type
Font
Category
Min Choi
Omniblack Paytone
Social Kit/Mobile App Packaging/Interactive
The Apptive kit was designed to get youth excited about exercise. The goal is to get children all across the nation to be more active whether they are doing traditional exercises, playing sports, or playing their favorite game on the playground. Merging technology with an active healthy lifestyle more authentically. The Apptive mobile game was created allowing kids ages 6-15 years old to play with their smartphones and tablets while being active at the same time. In order to use the app the user uses their body as the controller. Users must run in place, jump, and turn to make their customized avatar move inside the game. Bright colors combined with a playful interface was use to create an engaging app appropriate for the audience. The typography is fun and playful supporting the brand. Orange and yellow communicate the sense of energy the children possess, and gray and black speak to the feeling of fitness.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
01
02
Colors
#f15b41
#43ac6a
#145eaa
#ffc200
Typography
Paytone One ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(.,;:?!$&*)
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
1 Custom avatar user will choose 2 User will choose level being easy to hard 3 Boost, Upgrades, Shop 4 Background image 5 3 types of boost choices 6 Back button 7 Dashboard of students in class 8 The amount of miles each student runs
in a week
Carrier
12:00 PM
Carrier
12:00 PM
2
Easy
2
Medium
4
4 2
Hard
1
Carrier
12:00 PM
Carrier
12:00 PM
6 7
5
5
5
3
3
miles
Name
miles
Name
miles
Name
4
3
8
Name
4
miles
Name
miles
Name
miles
Name
miles
01 // 02 // 03 // 04 // 05 // 06 // 07 // 08 // 09
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Zile Air Instructor
Project Type
Font
Category
Min Choi Aller
Airline
Branding/Interactive
Zile Air is an airline that calls the beautiful and peaceful island of St. Lucia home. Meaning “island� in Haitian Creole, Zile targets families taking beach vacations from Hawaii to Bora Bora. The logo was inspired by the bird of paradise flower to give a tropical feeling while alluding to flight. The typography for Zile was designed to give a friendly but stylish feeling that was welcoming to adults as well as kids. A color palette of brown, orange, blue and green reemphasized the tropical focus and created a warm and welcoming feeling for its passengers. It was important that the airline communicate across a large audience of ages, ethnicities and socio-economic levels in order to feel appropriate for families. The brand was applied to stationery, boarding passes and a mobile app. The app was a focus to allow for new parents to keep things in one place and create an effortless check-in process.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
01
02
Colors
#6D583D
#A3B746
#f58220
#5FC6E3
Typography
Aller ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(.,;:?!$&*)
03
Iconography
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Paragon Instructor
Project Type
Font
Category
Amy Levine Montserrat
Theatre Malier Branding/Interactive
Paragon Performing Arts Center is located in Tacoma, WA the largest city closest to Mount Rainer. The name Paragon means a person or thing viewed as a model of excellence or the highest point. This name was chosen to relate to the majestic beauty of Mount Rainer which is the hightest mountain in Washington State and in close proximity to Tacoma. The logo contains modifications to the ‘P’ ‘A’ and ‘N’ with the ‘A’ representing the natural wonder of Mount Rainer. Paragon needed to have a feeling of being prestigous to live up to its name and reference to this famous local landmark. Rich colors of purple and gold were chosen to represent mist and fog, while all colors alluding to jewels and treasure. These aspects were applied to a printed brochure and website of the 2016 play season “Diamonds in the Rough”.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
PEFORMING
01
02
ARTS
CENTER
Colors
#27ACB2
#FFD552
#0D6266
#FEC210
Typography
Montserrat ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(.,;:?!$&*)
#65C295
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Soul Cookers Instructor
Project Type
Font
Category
Sean Bacon
Lust Script Misson Gothic
Food Magazine Interactive
Soul Cookers is a magazine dedicated to the people who love comfort food sometimes known as soul food. This southern style of cooking is quite popular for its warm and comfort oriented style that is gaining popularity throughout the United States. In Soul Cookers you can find features articles about chefs that own their own restaurant to quick and fun recipes that showcases different recipes that are common to comfort food. The magazine style uses a warm and inviting style with a hint of elegance. The masthead is in a round script style reminsecent of handwritten recipes. The typographic palette used inside creates a straightforward and charming style that caters to women ages 35-50 years old who enjoy cooking for themselves and large groups. The color palette carries through the warm look utilizing oranges, yellows and warm green tones.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Pure Leaf Instructor
Project Type
Font
Category
Paul Drohan
Avenir LT Std
Mobile Website
Interactive
Pure Leaf Iced Tea is a beverage growing in popularity in the United States. One of the unique qualities that the brand has is that their tea leaves are hand picked by 1 of 10 tea masters in the world and this attention to detail is in the great quality and taste. The process that is used to make their all natural tea is what makes them unique so we wanted to take consumers on a journey to experience this level of quality. Targeted to men and women 30-50 who enjoy quality tea that can be acquired on the go. I strategically wanted to create a digital experience that was unlike other mobile websites. The site focuses on a simple, calm and relaxed approach hat makes visitors feel at ease upon entering. The colors blue and green were chosen because of their prominance tea plantations. Orange and brown were used as accents for the relationship to the beverage. Large beautiful photography were heavily used features to transport the viewer to this idyllic landscape.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
01
02
Colors #f15b41
#43ac6a
#145eaa
#ffc200
Typography
Avenir LT Std ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(.,;:?!$&*)
03
Iconography
#408dd2
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
HOME Product Landing
Product Locator
About
Products
Tea Master
Product Detail
Process
Recipes
Contact
Carrier
12:00 PM
1
Carrier
1
2
1 Secondary Logo that links back to
12:00 PM
homepage
2
2 Navigation menu for each page 4 3
3 Headline Intro for homepage
Welcome to the Simple Life of Pure Leaf
4 Background image 6
4
5 Drink product image 7
Luptat. Electus doluptatem autatem et reped quam nos
6 Image of Tea Master 7 Brief description of Tea Master
5
8 Button that takes user to process page
8
Carrier
12:00 PM
1
Carrier
12:00 PM
1
2
2
1 Secondary Logo that links back to homepage 2 Navigation menu for each page
4 4
3 Product viewer carousel style. Users will be
able to swipe left or right to veiw products. (All products will be clickable when at center)
4 Background image 63 3
3
3
Luptat. Electus doluptatem autatem et reped quam nos moluptat everum atum aut ut explaborerum repudan daeped et ma sum et officiant dellab
5 Product enlarged with 360° view to see
nutritional facts
5
6 Product detail description
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
Nike Women’s Marathon Instructor
Project Type
Font
Category
Sean Bacon
BigNoodleTitling
Marathon Poster/Website Branding/Interactive
The Nike Women’s Marathon is one the most popular Marathon in the country. The marathon moves around the country and the 2016 event was hosted in San Francisco. Nike wanted to create a new look for the marathon to attract a broader audience of fitness savvy women ages 25-45. A bold new look was created for the brand using a bright unusual color palette mixed with condensed strong sans serif typography. The ads and applications feature explosive bright colors that take scenes of San Francisco and portray them in a bright and bold illustration style. This bright bold style was applied to all of the applications from shirts to posters. Special considerations were made to carry out this experience through the entire website and registration process. It was important that the bold look permeate all aspects of the event. The bright colors were divided and used to create sections of the sign-up process allowing the user to visually see where they were at when registering.
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
0 1 // 0 2 // 0 3 // 0 4 // 0 5 // 0 6 // 0 7 // 0 8 // 0 9
PEFORMING
ARTS
CENTER
ate
’s
Family Salon
Performing Arts Center
Youth Activity App
Restaurant and Lounge
Family Airline
Music and Cultural Venue
Soul Food Magazine
Barbershop & Hair Salon
Family Restaurant
PEFORMING
ARTS
ate
CENTER
’s
Family Salon
Printing
Photography
Font
Bindery
Allegra San Diego Klinic Slab + Ideal Sans
Bradford Prairie International Coil Bindery
Thank you Sean for all your help and encouragement. I wouldn’t have been able to get through this course without you! Thank you to my mom for understanding this long hard process I love you. To my Uncle John and Aunt Jackie I thank for your guidance through these past years! Mimi thank you for all your love and support. My RCI family thank you for all your support I love you all. Thanks Angie for the last minute help! To all my classmates thanks for your support and encouraging words. Eugene thanks for always looking out for me. Thank you Hibiki for your help and inspiration. To J House thank you for understanding this process that I had to go through. To everyone who helped along the way THANK YOU!
All stock imagery shown is for inspiration only. Some photography and icons are from DollarPhotoClub, Freepik, Flaticons, and the Noun Project.
Copyright Š 2016 Teresa Smith
All rights reserved. No portion of this book may be used or reproduced in any manner without the written permission of Teresa Smith.