hello So I like art, but not the mess. What better way to channel this energy than to create art graphically, in a lucrative and useful manner, all while helping others? I’ll wait..... I believe I was brought here to bring to life anything I get my hands on. If it’s solving a problem or being creative for the sake of it, my talent will take me far and will make better, the craft of those who work with me. I look forward to bringing value to every job and task I am given in the future. There’s something nice about being able to do what I love for a living. I am
experienced in UX/UI Design, Sketch Software, Adobe, App Design, Branding, Web Design, and Procreate. I like experimenting with different types of media so that I can become well rounded. I was raised in Florida and served in the US Navy for nine years. My service is the reason I ended up in beautiful San Diego, CA. I’d describe my over all style as a designer (but not limited to) as minimal, modern and bold. Now let’s get started shall we?
Table of contents
1. UX/UI Design 21. Type Portrait 31. Macro/ Micro Book 41. Active Listening Book 55. Rebranding 95. Preserve Innocence Project 113. Illustrations 149. Colophon
note
Gina C Design UX/UI Music App
UX/Ui Music App San Diego State University
Pro f. K a t i e S t a p ko C l a s s A RT 4 4 1
The goal was to create a music app with a unique feature. An inclusive music app that combines licensed music with unlicensed and underground music, by allowing users to upload links from SoundCloud to their library. Utilizing UI/UX research methods, personas and interviews revealed that some
users had wished to combine their SoundCloud library with other licensed music apps. B. Note music brand is energetic, interactive and musically inclusive. The unique feature, the upload center, makes it possible to listen to all your music from one app.
2
UX/UI research
What is it? “UX design refers to the term ‘user experience design’, while UI stands for ‘user interface design’. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different aspects of the product development process and the design discipline. Before we consider the key differences between UX and UI, let’s first define what each term means individually.” -Emil Lamprecht
3
Competitor Research
Research was conducted on users who used Apple Music and users trying out B. Note. Features, pricing, complaints, and compliments were all taken into account while interviewing personas. Task paths were examined to determine which screens were required to complete.
4
user personas Three Apple Music users were interviewed about whath they like and dislike in their music app experience. They were asked what could be better. This is essential in order to identify target markets and cater the app to the user’s overall experience.
5
Gina C Design UX/UI Music App
Jason K 32 Cinematographer Jason uses Apple Music for his cinematography. He is a creative, who makes money off of making content for marketing purposes. His videos include music. Why he likes Apple Music?
-$10/mo subscribtion
-Inclusivity -Stations What he doesn’t like?
-Account settings inacessability through app
-Algorythm plays the same genre of music in tailored playlists
-Only mainstream music
Dionna J 40 Spin Instructor Dionna teaches a spin class four times a week. She is constantly looking out for playlists that last throughout the class. Why she likes Apple Music?
-The sound quality
-Release dates
-Selection What she doesn’t like?
-Pricing could be better
-Only mainstream music
Gabi L 21 Student Gabi loves going on runs and hikes. She makes sure to bring her device with her so she can listen to a wide range of music. Why she likes Apple Music?
-The variety
-Suggested music
-Album art
What she doesn’t like?
-The quality of sound
-The aesthetic
6
Mind Mapping In app tasks were identified
up to a song action. The upload
such as playback, adding to
center was added as a unique
playlists, searching for songs, feature. Screens were drafted up logging out, uploading a song
accordingly, from point A to point
and the rest of the actions
B in tasks within the music app.
required for paths ledading
7
Gina C Design UX/UI Music App
8
wire frame
Using different music applications for references, I drafted up wire frames. These wire frames allowed me to visualize the placement of elements within the screen. For example the placement of bottom navigation, various icons and calls to action.
9
Gina C Design UX/UI Music App Login Screen Sequence
Search Screen Sequence
Share Screen Sequence
10
flash branding The theme I decided was one that includes
represent this inclusivity. The bees
hives, bees, buzzing and inclusivity. A
(artists) make honey (music). The new
hive represents and inclusive community.
music (buzz) includes a variety of
Being that B. note can include music from
choices because of the upload feature.
outside libraries, the hive is best to
11
Gina C Design UX/UI Music App
Hexagon Covers
A mood board is used to get a sense of style to reference. Sketches of the logo and icons follow. A color palette is decided and ordered based on primary colors and complimentary colors. The original logos were comprised of a deconstructed hive and bee. The images of artists and album art were placed within a hexagon.
original screens The original screens show what happens when you put all the honey together. Time to integrate the theme with the wire frames. Now that elements are identified and need to be arranged, the prototype is to be ineracted with at InVision.com.
13
Gina C Design UX/UI Music App
14
user testing The prototypes were tested by
how the modals for uploading
three users. Users noted the
musics appeared inactive. The
branding could be more improved
buttons, originally gray,
and geared towards bees than
were made orange so that users
hives. The original brand/
could identify better the call
logo type looks like Beats
to action. Changes were made
by Dre brand. One user noted
accordingly post user feedback.
15
Gina C Design UX/UI Music App
Before and After modal correction allowed users to better identify the call to action buttons.
16
end result Revisions were made to the logo type, the modals and the call to action mini song player
Gina C Design UX/UI Music App
18
Landing pages for app downloading
19
Gina C Design UX/UI Music App
Home screen app icon
Type Portrait San Diego State University
Prof. Weeks ART 442
The goal was to create a portrait out of descriptive type. Different type and fonts were used to fit within the lines of my self portrait.
22
Gina C Design type portrait
Portrait
23
“A portrait is a portrayal of a person, u s u a l ly s h o w i n g t h e p e r s o n ' s f a c e ( b u t n o t a l w a y s ) .� -vocabulary.com
24
Gina C Design type portrait
Sketches A type portrait is a portrait of someone made out of type. The words within the type are words that describe the person. Taking a photo, then polarizing it, then tracing the polarized tones, then placing type and color within each section.
Golden Geometric Clear Modern Conceptual Graphic Intuitive Problem-Solving BOLD! Brave Childish Extro-Introvert Lover Thinker Funny Innovative Composerd Balanced Headstrong Smooth Blurred Solid Flat Textured Seasoned Salted Wity Contagious Symbolic Detailed Careful Patient Inventive Experimental Productive Subdued Modest Humble Muted Analytical Inclusive Exclusive Discrete Serious Playful Ambiguous Dark Experienced Curious Technical Thinker Rule Breaking Golden Geometric Clear Modern Conceptual Graphic Intuitive Problem-Solving BOLD! Brave Childish Extro-Introvert Lover Thinker Funny Innovative Composerd Balanced Headstrong Smooth Blurred Solid Flat Textured Sea-
Golden Geometric Clear Golden Geometric Clear Modern Conceptual Graphic IntuModern Conceptual Graphic Intuitive Problem-Solv- itive Problem-Solving BOLD! Brave Childish Extro-Introing BOLD! Brave Childish Extro-Introvert Lover vert Lover Thinker Funny Innovative Composerd Balanced Thinker Funny Innovative Headstrong Smooth Blurred Solid Flat Textured Seasoned Composerd Balanced Headstrong Smooth Blurred Salted Wity Contagious Symbolic Detailed Careful Patient Solid Flat Textured Seasoned Salted Wity Conta- Inventive Experimental Productive Subdued Modest Humgious Symbolic Detailed Careful Patient Inventive ble Muted Analytical Inclusive Exclusive Discrete Serious Experimental Productive Subdued Modest Humble Playful Ambiguous Dark Experienced Curious Technical Muted Analytical Inclusive Exclusive Discrete Serious Playful AmbiguousThinker Rule Breaking Golden Geometric Clear Dark Experienced Curious Technical Thinker Rule
U N I Q U E . B A L A N C E D. S Y M M E T R Y. CO N T R A S T. S T R U C T U R E D. P E R S I S T E N T. PA S S I O N AT E . V I S I O N A R Y. I N T R O V E R T. E X T R AV E R T. M O D E R N . O P E N N E S S . F C U S E D. AT T E N T I V E . P L AY F U L . PAT I E N T. D R E A M E R . S T R O N G . R U L E - B R K E R . S A S S Y. CO M P O S E D. E M OT I O N A L . H O N E S T. B O L D. C U R I O U S . S E R I O U S . R E B E L . CO M P X . I N T E L L E C T UA L . A D A P TA B L E . P R O B L E M - S O LV E R . LO V E R . C R E AT I V E . P E R F E C T I O N I S T. N I M A L I S T. I M A G I N AT I V E . CO N C E P T UA L . I N N O VAT I V E . R E S O U R C E F U L . H U M B L E . M O D E S R A Z Y. D I F F E R E N T. T R A N S PA R E N T. C L E V E R . S T R O N G . A S S E R T I V E . C H I L D I S H . M I N D F U L . A H E N T I C . S T U B B O R N . U N I Q U E . B A L A N C E D. S Y M M E T R Y. CO N T R A S T. S T R U C T U R E D. P E R S I S N T. PA S S I O N AT E . V I S I O N A R Y. I N T R O V E R T. E X T R AV E R T. M O D E R N . O P E N N EBALANCED.FUNCTIONAL.CA SS.F.IMPLIED.INTERRUPTED.STI C U S E D. AT T E N T I V E . P L AY F U L . PAT I E N T. D R E A M E R . S T R O N G . R U L E - B R EPHOUS.MASSIVE.NEBULOUS A K E R . S A S S Y. CO M RED.CLEAR.FLAT.CONTROL O S E D. E M OT I O N A L . H O N E S T. B O L D. C U R I O U S . S E R I O U S . R E B E L . CO M PH.VERTICAL.THIN.DISTORTE L E X . I N T E L L E C T UA TRIC.BALANCED.FUNCTION A D A P TA B L E . P R O B L E M - S O LV E R . LO V E R . C R E AT I V E . P E R F E C T I O N I S T. MTOUR.IMPLIED.INTERRUPTE I N I M A L I S T. I M A G AMORPHOUS.MASSIVE.NEB .BLURRED.CLEAR.FLAT.CON AT I V E . CO N C E P T UA L . I N N O VAT I V E . R E S O U R C E F U L . H U M B L E . M O D E S T. C R A Z Y. D I F F E R E N MOOTH.VERTICAL.THIN.DIS T R A N S PA R E N T. C L E V E R . S T R O N G . A S S E R T I V E . C H I L D I S H . M I N D F U L . AU THENTIC.STUBB EOMETRIC.BALANCED.FUNC D.CONTOUR.IMPLIED.INTER N. ATTE.AMORPHOUS.MASSIVE
Modern Conceptual Graphic Intuitive Golden Geometric Clear ModProblem-Solving BOLD! Brave Childern Conceptual Graphic Intuitive Problem-Solving BOLD! Brave ish Extro-Introvert Lover Thinker Funny Childish Extro-Introvert Lover Innovative Composerd Balanced HeadThinker Funny Innovative Comstrong Smooth Blurred Solid Flat Texposerd Balanced Headstrong Smooth Blurred Solid Flat Tex- tured Seasoned Salted Wity Contagious tured Seasoned Salted Wity Contagious Symbolic Detailed Symbolic Detailed Careful Patient InCareful Patient Inventive Exventive Experimental Productive Subdued
ASUAL.BLURRED.CLEAR.FL TED.SMOOTH.VERTICAL.TH AR.GEOMETRIC.BALANCED RVED.CONTOUR.IMPLIED.IN NY.MATTE.AMORPHOUS.MA LM.CASUAL.BLURRED.CLEA MULATED.SMOOTH.VERTICA S.LINEAR.GEOMETRIC.BALA LED.CURVED.CONTOUR.IMP ED.SHINY.MATTE.AMORPHO
7
d
REA PLE .MI S T. C AU T STE
ALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVED.CONTOUR IMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.MATTE.AMOR S.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.CASUAL.BLUR ED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULATED.SMOOT ED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.GEOME NAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVED.CON ED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.MATTE. ULOUS.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.CASUAL NTROLED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULATED.S STORTED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.G CTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVE RRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.M E.NEBULOUS.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.C AT.CONTROLED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULA IN.DISTORTED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINE .FUNCTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CU NTERRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHI SSIVE.NEBULOUS.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CA AR.FLAT.CONTROLED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STI AL.THIN.DISTORTED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOU ANCED.FUNCTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTRO PLIED.INTERRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORT OUS.MASSIVE.NEBULOUS.LINEAR.GEOMETRIC.
MP AL. GIN N T. OR
Descriptive Type Using different fonts and words I filled in the different sections and tones within the polarized portrait lines. Using paragraphs of random words and clipping masks to make the type fit within the lines.
28
Gina C Design type portrait
Final Images I experimented
with complimentary and opposite colors, but I ultimately chose
a monochromatic palette.
U N I Q U E . B A L A N C E D. S Y M M E T R Y. CO N T R A S T. S T R U C T U R E D. P E R S I S T E N T. PA S S I O N AT E . V I S I O N A R Y. I N T R O V E R T. E X T R AV E R T. M O D E R N . O P E N N E S S . F C U S E D. AT T E N T I V E . P L AY F U L . PAT I E N T. D R E A M E R . S T R O N G . R U L E - B R E A K E R . S A S S Y. CO M P O S E D. E M OT I O N A L . H O N E S T. B O L D. C U R I O U S . S E R I O U S . R E B E L . CO M P L E X . I N T E L L E C T UA L . A D A P TA B L E . P R O B L E M - S O LV E R . LO V E R . C R E AT I V E . P E R F E C T I O N I S T. M I N I M A L I S T. I M A G I N AT I V E . CO N C E P T UA L . I N N O VAT I V E . R E S O U R C E F U L . H U M B L E . M O D E S T. C R A Z Y. D I F F E R E N T. T R A N S PA R E N T. C L E V E R . S T R O N G . A S S E R T I V E . C H I L D I S H . M I N D F U L . AU T H E N T I C . S T U B B O R N . U N I Q U E . B A L A N C E D. S Y M M E T R Y. CO N T R A S T. S T R U C T U R E D. P E R S I S T E N T. PA S S I O N AT E . V I S I O N A R Y. I N T R O V E R T. E X T R AV E R T. M O D EBALANCED.FUNCTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVED.CONTOUR RN.OPENNESS.F.IMPLIED.INTERRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.MATTE.AMOR C U S E D. AT T E N T I V E . P L AY F U L . PAT I E N T. D R E A M E R . S T R O NPHOUS.MASSIVE.NEBULOUS.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.CASUAL.BLUR G . R U L E - B R E A K E R . S A S S Y. CO M P RED.CLEAR.FLAT.CONTROLED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULATED.SMOOT O S E D. E M OT I O N A L . H O N E S T. B O L D. C U R I O U S . S E R I O U S . RH.VERTICAL.THIN.DISTORTED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.GEOME E B E L . CO M P L E X . I N T E L L E C T UA L . TRIC.BALANCED.FUNCTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVED.CON A D A P TA B L E . P R O B L E M - S O LV E R . LO V E R . C R E AT I V E . P E R F ETOUR.IMPLIED.INTERRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.MATTE. C T I O N I S T. M I N I M A L I S T. I M A G I N AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.CASUAL AT I V E . CO N C E P T UA L . I N N O VAT I V E . R E S O U R C E F U L . H U M B.BLURRED.CLEAR.FLAT.CONTROLED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULATED.S L E . M O D E S T. C R A Z Y. D I F F E R E N T. MOOTH.VERTICAL.THIN.DISTORTED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.G T R A N S PA R E N T. C L E V E R . S T R O N G . A S S E R T I V E . C H I L D I S H .EOMETRIC.BALANCED.FUNCTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVE M I N D F U L . AU T H E N T I C . S T U B B O R D.CONTOUR.IMPLIED.INTERRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.M N. ATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.C
ASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULA TED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINE AR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CU RVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHI NY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CA LM.CASUAL.BLURRED.CLEAR.FLAT.CONTROLED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STI MULATED.SMOOTH.VERTICAL.THIN.DISTORTED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOU S.LINEAR.GEOMETRIC.BALANCED.FUNCTIONAL.CALM.CASUAL.BLURRED.CLEAR.FLAT.CONTRO LED.CURVED.CONTOUR.IMPLIED.INTERRUPTED.STIMULATED.SMOOTH.VERTICAL.THIN.DISTORT ED.SHINY.MATTE.AMORPHOUS.MASSIVE.NEBULOUS.LINEAR.GEOMETRIC.
29
G l I T P M o m e S
E
e G B T a
Golden Geometric Clear Modern Conceptual Graphic Intuitive Pr lem-Solving BOLD! Brave Childish Extro-Introvert Lover Thinker Innovative Composerd Balanced Headstrong Smooth Blurred So Textured Seasoned Salted Wity Contagious Symbolic Detailed C Patient Inventive Experimental Productive Subdued Modest Hu Muted Analytical Inclusive Exclusive Discrete Serious Playful Am ous Dark Experienced Curious Technical Thinker Rule Breaking metric Clear Modern Conceptual Graphic Intuitive Problem-Solving BOLD! Brave Childish Extro-Introvert L er Funny Innovative Composerd Balanced Headstrong Smooth Blurred Solid Flat Textured Seasoned Salted W Symbolic Detailed Careful Patient Inventive Experimental Productive Subdued Modest Humble Muted Analytical I
G en Geometric Clear Modern Conceptua Graphic Intuitive Problem-Solving B Brave Childish Extro-Introvert Love Thinker Funny Innovative Composerd anced Headstrong Smooth Blurred Sol
Exclusive Discrete Serious Playful Ambiguous Dark Experienced Curious Technical Thinker Rule Breaking
This is Feminism San Diego State University
Prof. Weeks
ART 442
This is an exploration on the relationship between
Women of Color, Self, and Strength. Each section
micro and macro text. The poetry is the macro text and
has a collection of relative poetry and quotes
the quotes are the micro text. This book was broken
paired up. Famous feminists quotes were paired
down into sections. Each section having a theme ie:
up next to feminist poetry.
Gina C Design Macro/micro book
Sketches
33
Each section of the book has the same structure. A large title on the first page of each section, followed by pages with different arrangements of quotes and poetry.
34
Gina C Design Macro/micro book
Micro vs macro text “Simply put, micro refers to small things and macro refers to big things� writingexplained.org
35
In this book, with the pairing of
make up the lesser half of the
feminist quotes with poetry, the
text. For example, this text
poetry is the macro text because
would be the macro text of this
it is the body text and makes up
portfolio, while the quote on
the majority of the text, however
page 33 would be the micro. The
it still much smaller in scale
sizes make it confusing due to the
than the call out quotes, which
scale.
are the micro text because they
36
Gina C Design Macro/micro book
Micro
Macro
Font Big Shoulders for the Quotes (Micro) ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e fg h i j k l m n o p q r s t u v w x y z 1234567890
ITC OFFICINA for the poetry and the Headings (macro ) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
38
Gina C Design Macro/micro book
Final Cover A minimalistic cover for not so minimalist content.
40
Active Listening Guide San Diego State University
Prof. Minae
ART 341
The goal was to create a child friendly manual. Active listening is a great skill to learn at a young age.
“Active listening is not only a matter of making yourself available to hear someone talk, but it is showing the sender, physically, that you are receiving and understanding their message on all levels.� -Susan C. Young
Gina C Design Active Listening
Style This hand book needed to appeal to children, so a basic three color palette was used. Cartoon style graphics of lips and ears were referenced in the process. Think juvenile, simple, child-like and educational.
46
Be Quiet Focus and pay attention Make eye contact Engage the conversation: nod or say Ok Observe and read the speaker Understand, process and interpret Wait for speaker to finish Ask Questions
Steps
1. 2. 3. 4. 5. 6. 7. 8.
47
Sketches
Gina C Design Active Listening
Sketches of the different infographics include components used during active listening, ears, eyes, and mouth.
48
49
Gina C Design Active Listening
Icon Development When creating the icons it was importrant to keep it simple. The line weight should always be relatively the same in all icons, the color palette is different variations of three colors. Certain icons are combined. Different variations and sizes of the touch call brush form the lines of the graphics. Red, Brown and Gloomy Day Green were used as the primary colors.
51
Gina C Design Active Listening
Gina C Design Active Listening
The task was to bring a clothing brand to life. I was given the awsome opportunity to work with a client who has a clothing line. Together we worked on a whole new design and brought value to the brand which was very much in need.
Rebranding
Gina C Design rebranding
Objective San Diego State University 2020
Prof. Min ART445C
The goal for the client was to rebrand entirely. THANS Clothing Co. is a bold, colorful and culturally inclusive brand that is primarily geared towards millennials.
59
Original T HANS Clothing Co is an online clothing store that is bold and colorful! Urban and Bright colors bring out thought provoking messages. This brand is culturally inclusive as it includes Afro-American themes in some of the prints. Main goals for client were to increase sales and diversify graphics. The original brand appears to be childish and lacks represenation of the brand over all. So the solution is to rebrand.
62
Gina C Design rebranding
C M Y K
4 0 88 0
C M Y K
75 97 3 0
C M Y K
42 70 94 50
C M Y K
1 95 83 0
C M Y K
75 68 67 90
C M Y K
74 1 96 0
63
brand Style BOLD-ENERGETIC-URBAN-INCLUSIVE-LOUD-GREAT
Sketches
Gina C Design rebranding
I based my sketches off the bold color that the client preferred along with the symbology of the goat. The goat represents “Greatest of All Time�. This goat ultimately became a theme, and the logo type was created by marrying the letters T and H together in the letterform of an abstracted goat. The goat is a good concept but the letter logo type works best. The goat is a mascot as a brand mark.
Gina C Design rebranding
67
Gina C Design rebranding
logo
Brand Specifics
How the mascot came to life!
69
Gina C Design rebranding
In order to maintain brand integrity a brand guideline was created, with specifics in regards to reproduction of logo marks. The Dos and the Don’ts
70
Brand Guide The color palette is not limited to the primary colors, so long as the icons and patterns stay within solid colors.
71
Gina C Design rebranding
Depressionist 3 revisited abcdefghijklmnopqrstuvwxyz 1234567890
Letterhead Gothic STD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Gina C Design rebranding
The primary target market would be milennials. The client’s customers have been fellow service members in the Navy, aside from civilians. T HANS brand is for bold people looking to make a statement.
personas
73
Tod Perez
Age 30 Machinest
Tod has a very loud personality. He has an energetic aura that he likes to express through football. -Supports locally owned black businesses. -Disabled veteran -Cultured
Anthony Frances
Tashina Chenko Age 25 Singer Tashina is on her way to becoming a viral sensation in the online music community. -Straightforward approach to life and her music. -Style is bold and fierce and trendy -Embraces urban culture
Age 38 Dispensary Owner
Anthony is a strong personality and is looking for a brand that stands out. He’s into bold and sporty styles. -Supports black owned businesses -Owns a dispensary himself. -Enjoys clothing with big bold logos, like Adidas, Gucci and Versace. Urban style. -Considers himself the GOAT of the Marjiuana industries and feels THANS Clothing Co represents his big claim to fame.
74
Gina C Design rebranding
storefront Although T. Hans Clothing Co is an online brand, I went ahead and designed store front material, just in case.
76
Gina C Design rebranding
shop
I present to you thansclothingco.com!
77
THINK goatness
78
package
The walls of the box are made of super thick chipboard. The outside is some soft touch wrapping paper. The molds are made of a heat molded polystyrene. Much like the iphone packaging, with magnetic flaps.
79
Gina C Design rebranding
Tags on clothing are made from hemp thread and card stock.
80
stationery Business cards are made from FSC-certified paper with a soft touch finish, like the box.
81
82
83
Marketing Marketing will take on the forms of magazine ads, billboards, social media posts, and videos of models.
Gina C Design rebranding
ephemera
Customers recieve free items with purchases, such as key chains, bandanas, socks, drawstring bags, temperature proof flask stickers, and pins.
Gina C Design rebranding
86
Gina C Design rebranding
88
Gina C Design rebranding
90
Gina C Design rebranding
San DiegoState University P rof. Min Choi The objective was to brand a social concept in the form of a campaign. Preserve Innocence is a movement for educators to include age appropriate training about consent to elementary schools and daycare. Educators will take a course and get a certification in order to participate. This program is aimed at teachers, daycare workers, and board of education members. Children are victimized and abused in the most vulnerable environments. Preserve Innocence would ensure that children learn what certain boundaries are in the
98
ART
learning environment. There is often oposition to this notion due to parents wanting to preserve the innocence of their children. This campaign finds the middle ground in order to ensure children are protected at the most vulnerable of levels and still able to maintain innocence. For ages many cultures teach children that they are expected to be on receiving or giving ends of affection. This sends the wrong message and only makes children more vulnerable. The change needs to start in early education.
Gina C Design preserve innocence project
Research Research was conducted to gather data proving that much of childhood sexual abuse occurs within environments that are at or closest to home. Defend Innocence is an organization that provides guides and training for parents to educate children on consent. The discrepancy is the lack
of guidance within the education system. If abuse could be happening at home, it is the responsability for the school system to ensure that children are recieving age appropriate training on consent. This is where Preserve Innocence was created.
100
Gina C Design preserve innocence project
Personas
Esther Smith,
28
Pre-school Teacher
sther works with children as young as two E years old. she believes this is the age where children need to learn important things like consent. At work she had to report an abuse case on one of the children she works with. She has committed herself to help by being active and volunteering for Preserve Innocence
Mylene Holeman,
34
Principal
As a survivor of sexual assault, Mylene seeks to find a way to educate children in the classroom in an appropriate manner. Mylene is aware that sometimes children are victimized at home and finds it very important to educate them on what’s right and wrong. She is a supporter of implementing this way of education into the elementary school system, because it’s best to educate early. She devotes her free time to activism and her community to fight against child sexual abuse and trafficking.
Rebecca Dozel 26, Mother Daughter Stella, 3 Rebecca wants to protect her daughter, Stella. She just doesn’t know how to go about it. She does not know where to start when it comes to teaching her tot consent. Rebecca divorced Stella’s father, who was very abusive. She only wants what’s best for Stella and is also a supporter of adding this program to the cirriculum.
102
Gina C Design preserve innocence project
The goal is to educate children, by providing guidance to to educators on how to teach children consent in a manner that is age appropraite. The theme would reflect the learning environment of pre-school to elementary. Saftey, trusted, colorful and playful, yet sophisticated.
Mood Board
Brand Attributes: Safe.Appropriate.Familial. Educational. Trusting. Honest. Protective.Innocent. Gentle
Sketches
This social campagne is more so for educators. The logo needed to be more sophisticated but at the same time, it needed to relfect some sense of trust, safety and a child like element. sketches were also compiled for website and ephemera, like tote bags and sationery that an eductor could use.
105
Design System
When I think of the concepts behind preserving innocence, symbols come to mind. The stick figure and circles represent the child. Symbols of education tend to be books, and apples. The design is minimal because it is primarely geared towards educators. Defend Inoncence and other saftey and educational programs have similar styles. Shades of blues, greens, and yellows.
Preserve
Innocence Shree Devangari 71
Typo Round Demo
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 168 pt
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 56 pt
107
108
Gina C Design preserve innocence project
Touch Points
Educators are given course materials and ephemera upon certification course entry. The kit incldues a tote, with course cd rom, certification cards, name tags, a notebook and a guide with in debth training materials required for testing prior to certification. Once the course is completed, educators will receive a certificate of course completion.
109
dot. org
Prototypes Gina C Design preserve innocence project
Illustrations
For your viewing pleasure I have included a collection of my illustrations. These are ideas bouncing
from my right brain to the screen. My day dreams. Your eye candy. My doodles. Your inspiration. Brought to you also by Procreate!
When I think of instagram models, curvature comes to mind. I can outline these beautiful forms. This is a body study. The charecter that comes with the different poses. I observed how many of the poses look similar. These are illustrations created in Procreate.
THE BODY 115
The female form is especially beautiful within many different poses.
116
Gina C Design illustrations
There’s a certain appeal to each facial expression. There are unspoken languages within the eyes. A photo can be worth a thousand words but the lines remind us of form.
BEAUTY
117
Gina C Design illustrations
VANITY Recognize any of them?
119
Gina C Design illustrations
122
Gina C Design illustrations
Fill & Stroke
123
Gina C Design illustrations
TOTE IT! My art can be applied to many things, such as tote bags.
125
Why
not?
Gina C Design illustrations
Dreams ...that’s what these totes are made of
129
Virus Downloadnig..... During this pandemic (COVID-19), with much time to spare, I illustrated the very thing that has been keeping the world locked inside. This is my way of breaking free.
Gina C Design illustrations
Gina C Design illustrations
These spores were made in Procreate. Using light pen effects and organic textures.
138
Gina C Design illustrations
141
Fine Art
I went on this dodoling kick. I was capturing movements and mannerisms. I am telling a story here. Do you follow?
143
145
Gina C Design illustrations
Gina C Design illustrations
Brought to you by... Gina C Design at San Diego State University Class of 2020 billboard.com pixabay.com pexels.com Procreate defendinnocence.org place-it.net Sketch Google Fonts dafont.com lynda.com pinterest.com nichollekobi.com thansclothingco.com online.rainn.org
149