Brandbook Brand Identity, Guidelines and User Interfaces
1
2
.Lantern
.Lantern is the accumulation of a 9 month research and design process. It is intended as a portable product with worldwide appeal, that challenges the conventions of how we percieve and consume digital media. In order to create a viable and profitable product, the brand is essential establishing promising consumer base. The brand itself transcends the physical product and is an intangible asset adding to desirability. Consumer electronics; especially those in the portable sector, is in a transtion phase where high fashion influence meets technology in a hybrid aesthetic. The look and feel of the brand and the product strives to embrace this emerging trend .
3
Branding Guidelines Volume 1.
4
5
.Lantern 燈籠 (Dēng-lóng) Lanterns have a long history, and they have become a well-known symbol of light and guidance. They started out as a practicality and evolved into elaborate status symbols. Although there is no longer a practical need for lanterns, they are still made, used, and enjoyed. They continue to be a means of artistic expression, both in terms of functionality, design, and decoration. It may also be of note that the first type of image projector was coined ‘Laterna Magica’ in the 17th Century.
6
7
7
.Logo - Primary
20° x 17 copy rotations
8
.Logo - Secondary
The logo consists of the geometrical lattice roulette as well as the logo type. The bounding box is positioned and scaled the same width as the thickness of the roulette. Individual roulette can be used as background graphic on a page or as an individual logo when used in context with the graphic or product image. These logos should not be used alone on any promotional material, packaging or press release without any .Lantern logotype appearing elsewhere. The Chinese version of the font retains the same rules as the English version, and uses the same roulette logo in all formats. For more information as to how to use the logos in their various formats, please consult Atelier138 or get in contact with .Lantern.
9
Brand Values
Modern, E Trustwort 現代, 高雅, 守信, 創新
10
Elegant, thy, Creative
As a company that is targeting both eastern and western markets, it is important to denote trust in the excellence of the products for both sides of the world regardless of culture. China and surrounding markets are embracing westernised brands and ideals, and using similar brand assets will only serve to increase interest and trust into the brand.
11
11
Chinese consumers are increasingly using Chinese brand names when looking for brand information. If a company doesn’t give its brand a Chinese name, someone else will (clients, competitors, distributor, and counterfeiters). A Chinese name allows a brand to better build and maintain brand equity. A Chinese name, if well developed, can make the verbal identity linguistically appealing and tempting to the target market. The Chinese brand name is the local embodiment of the brand’s culture, values, personality, and vision. This is achieving a form of localization for the brand that helps it succeed. Finally, the exoticism of foreign names that used to appeal Chinese consumer is balanced by the risk of being perceived as a giant international brand that is distant from the Chinese consumer.
Vladimir Djurovic,2016
12
.Lantern Black Edition 2017 13
.Typography Freight Pro Medium - Titles and Logos ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvqxyz 0123456789
Freight Pro Book - Subheadings ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvqxyz 0123456789
Minion Pro Regular - Editorial copy ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h i j k l m n o p q r s t u v q x y z 0 1 2 3 4 5 6 7 8 9
Raleway Bold - Editorial copy AB C D E FG H IJ K LM N O PQ R STUVWXYZ a b c d e f g h i j k l m n o p q r s t u v q x y z 0 1 2 3 4 5 6 7 8 9
Raleway Regular - Editorial copy AB C D E FG H IJ KLM N O PQ R STUVWXYZ a b c d e f g h i j k l m n o p q r s t u v q x y z 0 1 2 3 4 5 6 7 8 9
14
.Structure
Heading 1
Colours used should reflect on defined colour palette, but headings can be white.
Heading 2
Tracking should be reduced for headings to create a neater look and sillouette of letters.
Heading 3 Body Copy
Body text can be any colour, but must be justified with last line aligned left on all editorial documents.
Freight Pro Medium - Titles and Logos ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h i j k l m n o p q r s t u v q x y z 0 1 2 3 4 5 6 7 8 9
Choosing a suitable typefaces is essential aspect of creating a highly visually orientated brand. The Lantern brand identity relies on two main typefaces, Freight Big Pro, Raleway and Minion Pro (body text) in order to build an effective identity as well as the distinctive and consistent typographical style that is used with intelligence and purpose throughout various mixed media and application. Drawing branding influence from high fashion editorial documents as well as high end british brands. The Asian market sees the traditional British look as an aspirational target and is an ideal look for denoting quality and trust. 15
15
.Colour Palette
16
Pantone 117-15c
Pantone 13-2c
Panton
RGB: 40 40 39
RGB: 221 210 192
RGB: 231
CMYK: 0 0 0 95
CMYK: 16 17 26 0
CMYK: 1
Black Marble
White Marble
Alumi (Various
ne 51-2c
Pantone 112-2c
Pantone 179-3c
1 215 212
RGB: 196 223 243
RGB: 218 218 218
11 17 15 0
CMYK: 27 5 0 0
CMYK: 0 0 0 20
inium Formats)
Neutral tones are used as the Lantern brand colors in order to express the adaptive nature of the product. The netutral tones also lend themselves to interior design environments and also remain gender neutral; eliminating any preconceptions about stark black consumer elctronic products. The colours are also associated with royalty, luxury and calming colors that exude harmonious balance, important in Far Eastern cultures. 17
18
19
.Editorial Layout and Content
Report and Press Release Documentation 20
Final Report Editorial Layout 21
22
Promotional Materials for trade shows and PR 23
23
User Interfaces
Lantern App. V1
24
.Going Wireless Content can be supplied wirelessly streamed through Wi-Fi connection using DLNA and Miracast, with Google Cast capabilities for popular Cast enabled apps such as Netflix, Youtube and BBC iPlayer. Localised content can be provided from the control device (smart phone or devices with HDMI output) or through storage media such as hard drives and controlled through the Lantern App separately.
The product is suitable for large and small range applications. Intel NUC small form factor computers are perfect companions for Lantern that represent a new workstation setup. This could be connected by HDMI 1.4 or via Miracast. Lantern incorporates a range of wireless technologies in order to ensure versatile and quality playback and usage of the projector. Low power Bluetooth 4.0, NFC, and Wi-fi Direct are also included for connection when a wireless internet enabled network is not enabled.
25
25
Pop-up mirror system allows for versatile throw projection
26
Using inflection and free-form surface mirror to induce ultra short throw 27
.App Flow
Download Lantern App
Set up network credentials
Need to use GoogleCast Enabled devices? No
?
Yes
Download GoogleCast
Netflix, Youtube, iPlayer etc
Set up network credentials
Has network connection to Lantern been verified? No
?
Yes
Full Access to Lantern
The Product relies on near wireless control from a wireless wi-fi enabled device; usually a mobile phone or tablet with internet access to the desired content. 28
Stream online content
Use GoogleCast and dedicated apps
GoogleCast streams directly to Lantern, freeing up smartphone for regular use even when streaming content
Playback controls via GoogleCast enabled apps
Need to control AV options? No
?
Yes
Use Lantern App Playing content that isn’t streamed from the internet. (Localised content from mobile device storage, or storage media plugged in directed to Lantern Projector
Control via Bluetooth or WI-Fi direct (if already connected) to control projector while content is playing
Need to control local playback options No
?
Yes
Use Lantern App
Wireless control is utilised even for offline content from the Lantern App using a dedicated media browser and controller. 29
.Iconography
30
.Typography
Open Sans Regular - Web and Screen based UI (Google) ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h i j k l m n o p q r s t u v q x y z 0 1 2 3 4 5 6 7 8 9
Roboto Regular - Web and Screen based UI (Google) ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h i j k l m n o p q r s t u v q x y z 0 1 2 3 4 5 6 7 8 9
Further design guidelines for iOS and Android can be retrieved from developer.apple. com and developers.google.com respectively 31
31
32
33
.Control via. GoogleCast and Lantern
GoogleCast can be downloaded on AppStore as well as Google Play Market. The smartphone acts as the controller for GoogleCast enabled apps such as Netflix, Youtube and BBC iPlayer. GoogleCast streams data straight from the internet, freeing up the mobile device to work independently from the projector.
34
The Lantern App is primarily a media browser that casts onto the Projector using the GoogleCast SDK. Again, because GoogleCast is being used, the data stream from the internet goes directly to the projector, freeing up processing power and minimizing battery drain.
The Lantern App can utilise bluetooth 4.0 and Wi-FI direct to control local media storage solutions into the projector. A flash drive containing a movie can be plugged into the projector, and the app can wirelessly navigate the on board media browser.
Through DLNA and MiraCast, computers and laptops can be cast through the Wi-Fi network to the projector. ChomeCast brower extension can also be used in this instance. The most stable connection is still via HDMI cable.
35
Proprietary App screens and layout reflects on the Google Developer Code for Google Cast, and follows conventions typical in media brower and media player apps. .Lantern App will be developed after application to Google SDK in order to create a Cast compatible app for control of localised content. 36
37
38
Online prescence is a key factor in driving the popularity and in turn, the sales of the product. Social media channels such as Instagram and Twitter embrace the visual nature of the brand and the product, and give direct access for potential consumers to enquire about the product. Web layout is a typical parralax scrolling website, common in many consumer electronic companies and online prescence.
39
Raymond Ng - 2016 ©
40