Web design components and styles for Insta360 website.
illlusate - UI Design
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:
The first consideration we write the guidelines is to maintain consistency among Insta360 web products.
Flexible and Modular
The components should be atomic, versatile and can be easily recombined with others.
We still welcome new components and customization based on our 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.
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.
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.
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.
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.
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.
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.
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.
Our web guielines have been successfully applied on more than 10 web products, including BBS, Affiliate, Certification, Enterprise, Trade-up, etc.
This is some text inside of a div block.