Dear Bear
Role - UI designer
Dear Bear is an e-commerce app shopping for soft toys.
The goal of the project was to applying an existing design system to my app and creating my own design system.
​
The challenge was to explore and understand the design principle of an existing design system, and to build a new system based on my own rules. The two design systems had to be applied in a new e-commerce app created by myself.
COLOURS
#F6F4F0
#000000
#FFFFFF
#F2B1A0
#AFAFAF
Background Colour
Header Navigation
Logo / Icons
Headings / Subheadings
Body Paragraph
Number
Header Navigation
Card Contents
Logo
Buttons
Cards
Icons
Buttons
Selected Text
Author’s Name
Icons
TYPOGRAPHY
Gill Sans
Itim
ICONOGRAPHY
The logo and icons in my design system are with the style of simple and clean. Black and white provide an obvious visual effect that makes users won’t ignore and follows the rules of simplicity.
​
Size: 20 x 20 pt
GRIDS
Page Size: 375 x 667 pt
4-column grids are appropriate for the pages divided in two parts and flexible for the components.
Home Bar
Buttons
Banner
Cards
Carousels
OUTCOMES
MY DESIGN SYSTEM
EXISTING DESIGN SYSTEM
Lightning Design System - lightningdesignsystem.com
CONCLUSION
In the process of creating my own design system and exploring exisiting system rules, I understood design principle and the practical use of UI patterns. The application of design system provides me the opportunity of deeper knowledge of aesthetic and visual structure.