COLLISION / A COLLECTION OF WORKS
COLLISION / A COLLECTION OF WORKS
THE COLLISION OF CULTURES, THOUGHTS AND TECHNOLOGIES FUSED INTO GREAT DESIGN.
TABLE OF
CONTENTS [ PROJECT 01 ] DISPELLING THE MYTHS ABOUT CHINESE KUNG FU Branding: 8Trigrams
001
[ PROJECT 02 ] BREAKING BOUNDARIES Design Conference
023
[ PROJECT 03 ] PLAYING WITH PURPOSE Hasbro CSR Report
047
[ PROJECT 04 ] VIVA LA VIDA Lapalette Website
061
[ PROJECT 05 ] MYSTERIES WITHOUT ANSWERS Dream State Posters
075
01
PROJECT / BRANDING: 8TRIGRAMS
PROJECT / 01 / 02 / 03 / 04 / 05
DISPELLING THE MYTHS ABOUT CHINESE KUNG FU. [ PROJECT ] Branding: 8Trigrams [ CATEGORIES ] Branding Promotional Design Web Design [ KEYWORDS ] Enlighten Unveil Instructive [ COURSE ] Visual Thinking [ INSTRUCTOR ] Hunter Wimmer [ YEAR ] Summer 2018
[ OBJECTIVE ] Create different media solutions for a topic of investigation. Demonstrate problem-solving and branding skills in a cohesive visual system, which makes the deliverables work individually while closely related. [ APPROACH ] I designed four solutions to gain people a better understanding of Chinese kung fu. The posters make a brief introduction to the content and aim of the topic. The following website allows people to learn more about the topic and presents a channel for event registrations. The interactive event gives people a deeper impression and understanding of the topic, and people may be gifted with a unique souvenir for participation in activities. The booklet displayed during the event is purposed to spread the detailed project-related knowledge to the general public. In order to present the enlightened, unveil and instructive concepts of the brand, I applied the representative element of Chinese culture—inks, the illuminating yellow and a dynamic combination— the stagger of kung fu masters and silhouettes to create the impression of Chinese kung fu. When these elements were integrated with the titles to demonstrate the essentials of Chinese kung fu, a strong, engaging and cohesive visual system was established.
01 / 02
COLLISION / XIAOQIAN LI
PROJECT / BRANDING: 8TRIGRAMS
PROJECT / 01 / 02 / 03 / 04 / 05
03 / 04
COLLISION / XIAOQIAN LI
PROJECT / BRANDING: 8TRIGRAMS
PROJECT / 01 / 02 / 03 / 04 / 05
05 / 06
PROJECT / BRANDING: 8TRIGRAMS
PROJECT / 01 / 02 / 03 / 04 / 05
11 / 12
COLLISION / XIAOQIAN LI
13 / 14
PROJECT / BRANDING: 8TRIGRAMS
PROJECT / 01 / 02 / 03 / 04 / 05
15 / 16
PROJECT / BRANDING: 8TRIGRAMS
PROJECT / 01 / 02 / 03 / 04 / 05
17 / 18
COLLISION / XIAOQIAN LI
PROJECT / BRANDING: 8TRIGRAMS
PROJECT / 01 / 02 / 03 / 04 / 05
19 / 20
COLLISION / XIAOQIAN LI
02
PROJECT / DESIGN CONFERENCE
PROJECT / 01 / 02 / 03 / 04 / 05
BREAKING
BOUNDARIES. [ PROJECT ] Design Conference [ CATEGORIES ] Conference Materials Design Web Design App Design [ KEYWORDS ] Integrative Engaging Innovative [ COURSE ] Type Systems [ INSTRUCTOR ] John Nettleton [ YEAR ] Fall 2018
[ OBJECTIVE ] Redesign a series of promotional materials for a conference. Demonstrate typography skill in a flexible visual system, which conforms to the aim and needs of the design conference. [ APPROACH ] Conventional conference promotional materials include a poster to brief on the conference, the date, venue and the speaker list; A programme to make the detailed introductions, schedules and the information about the speakers; The signage and ID cards as a guide for the participants; The website and app for viewing of all the above and provision of ticketing channels. In order to present the integrative, engaging and innovative concepts of the conference, I applied a variety of printed elements and web design elements as inspirations to represent the traditional design and the design of the technology era. When the two were connected through the dynamic, stretched pattern and the glitch effect title, the concept of “breaking boundaries� was materialized.
23 / 24
COLLISION / XIAOQIAN LI
PROJECT / DESIGN CONFERENCE
PROJECT / 01 / 02 / 03 / 04 / 05
27 / 28
COLLISION / XIAOQIAN LI
PROJECT / DESIGN CONFERENCE
PROJECT / 01 / 02 / 03 / 04 / 05
31 / 32
COLLISION / XIAOQIAN LI
PROJECT / DESIGN CONFERENCE
PROJECT / 01 / 02 / 03 / 04 / 05
39 / 40
COLLISION / XIAOQIAN LI
PROJECT / DESIGN CONFERENCE
PROJECT / 01 / 02 / 03 / 04 / 05
41 / 42
COLLISION / XIAOQIAN LI
PROJECT / DESIGN CONFERENCE
PROJECT / 01 / 02 / 03 / 04 / 05
43 / 44
COLLISION / XIAOQIAN LI
PROJECT / DESIGN CONFERENCE
PROJECT / 01 / 02 / 03 / 04 / 05
45 / 46
03
PROJECT / HASBRO CSR REPORT
PROJECT / 01 / 02 / 03 / 04 / 05
PLAYING WITH PURPOSE. [ PROJECT ] Hasbro CSR Report [ CATEGORIES ] Book Design [ KEYWORDS ] Insightful Engaging Innovative [ COURSE ] Type Systems [ INSTRUCTOR ] John Nettleton [ YEAR ] Fall 2018
[ OBJECTIVE ] Redesign the Corporate Social Responsibility report of Hasbro. Demonstrate layout skills and infographic transformation ability in a diverse while consistent way, which is compatible with the image of the brand and the message that the brand is intended to convey. [ APPROACH ] In order to present the insightful, engaging, and innovative concepts of Hasbro, I extracted colours, characters and other elements from its products as inspirations to create the impression of the brand. When all of the above-mentioned elements were integrated with the most classic work of Hasbro—Monopoly, the brand tagline and the arrow on the cover, Hasbro’s recognizable image and the storytelling message they have always conveyed were at a glance.
47 / 48
PROJECT / HASBRO CSR REPORT
PROJECT / 01 / 02 / 03 / 04 / 05
49 / 50
COLLISION / XIAOQIAN LI
5
4 2
1
3
PROJECT / HASBRO CSR REPORT
PROJECT / 01 / 02 / 03 / 04 / 05
55 / 56
COLLISION / XIAOQIAN LI
PROJECT / HASBRO CSR REPORT
PROJECT / 01 / 02 / 03 / 04 / 05
57 / 58
COLLISION / XIAOQIAN LI
PROJECT / HASBRO CSR REPORT
PROJECT / 01 / 02 / 03 / 04 / 05
59 / 60
04
PROJECT / LAPALETTE WEBSITE
PROJECT / 01 / 02 / 03 / 04 / 05
VIVA LA VIDA. [ PROJECT ] Lapalette Website [ CATEGORIES ] UI / UX Design [ KEYWORDS ] Appealing Smooth Convenient [ COURSE ] Principles of UX [ INSTRUCTOR ] Shelley Anderson [ YEAR ] Fall 2018
[ OBJECTIVE ] Redesign the website of Lapalette. Demonstrate layout, reorganization and research skills in a user-friendly interface, which is compatible with the image and needs of the brand. [ APPROACH ] The design consists of two parts. One is the desktop-based design, and the other is the mobile device-based design. They share the same contents, but the approach to presenting them has been modified to be consistent with the characteristics of different devices and user habits. They also reflect the responsive design. In order to create an appealing, easy-to-use website, the problems of the original website were analysed, the products were reclassified, and the obvious errors were rectified to eliminate the factors that hinder the user’s shopping process. The layout of the web pages was revamped to enhance the aesthetics and practicality of the website; The user research and competitive research were conducted to improve the design that does not conform to the user’s habits and add user-friendly features. A series of research strategies, wireframe modifications, tests and feedback assisted with the finalization of the design.
61 / 62
COLLISION / XIAOQIAN LI
PROJECT / LAPALETTE WEBSITE
PROJECT / 01 / 02 / 03 / 04 / 05
63 / 64
COLLISION / XIAOQIAN LI
PROJECT / LAPALETTE WEBSITE
PROJECT / 01 / 02 / 03 / 04 / 05
65 / 66
LAPALETTE — DESKTOP SITE COLLISION / XIAOQIAN
LI
FINAL PROJECT WORKFLOW ANALYSIS
www.lapalette.us/
Home Page | Category Overview | Star Pick Page | Product Details | Cart Overview | About Us
Search Bar
Yes
Category Overview
Add to Cart
Product Details
Cart Overview
User is looking for a particular product
Homepage
Yes
Star Pick Page
Recommendation
No
Existing Page
g
pin
hop
es
inu ont
C
User has a choice
Yes
No User is looking in a specific product category
New Page
Checkout User Choice
Button
User selects a subexperience
No
XIAOQIAN LI / GR 606 PRINCIPLES OF UX / FALL 2018 / ASSIGNMENT 9.1
PROJECT / LAPALETTE WEBSITE
PROJECT / 01 / 02 / 03 / 04 / 05
69 / 70
COLLISION / XIAOQIAN LI
PROJECT / LAPALETTE WEBSITE
PROJECT / 01 / 02 / 03 / 04 / 05
71 / 72
COLLISION / XIAOQIAN LI
PROJECT / LAPALETTE WEBSITE
PROJECT / 01 / 02 / 03 / 04 / 05
73 / 74
05
PROJECT / DREAM STATE POSTERS
PROJECT / 01 / 02 / 03 / 04 / 05
MYSTERIES WITHOUT ANSWERS. [ PROJECT ] Dream State Posters [ CATEGORIES ] Poster Design Experimental Fonts Video Production
[ OBJECTIVE ] Create a set of movie posters and a movie trailer based on the combination of experimental fonts and a dream/movie. Demonstrate creative thinking, exploration, manual, photography and editing skills in an experimental process, which ends up unifying the styles of the deliverables and expresses the feeling of the dream/movie in a precise way.
[ KEYWORDS ] Mysterious Scary Hazy
[ APPROACH ] Through a series of explorations, my experimental fonts ended up being made out of shrinkable films. This material is solid and waterproof, thus allowing for flexible interaction with other materials.
[ COURSE ] Type Experiments
My dream/movie was based on Stephen King’s legendary tale of terror—The mist. In order to express the mysterious, scary, and hazy feeling, I combined the experimental fonts with hairnet, fog maker, different light sources and dust to restore the classic scenes in the film. Different light sources were utilized to create diversified scenes while maintaining the consistency of the sets. The pure white background created by the global light imitated the fog and expressed the mysterious feeling. The point light imitated the searching and rescuing scene in the forest. The flash light shining on the dusty window sill mimicked the scene of trapping in a spider’s web and presented a sense of fear and helplessness. In the movie trailer, these scenes were integrated with thrilling music, clear drumbeats, the light and shade changes in the scene and the movement of the spotlight, which displayed the increasingly tense atmosphere in a more vivid way.
[ INSTRUCTOR ] David Hake [ YEAR ] Spring 2019
75 / 76
COLLISION / XIAOQIAN LI
PROJECT / DREAM STATE POSTERS
PROJECT / 01 / 02 / 03 / 04 / 05
77 / 78
COLLISION / XIAOQIAN LI
PROJECT / DREAM STATE POSTERS
PROJECT / 01 / 02 / 03 / 04 / 05
81 / 82
COLLISION / XIAOQIAN LI
PROJECT / DREAM STATE POSTERS
PROJECT / 01 / 02 / 03 / 04 / 05
83 / 84
COLLISION / XIAOQIAN LI
PROJECT / DREAM STATE POSTERS
PROJECT / 01 / 02 / 03 / 04 / 05
85 / 86
PROJECT / DREAM STATE POSTERS
PROJECT / 01 / 02 / 03 / 04 / 05
87 / 88
COLLISION / XIAOQIAN LI
PROJECT / DREAM STATE POSTERS
PROJECT / 01 / 02 / 03 / 04 / 05
91 / 92
SPECIAL
THANKS TO [ FAMILY ]
[ INSTRUCTORS ]
My Grandma, My Parents, My Brother, My Sister-in-law.
Sandra Isla, John Nettleton, Samantha Perkins, Hunter Wimmer, Andrew Loesel, Shelley Anderson, Bob Slote, Chantelle Ferguson, Phil Hamlett, David Hake, Jeremy Stout, Yongkai Wu, Haihui Xiong, Hanxuan Zhang.
[ FRIENDS ] Kunli Zhang, Nan Feng, Yuqing Gong, Yan Zhao, Ruonan Wang, Xuan Li, Ruonan Li, Yuyuan Wang, Hesen Zhao, Bokai Liu, Xuxin Deng, Can Wang, Tino Wu, Miya Wang, Dian Pang, Hayden Kim, Miko Wang, Doris Lin, Penny Xu, Xinran Gao, Candice Zeng.
[ ROOMMATES ] Kun Yang, Jingsi Wang, Zheng Lu, Dan Li, Xin Li, Acelynn Zhao.
[ NAME ] Xiaoqian(Una) Li [ PHONE ] +1 (415) 632-8635
[ SCHOOL ] Academy of Art University 79 New Montgomery Street San Francisco, CA 94105
[ WEBSITE ] unalidesign.com
[ PROGRAM ] School of Graphic Design and Digital Media
[ EMAIL ] una384@163.com
[ COURSE ] MA Portfolio Seminar
[ PHOTOGRAPHY ] Xiaoqian(Una) Li Pixabay Flickr
[ INSTRUCTOR ] Jeremy Stout
[ ILLUSTRATION ] Betsy Heron Rawpixel SVG Silh [ TYPEFACE ] Balboa Poynter Oldstyle Proxima Nova [ BINDERY ] Chum’s Design & Print
[ COPYRIGHT ] © 2019 Xiaoqian(Una) Li All rights reserved.
UNALIDESIGN.COM / GRAPHIC DESIGN / 2017–2019