PETER WANG // PORTFOLIO 2014
TABLE OF CONTENTS
WHALE, WHALE, WHALE, WHAT DO WE HAVE HERE?
INTRODUCTION Peter Wang is just a guy, you know?
YOPPI YOGURT REBRAND Store Identity Redevelopment
HEALTH EQUITY SERIES Health-Based Information Graphics
OPERATING MANUAL FOR SPACESHIP EARTH Contemporary Book Design
TO-DUEL LIST Quantified Self App Concept
THE DIGGERS Interactive Web Design
CTHULOOPS Conceptual Cereal Box
5 6 16 20 24 32 38
ABOUT PETER Peter 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 field. 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 Effects. He is still continuously seeking to 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. Initially, the logo took iteration before its final 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 offer quick, delicious, and energizing meals and I tried to incorporate that into the design of the logo.
SOFTWARE Adobe Photoshop CS6 Adobe Illustrator CS6 Adobe InDesign CS6
MAIN LOGO AND ALTERNATIVES
8
Yoppi Yogurt - Rebrand
Yoppi Blue
Chocolate Brown
COLORS AND FONTS
Strawberry Pink
Grand Hotel
ABCDEFGHIJKLMNOPQRSTUVWXYZ Grand Hotel
CMYK: 0% 50% 1% 0%
CMYK: 47% 13% 0% 0%
CMYK: 55% 67% 66% 57%
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789/?!@#$%^&*
RGB: 244 154 193
RGB: 127 187 230
RGB: 71 51 47
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789?!@#$%^&* 0123456789/?!@#$%^&*
Oswald Light
Oswald Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Oswald Bold 0123456789?!@#$%^&* ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789/?!@#$%^&*
Strawberry Low Fat
Yoppi’s Signature Strawberry Chocolate Low Fat Tart
Portfolio // Peter Wang
9
10 Yoppi Yogurt - Rebrand
BUSINESS CARD
Your Name
Your Name • • • •
CLOSED CARD Displays logo and name
3251 20th Ave, Ste 160 San Francisco, CA 94132 (415) 242-1092 yoppiyogurt.com yoppi.yogurt@att.net
OPEN CARD List addtional information such as address, number, website, and email.
Portfolio // Peter Wang
11
PACKAGING
12
Yoppi Yogurt - Rebrand
CLOTHING
Portfolio // Peter Wang 13
STYLE GUIDELINES
14 Yoppi Yogurt - Rebrand
PROCESS // LOGO CREATION
FIRST LOGO Originally, I wanted to create a character that loves eating frozen yogurt. The figure looked too shapeless and flat.
FIRST REVISION To fixed the first 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 REVISION The logo was completely redone to make it more dimensional. The composition of the logo felt too cramped.
FINAL LOGO By 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.
Portfolio // Peter Wang 15
SOFTWARE Adobe Illustrator CS6
HEALTH EQUITY health equity? To better understand the goal of Health Equity, is important understand what causes among groups HEALTH EQUITY AIMS TO ENSURE THAT ALL PEOPLE HAVE itFULL AND EQUAL to ACCESS TO OPPORTUNITIES THAThealth ENABLEdifferences THEM TO LEAD HEALTHY LIVES of people. Health Equity aims to eliminate Health Inequities and Health Disparities and create fair opportunties for health for all individuals.
WHAT WHAT is IS
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 fit a vast amount of information into each poster as well sticking to the current typefaces and colors used by the department.
In Marin, CA there is a 17-year life expectancy difference in just a few miles.
...are influenced by health inequities. Smoking, poor nutrition and lack of exercise are all behaviors that may lead to poor health.
Life expectancy for smokers is at least 10 years shorter than for nonsmokers. Smokers are 2-4 times more likely to develop heart disease than non-smokers.
Hispanic adults are less likely to recieve advice from a health provider to quit smoking than non-White Hispanic adults.
Access to quality healthcare is one ket in reducing inequities and disparities. But health is more than just disease or illness. The goal of Health Equity is to ensure that everyone can access their full health potential.
Health Inequities and Health Disparities affect how long someone will live.
Mortality
Chronic disease or injury is affected by health behaviors and genetics.
Disease or Injury
CAN LEAD TO...
...are differences in health that are avoidable, unfair and unjust and due to social, economic or physical advantages or disadvantages.
differences in health among specific groups of people that are unfair in a particular way. Health disparities are affected by...
WHAT HEALTH AFFECTSDISPARITIES ACHIEVING HEALTHARE... EQUITY
BRIEF: To create a series of posters identifying healthy equity and the issues surrounding the matter.
Portfolio // Peter Wang
17
18 HEALTH EQUITY POSTERS
Portfolio // Peter Wang 19
OPERATING MANUAL FOR SPACESHIP EARTH
SOFTWARE Adobe Illustrator CS6 Adobe Photoshop CS6 Adobe InDesign CS6 20 OPERATING MANUAL FOR SPACESHIP EARTH
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.
Portfolio // Peter Wang
21
22 HEALTH EQUITY POSTERS
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.
Portfolio // Peter Wang 23
TO-DUEL LIST
BRIEF: To-Duel List is an iOS productivity app based on the quantified 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 Quantified 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 Quantified Self movement was created to help track our daily lives whether for curiosity or health related issues.I designed my app with Quantified Self in mind, as well as combining what I learned throughout my research in class.
SOFTWARE Adobe Photoshop CS6 Adobe Illustrator CS6
NEW TASK PAGE To-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.
26 To-Duel List - Quantified Self App
MAIN SCREEN Users 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 notification with their points earned. This feature differs from other apps, as it has a self-evaluating virtual reward system.
RANDOM CHALLENGE Another 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 fight monsters with the characters and items earned through being productive. Have fun while being productive with your real life needs!
Portfolio // Peter Wang 27
SCREENS
PROFILE The profile screen borrows its statistics from traditional role-playing games. Each attribute reflects the type of tasks done, and in turn will grant you more power over each attribute.
Might Relates to physical activities such as exercising 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. Charisma Are social meetings and planned events.
28 To-Duel List - Quantified Self App
PROCESS
Portfolio // Peter Wang 29
THE THE THE DIGGERS DIGGERS 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 design. 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.
SOFTWARE Adobe Photoshop CS6 Adobe Illustrator CS6 HTML/CSS/Javascript Layar - Augmented Reality
30 Yoppi Yogurt - Rebrand
HOMEPAGE
JAVASCRIPT There is a dynamic navigation bar that follows you as you scroll down the webpage.
HOMEPAGE The homepage gives a history of the Haight and Ashbury Diggers.
32 The Diggers of Haight and Ashbury Website
HAIGHT-ASHBURY
HAIGHT AND ASHBURY The Haight and Ashbury Page shows a google map that takes you to historical locations of the neighborhood.
Portfolio // Peter Wang 33
LAYAR
LAYAR STICKER Users of Layar can scan the sticker with their smartphones to get links to the website as well as watch videos about The Diggers.
34 The Diggers of Haight and Ashbury Website
PROCESS
IDEATION Mood Board Portfolio // Peter Wang 35
SCHEDULE Timeline 36 The Diggers of Haight and Ashbury Website
BRAINSTORM Mindmap
Portfolio // Peter Wang 37
BRIEF: Create a “cereal� box concept. INTRODUCTION: Cthuloops is a portmanteu of Cthulhu (a fictional 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 final project consists of an isometric drawing and a physical cereal box with graphics on it.
SOFTWARE Adobe Photoshop CS6 Adobe Illustrator CS6
FRONT COVER
Portfolio // Peter Wang 39
BACK COVER
FUN TIP The maze is actually inescapable!
ESCAPE THE MAZE AND RECLAIM YOUR SANITY 40 Cthuloops Cereal Box
SIDES, TOP, AND BOTTOM COVERS BETTER IF USED BY:
LIFT TAB TO OPEN
THE RISE OF RY’LEH
Lovecraft’s® Cthuloops® endless oz.
Nutrition Facts Serving Size Unmentionable Servings 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 Unmentionables Horrors Total Cultists
Indescribable
Eldritch
Lurking
Unmentionable Madness
Many Infinite
Demonic
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.
NUTRITION FACTS The mock nutrtion label contains things like tentacles, insane whispers, crazed visions, as well as impending doom.
Comments? Questions? Call Weekdays at "Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn" to speak to a cultist today.
Portfolio // Peter Wang 41
ISOMETRIC
42 Cthuloops Cereal Box
Portfolio // Peter Wang 43
THANKS!