2017 2019
Port
folio Visual Communication Design
Xinping Li
About Me I am Xinping
Li, graduated by San Francisco State University
in Visual Communication Design and specialized in graphic design, book design, and illustration. I have a great passion for design and illustration, and I believed that the combination of design and illustration could provide a better creativity way for each project. I care about the simplicity in design, make every project simple, unique, and expressive. I am always eager to learn some exciting and new skills, which can give me some inspiration into my artwork. If you’re curious about my work, interested in cooperating or would want to say hi, don’t hesitate to contact me! I hope all of you can enjoy my works!
Hello!
Education 2017
AA Arts in Humanities City College of San Francisco GPA 3.36/4
2019
Language English (Mandarin and Cantonese) Chinese
BS Visual Communication Design San Francisco State University GPA 3.5/4
Experience TA for Technical Drawing: Introduction to CAD, SFSU 2019 • Helping students in class with their project by using CAD Park(ing) Day Cafe Stop, SFSU 2018 • Participated in poster design and done photography for the event • https://cafe-stop.blogspot.com/ Dragon Papa Dessert, SFSU 2018 • Mainly focus on logo design, UX design, and website coding SF311 App, SFSU 2017 • Redesign the SF311 app for San Francisco residents and visitors by creating the new icon, logo, and UI for the whole app Nubi Yogurt, 1511 Sloat Blvd, San Francisco, CA 2016-2017 • Cashier • Performed store opening, closing and shift change actions Volunteer Project SHINE, City College of San Francisco 2016 • For coaching city college students in ESL citizenship, and literacy California Dragon Boat Association, 2014 • Helping children do coloring sheets, to creating arts and crafts
Skills Microsoft Applications Adobe Photoshop Adobe Illustration Adobe InDesign Adobe Lightroom Adobe XD Procreate HTML/CSS CAD
Contents 1
Book Design - Frankenstein
2
Typography - Meta - Green Tea
3
6
18 32
Poster Design - Integration
46
UI / UX Design 52 66
SF GO Dragon Papa Dessert -
Senior Project 74
5
The Other Side of the Window -
Illustration 88 90 92
4
Yellow & Black Little Green Portrait -
6
6
1
BOOK DESIGN Frankenstein
This book is a scientist Frankenstein who tries to create life artificially, but as a result of the monster who creates by him, receives a variety of discrimination and starts to revenge the human and Frankenstein. During the fight between them, they die at the end of the story. The purpose of this book design is to illustrate elements of themes in lines. The lines in this design will represent suture which the creator used for the monster and the time-line of each character. In the end, all the lines will be come together and disappear such as the sad ending of the story.
Skill InDesign Photoshop
7
Book Design 8
Inspiration
Color / Font
Garamond
#2540 8F
#DA4526
The colors in this book will be red, blue, black. The red represents the blood, monstrosity, and the fate of the monster. The blue represents the preciseness and tragic of the creator. The red and blue color will have a strong contrast in this book, which reveals the relationship between the monster and Frankenstein. The font family of this book is Garamond typefaces, which is a old-style serif typeface, offers elegance and readability.
Frankenstein
Header: Garamond Italic 28/25 Body: Garamond Regural 9/25 Quotation: Garamond Italic 11/50 Footer: Garamond Light 6/50
9
Book Design
Cover Concept
The concept of this book is by using line drawing to reveal the relationship of two main characters. 10
Back cover
Frankenstein
Front cover
11
Book Design
Layout Concept Trying to use the image plus text layout to present the inside book, which make a simple and clean layout design.
1
12
2
3
13
Frankenstein
Book Design 14
Inside Page Illustrations
This is the inside illustration page of my book, follow my main concept that I try to use the blue and red color to express two main characters. Also, my illustration style is line-drawing that I using the line to reveal their emotions and story theme.
15
Frankenstein
16
17
ME TA
2
Typography Meta
In this project, I tried to create an 8-pages booklet to introduce the font family “META.” I am designing different visual configurations based on individual page composition, contrast and sequential principles by placing five letter shapes per page in various sizes, heights, weights, styles, fonts, textures, and angles. The five letters I chose was “F,” “I,” “J,” “U,” and “T.” The concept of my project is playing four letters around the edge of the square as the central theme. Each page has a connection with each other. I separated each page in black and white style, which has a visual contrast effect.
Skill Adobe InDesign Adobe Illustrator 19
Typography
Design Research
Cover Page 20
Meta
Content Page 21
Typography
Size & Weight 22
Meta
Angle & Perspective 23
Typography
Value & Textures 24
Meta
Alphabet 25
Typography
Designer & Font 26
Meta
Type Specimen 27
28
Meta
Final Presentation
29
30
31
32
Green Tea
This project is a non-branding re-design. It reinforces the use of typographic design vocabulary, and it also develops fields such as hierarchy, spacial composition, and micro-typography. Letterforms are not only graphic design elements in terms of shapes and forms. Used together, they also build complex verbal communication and information system. In this project, I used green and yellow Pantone colors as the primary palette, and I tried to use the movement dashed line to connect and distinguish each content area.
Skill Adobe Photoshop Adobe Illustrator 33
34
Packaging Design
Inspiration
Color / Font
Roboto
Pantone 375C
Pantone 7548C
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Green Tea
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
35
Typography 36
Concept Design
37
Green Tea
38
Typography
39
Green Tea
Typography 40
Final Design
41
Green Tea
42
43
44
3
Poster Design Integration
For my theme, “Integration,� which means the action of incorporating the whole racial into a whole, and make people feel harmony and happiness when they see the poster. Therefore, I choose different happy colors to design my characters and fonts to spread the diversity of our society. Each character also has different gestures, which make it more vivid and dynamic. Also, I tried to use sans-serif and serif fonts into my poster and design them into 3D objects.
Skill Adobe Illustrator 45
Poster Design 46
Inspiration
The pictures inspire the sketches, and they give me a sense of composition of a poster and the style of characters.
Integration
Sketch
47
Poster Design
Concept Design
At first, I made some 2D illustrations from plain color palette to the colorful one. Then, I tried to use 3D letters for the poster that make more interesting. Also, it enhances the sense of perspective with excellent visual effect.
48
49
Integration
Poster Design 50
Final Presentation
51
52
4
UI/UX Design SF GO
The SF 311 app is a public service app for San Francisco residents and visitors to report community problems. For instance, the user can report the issue of homeless, graffiti, garbage or traffic on the app. In this project, I redesigned SF311 app for San Francisco residents to use. My goal is trying to redesign a simple function and similar to social media app for the audience users between 18-26. The users can share and give some feedbacks for each request in the app. Also, redesign the app is to attract more people to use and design a better, faster and efficient to use.
Skill Adobe Photoshop Adobe Illustrator Adobe XD
53
UI/UX Design 54
City Inspiration
Color / Font
Acumin Pro
#FFC95D
#428BC6
ABCDEFGHIJKLMNOPQRSTUVWXY Z abcdefghijklmnopqrstuvwxyz
SF GO
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
55
56
UI/UX Design
Persona
Design Process Pros and Cons
User Experience of the App
Compare with ohter five major city 311 apps
1
2
Product Breakdown
Take photo outside by personal
search online photograph about SF
Product Test Drive
Heuristic Evaluation
Observation and analysis
Organize and diagram the Personas
Explore look feel for the redesign concept
Mood Board
New three interviews
3
4
5
Personas
SF Landscape Research
Interview with three people about the user experience
Methodology
Secondary Interview Refinement questions Observation and analysis
Share with results in group and discuss
SF GO
15-20 screen shots the problems of the App
57
UI/UX Design
Sketches
This is my mind mapping and hand sketches for the user interface (UI) design. All the final designs are based on the sketches.
58
Icon & Logo Design Icon
SF GO
Logo
59
UI/UX Design
Before vs After Homepage Existing
60
The graphic design for the homepage of the SF 311 is boring and outdated. The color scheme is dull and plain. All the functions show up on the page.
Enhanced
Redesign the color scheme for the home screen and simplify the function of the app.
The calendar screen shows the San Francisco news and information. User can click any date to check for the information.
Request
There are too many requests on the screen. The main service headline is not bigger by comparing with other requests.
Enhanced
Simple submitting screen, there are only address and description.
Divide three main requests, city service, traffic, and street. Each main request has four minor requests.
SF GO
Existing
61
UI/UX Design
User Existing
The photos combine together, sometimes it is difficult to distinguish them.
62
Enhanced
Combining my requests and recent request in the same screen.
User can see the specific request, such as the request description, status of request, viewers, and comments.
Map & Setting
Only show up the personal requests.
Enhanced
User can click on the map icon to check for the community’s requests.
The general setting provides multiple languages, text size, and app storage.
SF GO
Existing
63
64
65
66
Dragon Papa Dessert
In this project, the owner asked for creating a traditional style website for the users, and he wanted to through the project to spread the tasty Chinese traditional handmade candy. In addition, we tried to use simple and clean layout to design our website, and we used orange and black as our main color palette.
Skill Adobe Photoshop Adobe Illustrator Adobe XD
67
Color / Font
#FEA700
#212124
EB Garamond ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
68
Logo Design
Color
Final Logo
Sketch
69
Wireframe
70
71
72
73
The Other Side of the Window 74
DES 505 | Professor: Mimi Sheiner | Xinping Li | Spring 2019
5
SENIOR PROJECT
The Other Side of the Window
A Chinatown is an ethnic enclave of Chinese people located outside mainland China. Areas are known as “Chinatown” exist throughout the world, including Europe, North America, South America, Asia, Africa, Australia, and Zealandia.
In this project, I did some researches and explored different visual communication design to disseminate the culture value of San Francisco Chinatown for travelers and the people who live or work in Chinatown.
Skill Adobe InDesign Adobe Photoshop Adobe Illustrator
The Other Side of the Window
My senior project is called “The Outside of the Window,” which is a project about San Francisco’s Chinatown and its rich cultural legacy.
75
76
Senior Project
Inspiration
Color / Font
Rajdhani
#1c1c 1c
#c b952c
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
The Other Side of the Window
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
77
78
Senior Project
Sketches
The Other Side of the Window
Refined Design
79
Senior Project
Materials & Technique Black Cardboard Paper: for black window frame Laser Cutting: By using laser cutting to create different pattern for the window frames.
Black cardboard paper
80
Laser Cutting
The Other Side of the Window
Working Process
81
82
83
84
85
86
87
Happy Yellow
Yellow & Black
Coffee Pot 88
6
Illustration Yellow & Black
89
Illustration
Little Green
Outside & Inside
90
Bath
91
Illustration
Portrait
Self-portrait 92
Kapok
93
Thank you!
Xinping Li Phone: 415-713-9486 Email: xli9@mail.sfsu.edu Behance: https://www.behance.net/xli174799e