Founded in 2014, Insta360 have sold millions of 360 cameras to hundreds of countries. We makes boldly innovative cameras, enabling people to better express creativity, fun and adventure.
According to our brand research, the people we serve are mostly athletes, creators, videographers, travellers and social media enthusiasts. We come to the conclusion that the design made for them should be clean, creative, high-tech feeling, and showing the great moments on their adventure.
With the rapid development of our company, we determine to standardize the use of the Insta360 brand and ensure the brand's integrity and consistency. We build up 9 consistent and scalable brand components, as well as making 20+ templates for core touch-points.
First of all, we redraw our logo with golden section method. Then, we define its mininum size, placement rules and co-branding rules. We also make samples of inappropriate use to help designers and partners using our logo appropriately.
We abstract out a circle shape and two rounded corner rectangles from the shape of lens, 360° images and our products. In the meanwhile, inspired by the transforming methods of the 360° images, we generate our patterns from the equirectangular projection and stereographic projection of a cube with lines.
We design a product font for all our product names. Besides, we chose Roboto and Noto which are available for internationalization as title & body font. We also define a typography method that combines bold and light font weight in one sentence to improve recognizability and design sense.
To maintain consistency in graphic design, we set up the way to calculate the type area: margins = 0.1 ~ 0.15 * page width ( 0.3 - 0.4 for some extreme length-width radio). We use this formula to make design templates, as well as defining position and size for the logo on them.
In order to standing out from other tech companies, especially those in the camera space, we keep using yellow color. Beyond that, we provide a group of gradient palettes, including gradient yellow and gradient grey, to make our design much more digital feeling.
As an imaging company, photography is of great significance. We set up principles for choosing or shooting photos and video, such as “The main body should be prominent, and the background should be simple”; “Show touching moments, like laughing, jumping, and splashing”; “Well-lit, and perfectly in focus”.
We provide a 48px grid, together with keyline shapes as icon drawing tools. Besides, we write down 12 suggestions for drawing icons, using 3px rounded-ending lines and seting 6px rounded corner on each 90° angle, for example.
We develop a modularized illustration system which separates the main body and the states like uploading, downloading, loading, notice, error, success, unknown. By combining those two parts, we can generate hundreds of illustrations for various situations.
By regulating duration, curves and choreography, we ensure consistency in UI transitions. And by making some special motion, slot machine for example, we establish a identifiable visual language.