Winter 2014 Portfolio

PETER WANG // PORTFOLIO 2014PORTFOLIO 2014

TABLE OF CONTENTSWHALE, WHALE, WHALE, WHAT DO WE HAVE HERE?

INTRODUCTIONPeter Wang is just a guy, you know?

HEALTH EQUITY SERIESHealth-Based Information Graphics

OPERATING MANUAL FOR SPACESHIP EARTH

Contemporary Book Design

THE DIGGERSInteractive Web Design

YOPPI YOGURT REBRANDStore Identity Redevelopment

TO-DUEL LISTQuantifi ed Self App Concept

CTHULOOPSConceptual Cereal Box

56

1620243238

ABOUT PETERPeter Wang is a Visual Communications Major at San Francisco State University. He was born and raised in the City of San Francisco.

Peter Wang is currently pursuing his bachelors in Visual and Communication Design at San Francisco State University. His early childhood history of working with arts and crafts helped steer him towards working in the graphic design fi eld. Peter’s decision to enter the Visual Communication Program peaked after taking photography and design courses at college.

During his studies at SFSU, he has gained many skills in sketching, color-work, Adobe Creative Suite such as Photoshop, Illustrator, InDesign, After E� ects. He is still continuously seekingto further improve and learn new art and design skills.

BRIEF: The goal for this project was to rebrand the café, bar, or restaurant as well as create new graphics and a logo for the business.

INTRODUCTION: The project required us to completely overhaul the identity of the restaurant by designing new logos, theme, merchandise, etc. Ini-tially, the logo took iteration before its fi nal stages. I wanted a logo that incorporated a mascot, as the initial logo was a plain text logo. I felt that it would draw in more of a crowd because it looked more fu and welcoming. The store’s mission is to o� er quick, delicious, and energizing meals and I tried to incorporate that into the design of the logo.

SOFTWAREAdobe Photoshop CS6Adobe Illustrator CS6Adobe InDesign CS6

Yoppi Yogurt - Rebrand8

MAIN LOGO AND ALTERNATIVES

Portfolio // Peter Wang 9

Grand HotelABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?!@#$%^&*

Oswald LightABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?!@#$%^&*

CMYK:55%67%66%57%

RGB:715147

Straw

berry

Pink

Yopp

i Blue

Choco

late B

rown

CMYK:47%13%0%0%

RGB:127187230

CMYK:0%50%1%0%

RGB:244154193

StrawberryLow Fat

ChocolateYoppi’s Signature Tart

StrawberryLow Fat

Grand HotelABCDEFGHIJKLMNOPQRSTUVWXYZGrand HotelABCDEFGHIJKLMNOPQRSTUVWXYZGrand Hotelabcdefghijklmnopqrstuvwxyz0123456789/?!@#$%^&*abcdefghijklmnopqrstuvwxyz0123456789/?!@#$%^&*abcdefghijklmnopqrstuvwxyz

Oswald LightABCDEFGHIJKLMNOPQRSTUVWXYZOswald LightABCDEFGHIJKLMNOPQRSTUVWXYZOswald Lightabcdefghijklmnopqrstuvwxyz0123456789/?!@#$%^&*

Oswald BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789/?!@#$%^&*abcdefghijklmnopqrstuvwxyz0123456789/?!@#$%^&*abcdefghijklmnopqrstuvwxyz

COLORS AND FONTS

Yoppi Yogurt - Rebrand10 Yoppi Yogurt - Rebrand10


Your Name Your Name• 3251 20th Ave, Ste 160 San Francisco, CA 94132• (415) 242-1092• yoppiyogurt.com• [email protected]

CLOSED CARDDisplays logo and name

OPEN CARDList addtional information

such as address, number, website,and email.

BUSINESS CARD


PACKAGING


CLOTHING


STYLE GUIDELINES


FIRST LOGOOriginally, I wanted to create a character that loves eating frozen yogurt. The fi gure looked too shapeless and fl at.

FIRST REVISIONTo fi xed the fi rst issue, I made a polar bear that was more easily noticed. I created more contrast between the colors. The logo felt too isconnected from the company’s image.

SECOND REVISIONThe logo was completely redone to make it more dimensional. The composition of the logo felt too cramped.

FINAL LOGOFINAL LOGOBy simplying and shrinking the backdrop of the logo, it made the character look more dynamic and not trapped inside the blue circle. “Yoppi Yogurt” was stylized to make it look more unique and friendly.

PROCESS // LOGO CREATION

BRIEF: To create a series of posters identifying healthy equity and the issues surrounding the matter.

INTRODUCTION: The Health Equity Department from San Francisco State University needed updates of their visual material. After much discussion, it was decided that three posters and a motion graphic was created to create awareness for their programs.The three posters were named “What is Health Equity”, “Health Inequity”, and “Health Disparities”.

This project had restrictions: the need to fi t a vast amount of information into each poster as well sticking to the current typefaces and colors used by the department.

SOFTWAREAdobe Illustrator CS6

Dis

ease

or

Inju

ryC

hro

nic

dis

ease

or

inju

ry is

af

fect

ed b

y he

alth

beh

avio

rs

and

gen

etic

s.

Smo

kers

are

2-4

tim

es m

ore

lik

ely

to d

evel

op

hea

rt

dis

ease

tha

n no

n-sm

oke

rs.

diff

eren

ces

in h

ealth

am

ong

sp

eci�

c g

roup

s o

f peo

ple

tha

t ar

e un

fair

in a

p

artic

ular

way

.H

ealth

dis

par

ities

are

affe

cted

by.

..

Acc

ess

to q

ualit

y he

alth

care

is o

ne k

et in

red

ucin

g in

equi

ties

and

dis

par

ities

. But

hea

lth is

mo

re t

han

just

dis

ease

or

illne

ss.

The

goa

l of H

ealth

Eq

uity

is to

ens

ure

that

eve

ryon

e ca

n ac

cess

thei

r ful

l hea

lth p

oten

tial.

CA

NLE

AD

TO...

heal

th e

quit

y?W

HAT is

HEAL

TH EQ

UITY

AIMS

TO EN

SURE

THAT

ALL P

EOPL

E HAV

E FUL

L AND

EQUA

L ACC

ESS T

O OP

PORT

UNITI

ES TH

AT EN

ABLE

THEM

TO LE

AD H

EALT

HY LI

VES

HE

ALT

H E

QU

ITY

WH

AT IS W

HAT

AFFE

CTS

ACHI

EVIN

G HE

ALTH

EQUI

TYH

EA

LTH

DIS

PAR

ITIE

S A

RE

...

To b

ette

r un

der

stan

d t

he g

oal

of

Hea

lth

Eq

uity

, it

is im

po

rtan

t to

und

erst

and

wha

t ca

uses

hea

lth

diff

eren

ces

amo

ng g

roup

s o

f p

eop

le. H

ealt

h E

qui

ty a

ims

to e

limin

ate

Hea

lth

Ineq

uiti

es a

nd H

ealt

h D

isp

arit

ies

and

cre

ate

fair

op

po

rtun

ties

fo

r he

alth

fo

r al

l ind

ivid

uals

.

Mo

rtal

ity

Hea

lth In

equi

ties

and

Hea

lth

Dis

par

ities

affe

ct h

ow

long

so

meo

ne w

ill li

ve.

Life

exp

ecta

ncy

for

smo

kers

is

at

leas

t 10

yea

rs s

hort

er

than

for n

onsm

oker

s.

His

pan

ic a

dul

ts a

re

less

like

ly t

o re

ciev

e ad

vice

fro

m a

hea

lth

pro

vid

er t

o q

uit

smo

king

tha

n no

n-W

hite

His

pan

ic

adul

ts.

...ar

e d

iffer

ence

s in

he

alth

tha

t ar

e av

oid

able

, unf

air

and

un

just

and

due

to

so

cial

, eco

nom

ic o

r p

hysi

cal a

dva

ntag

es

or

dis

adva

ntag

es.

...ar

e in

�uen

ced

by

heal

th in

equi

ties.

Sm

oki

ng, p

oo

r nu

triti

on

and

lack

of

exer

cise

are

all

beh

avio

rs t

hat

may

le

ad t

o p

oo

r he

alth

.

In M

arin

, CA

the

re is

a

17-y

ear

life

exp

ecta

ncy

diff

er-

ence

in ju

st a

few

m

iles.


HEALTH EQUITY POSTERS18


OPERATING MANUAL FOR SPACESHIP EARTH20

BRIEF: To design a book based on an interpretation of Buckminster Fuller’s manuscript, ‘Operating Manual for Spaceship Earth’.

INTRODUCTION: A semester-long project to practice our skills in typography, book layout, publishing, and printmaking. We learn how a book is engineered — and how we have to bring all our skills in design to create a physical product.

SOFTWAREAdobe Illustrator CS6

Adobe Photoshop CS6Adobe InDesign CS6

OPERATINGMANUAL

FORSPACESHIP

EARTH

Portfolio // Peter Wang 21Portfolio // Peter Wang 21

HEALTH EQUITY POSTERS22


Pull quotes emphasize the importance of a particular quote and break apart the text to rest the eyes. The same color goes throughout thechapter to create cohesion.

BRIEF: To-Duel List is an iOS productivity app based on the quantifi ed self and is inspired by roleplaying games.

INTRODUCTION: To-Duel List combines task management with the beauty of gaming elements that encourages the user to track and manage their daily life with their smart phone or tablet. The unmet user needs of having a fun task management program while keeping the functionality of a fully featured one is a complicated conceptual design. I think the hybridization of game and task management is important for my intended user group because it provides the user with a sense of familiarity and provides an incentive for newcomers of Quantifi ed Self apps to stick with it.

Overall, through this conceptual design for a smartphone, we learned the process of designing an app. I went through many iteration of ideas while experimenting with wireframes, audits, and research. The Quantifi ed Self movement was created to help track our daily lives whether for curiosity or health related issues.I designed my app with Quantifi ed Self in mind, as well as combining what I learned throughout my research in class.

SOFTWAREAdobe Photoshop CS6Adobe Illustrator CS6

TO-DUEL LIST

To-Duel List - Quantifi ed Self App26

NEW TASK PAGETo-Duel List also supports notes for individual tasks, repeated tasks for ease, alarms, as well as an “importance meter”. The meter is a unique feature of this app: tasks with high priority will appear higher on the list, as well as more frequent reminders for the user.

MAIN SCREENUsers can easily manage tasks by using swipe-to-clear as a way to streamline the process of completing tasks. Finishing a task will show a notifi cation with their points earned. This feature di� ers from other apps, as it has a self-evaluating virtual reward system.


RANDOM CHALLENGEAnother unique feature of To-Duel List is the use a roulette wheel of tasks. Users can either input their own tasks, or have a constantly updating selection of chores for them to take care of. In the realm of To-Duel List, random challenges net the users more points if they complete the task assigned to them.

ADVENTURE Travel through the dungeon and fi ght monsters with the characters and items earned through being productive. Have fun while being productive with your real life needs!

To-Duel List - Quantifi ed Self App28

PROFILEThe profi le screen borrows its statistics from traditional role-playing games. Each attribute refl ects the type of tasks done, and in turn will grant you more power over each attribute.

Might Relates to physical activities such as exer-cising and working out; Mind Covers areas of studying, reading, and other mental activities; Willpower Oversees repetitive chores like cleaning the house or watering the lawn.CharismaAre social meetings and planned events.

SCREENS


PROCESS


PROCESS


THE DIGGERS

THE THE THE THE DIGGERSDIGGERSDIGGERSDIGGERS

THE DIGGERS

BRIEF: My goal is to create an interactive website for people visiting the Haight-Ashbury area. The website is to draw attention to the lesser known histories of the district. The design of the website will be based on the idea of linking the past with the present, utilizing colors, design, and photography.

INTRODUCTION: The diggers were a legendary group based in the district of Haight and Ashbury. They emerged from two radical traditions of mid-1960s, the bohemian theatre groups and those that were involved in the civil rights and peace movement.

The project utilizes Layar, Google MyMaps, QR Code, and web de-sign. Using Layar, I made a campaign to help promote the website, as well as create direct links to other multi-media sources as well. Google MyMaps was used to connect the history to the present, allowing people to seek out historical places on their trip to the Haight. The project will also have a QR code because of its wider availability.


HTML/CSS/JavascriptLayar - Augmented Reality

The Diggers of Haight and Ashbury Website32

HOMEPAGEThe homepage gives a history of the Haight and Ashbury Diggers.

JAVASCRIPTThere is a dynamic navigation bar that follows you as you scroll down the webpage.

HOMEPAGE


HAIGHT AND ASHBURYThe Haight and Ashbury Page shows a google map that takes you to historical locations of the neighborhood.

HAIGHT-ASHBURY


LAYAR

LAYAR STICKERUsers of Layar can scan the sticker with their smartphones to get links to the website as well as watch videos about The Diggers.


PROCESS

IDEATIONMood Board


SCHEDULETimeline


BRAINSTORMMindmap

BRIEF: Create a “cereal” box concept.

INTRODUCTION: Cthuloops is a portmanteu of Cthulhu (a fi ctional monster from the Lovecraftian Universe) and Frootloops. Instead of going for a truly horror or monster-like approach to this project, I decided to make the cthuloops mascot more adorable.

The fi nal project consists of an isometric drawing and a physical cereal box with graphics on it.



FRONT COVER

Cthuloops Cereal Box40

ESCAPE THE MAZE AND RECLAIM YOUR SANITY

BACK COVER

FUN TIP The maze is actually inescapable!


Nutrition FactsServing Size UnmentionableServings per Container about 15

Amount Per Serving

Old Ones Cthulhu

% Daily Value*Total Tentacles 15g 4000%

Slithering 500%

Writhing 2000%

Stench Much smell

Pnakotic Manuscripts Many

Unmentionables Horrors In�nite

Total Cultists Indescribable

Eldritch Lurking

Unmentionable Demonic

Madness Abnormal amount

Not a significant source of Sanity, Hope, Well-Being and Dietary Fiber.

*Percent Daily Values (%DV) are based on a 2,000 innocent soul diet.

Ingredients: Tentacles, Elder Things, Ichor, Cosmic Evil, Flying Polyps, Haunting Horrors, Insane Whispers, Crazed Visions, Impending Doom, Colour Out of Space for freshness.

Comments? Questions?

Call Weekdays at

"Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn"

to speak to a cultist today.

BETTER IF USED BY:

THE RISE OF RY’LEH

LIFT TAB TO OPEN

Lovecraft’s® Cthuloops® endless oz.

SIDES, TOP, AND BOTTOM COVERS

NUTRITION FACTSThe mock nutrtion label contains things like tentacles, insane whispers, crazed visions, as well asimpending doom.

Cthuloops Cereal Box42

ISOMETRIC


THANKS!

Documents

Winter 2014 Portfolio