Visual Designer & Art Director
WORKS
WORKS
PREV
PREV
NEXT
NEXT
I
n
s
t
a
3
6
0
W
e
b
G
u
i
d
e
l
i
n
e
s
Project * 02
Info
Credits
illlusate - UI Design
Tools
Sketch
Date
March 2019
2 months
Category
UI design
Introduction

As Insta360 continues to grow, we are facing challenges in web design and development that come from our designers, developers, product managers, bosses and users. We are trying to maintain a balance among them and establish our web guidelines following the principles below:

Consistent
The first consideration we write the guidelines is to maintain consistency among Insta360 web products.
Flexible & Modular
The components should be atomic, versatile and can be easily recombined with others.
Creative
We still welcome new components and customization based on our visual foundation.
Visual Foundation

By defining the foundational elements, like colors, typography, layout method, icons, shapes and depth level, we ensure the consistency across our website and also establish a unique visual language for Insta360.

Colors
The colors and gradients are inherited and selected from our brand guidelines. we recommend using white, light grey and black to build up the whole page and keep yellow or other colors only for highlighting.
Typography
We thoughtfully write font fallbacks for Latin and CJK languages in the order of platforms, defining font color based on hierarchy, and setting a font scale table for h1-h6, body, caption, and buttons.
Icons
We share the same icon library with our brand guidelines and inherit the same icon grid and other drawing rules. Icons should be used in specific sizes, 24px, 16px, and 12px, on different components.
Depth
There are five levels of shadows we use to express depth relationships. Besides, we use three linear shadows to mimic non-linear decay in one single level of shadow to make it more realistic.
Layout
Graphic layout methods are not suitable for web design, so we set a 12 columns fixed-gutter grid and a 4px-grid as tools to place web elements. Page structure and clickable area are also in our layout decision tree.
Shapes
Windows or pages should be set up with the largest corner radius, the elements inside it with a smaller radius and the elements inside these elements with a much smaller radius. But buttons are all with 50% corner radius.
Components

We crafted 20+ components using nested symbols. Meanwhile, we defined component variations and common Interaction states. All components are easy to use and ready to go.

Samples

Our web guielines have been successfully applied on more than 10 web products, including BBS, Affiliate, Certification, Enterprise, Trade-up, etc.

P
r
e
v
i
o
u
s
Previous
N
e
x
t
Next