Page 1

The Book of

brand

s ta n d a r d s

visual

c o m m u n i c at i o n

impression


Even the largest avalanche is triggered by small things. ~Vernor Vinge


2

ta b l e o f c o n t e n t s

ta b l e o f c o n t e n t s definition

pa ges

2-3

pa ge

5

w h o w e a r e

pa ge

7

pa ge

9

pa ge

11

synonyms

&

a n t o n y m s

v i s i o n

i c o n o g r a p h y e v o l u t i o n o f t h e m a r k

process

&

s ta n d a r d

12-13

pa ges

14-15

o r i g i n

pa ges

16-17

r e a s o n i n g

pa ges

18-19

pa ges

20-21

f o u n d at i o n

&

&

pa ges

c u s t o m

c o l o r

pa ge

23

t h e n u m b e r s

pa ge

24

pa ge

25

m o o d

s e m a n t i c s

pa ge

l e t t e r f o r m s

pa ges

28-29

pa ges

30-39

p o s i t i o n i n g

27


ta b l e o f c o n t e n t s

t y p o g r a p h y

pa ge

41

av e n i r

pa ge

42

b a s k e r v i l l e

pa ge

43

using type

(on

screen)

pa ge

45

using type

(on

p r i n t )

pa ge

47

m a r k e t i n g s t r at e g y

pa ge

49

people

pa ges

50-51

objects

pa ges

52-53

the product

pa ge

55

pa ge

57

m o b i l e i n n o v at i o n s

pa ge

59

t h e t e a m

pa ge

61

c o l o p h o n

pa ge

63

in the field

3


defiintion

v.

(flâr) — To signal with a blaze of light for

signaling, illumination, or identification.

n.

(kõd) —

A system of symbols and rules used for transmitting messages.

definition

5


synonyms

flexible

agile, adjustible, extensible, impressionable, limber, adaptable, graceful, balanced stiff, brittle, clumsy

light

brilliant, clear, glowing, lucent, polished, shiny, vivid dark, dim, gloomy, obscure

augment(ed)

aggrandize, amplify, develop, enhance, extend, energize, progress degrade, belittle, disgrace

reality

actuality, authenticity, being, existence, object, presence, sensibility, tangibility, validity, verisimilitude falseness, death, fantasy

everywhere

all around, omnipresent, overall, ubiquitous, infinite nowhere, scarce, incomplete

&

antonyms

7


who we are

flexible

light

augmented

reality

everywhere

9


vision

As smart phones and other powerful mobile devices have become more common in the world, we’ve started to see the rise of services that use bar codes and QR codes (and other location-based technologies) to tie a virtual presence to a physical one.

What’s missing is a universally acceptable way of organizing content for the increasing variety of mobile devices in existence. To that end, Flare is designed to be a coherent set of tools and applications that will: • maintain a low barrier to entry -- We want to provide the end-user with an easy, free way to offer mobile-friendly content to anyone who might want to see it.

• foster social networking -- We want to see mediatedreality technologies (QR codes, Near Field Communication, Search Engines etc.) allow social networks to organically develop around the physical world.

• offer universal device support -- We want to let the user develop content once and have it display correctly on as many devices as possible via the Internet.

vision

11


iconography

iconography

13


14

evolution of

START

EMBOSSED

BEVELED

NEON

SMOOTHED

VIBRANT


the mark

LIT

SHADOW

OUTLINE

SOLID

evolution of the mark

DIMENSIONAL

FINISH

15


16

origin

sky and grasping for oasis. Wind and water pursue the peak of the flame with ease. At the pinnacle of our sight reveals conscience: the id,

ego and superego—or more

The Flare Code logomark simply our experience of the represents the flame’s humble inner, outer and center. To pursuit toward the sky: an be full of compassion, virtue impression

mimicked

by and happiness is to be aware,

human nature. Humans live empathetic and diligent. It is within two realms— physical the route by which the flare space and the ephermal mind. is completed so to allow us to Elements of physical existence see details from a far and that give form to the mark. Etched which is in the distance with by the outer circle— flooding clear vision. By being at the light, flowing water and center of a situation we can swirling winds rooted by make better decisions. It is vital human forces of nature what the people of the world comprise the flare symbol. need and it is the blueprint At the base of the symbol is for the Flare Code logomark the head of human force with that will illuminate the way to hands raised, holding up the collective compassion.

origin


f o u n d at i o n

f o u n d at i o n

17


18

process

fig. 1.0

fig. 1.1

fig. 1.2

fig. 1.3

fig. 1.4

fig. 1.5

process


reasoning

fig. 1.0

fig. 1.1 An outer circle establishes

A second circle, mimicking

the space in which the mark

the outer shell, produces an

inhabits. A circular shape

inner realm to represent our

allows it to sit evenly inside any

experience of environment

rectangular area. Circles are

within atmosphere. A third circle

used throughout the design as

appears due to gravitional pull.

a way of invoking awareness.

fig. 1.2

fig. 1.3 Stationed inside the inner

Ahead we see three courses

(third) circle exists conscience

of action: to record, to

and perception. The smaller,

contemplate, to be. The

lower circle is the head of our

wise flame acts in o n l y o n e

icon. Looking forward, it stares

d i re c t i o n . At the pinnacle,

into a world of wonder.

knowledge and experience work together harmoniously.

fig. 1.4

fig. 1.5 To see what is near from a

Centering lines diverge from the

distance and what is far in

highest point to either side

detail becomes key. From the

of the outer circle to arrive at

center of the triad of actions,

the midpoint and accomplish

information returns quickly to

two things— sha pe the flames

our hands. We look beyond

proportioning and leave us in a

appearance to make sure

smarter position. W ith refined

o u r thoughts are centered

sight we see a colorful world.

and next steps aligned.

reasoning

19


20

custom

Ask and you will receive. Custom icons represent our nurtured ideas of content descriptions through a collection of pictoral symbols. Custom icons well be avalible once we get the time to do them right.

custom


s ta n d a r d

Ever heard of standard practices? Well yeah, these are that. As we build new widgets we add the most universaly accepted version of icon that represents the feature so no confusion can arise.

s ta n d a r d

21


color

color

23


24

the numbers

C M Y K

64.5 0 100 0

R G B WEB

28 0 2 0

2 3 52 0

100 188 70

176 226 246

251 236 147

64BC46

B0E2F6

FBEC93

Use these colors naturally. Green identifies us. Use green when in doubt but appropriately. To use green too often dilludes our mystique. Blue is the people. When describing the actions of our users or if speaking too them, use blue. Yellow perspective is what the sun allows us. We treat yellow with the utmost care. Yellow is sometimes seen most often because we mark content and information as yellow. Always remember, if nothing else, that blue + yellow = green but green came before yellow.

the numbers

Note, all screen displays have a different way of creating colored light. These numbers work best on my machines and for print, but use your own judgement. If these colors happen to not look good on a screen you come across.


mood

25


semantics

semantics

27


28

letter

°The logotype’s purpose is to coexist with the logomark. °It was created with only the words flare and code in mind. °Curved lines imply constant awareness. *Seperated joints show movement. *Larger, connected shapes represent the ability to grasp. *They showcase how flexible each is as a medium.


forms

letterforms

29


As the third iteration of the Flare Code logotype— our letterforms are crafted with the idea of an exciting presence.


positioning

< With that in mindâ&#x20AC;&#x201D; the next few pages are representations of various positions the Flare Code logotype letterforms were crafted to take. >

positioning

31


32

positioning

simple


positioning

discrete

33


34

positioning

epic


positioning

c i n e m at i c

35


36

positioning

casual


positioning

calm

37


38

positioning

here


positioning

now

39


í Ì ì Ï õï ÎÕ î Ñô ñÔÓöóÖÒòòÒÖóöÓ ÔñôÑ ÕîõÎ ï Ï ì Ì í

ÚúÙùÜüÛûŸÿ ÿŸûÛüÜùÙú

, : ; ‘- ”_”¿”¡ ?’ !‚.„. .. .„. ‚! ? ’¡ ”¿ _” -” ‘ ; : ,

&?§˜ *ˆ ¨†´@ ®© ] `†´ *¨ ˆ§˜ ? ` ] )•}«{ ‹( ›[ »™ ©™ ® »[› (‹{«}•)@

% ‰ ° ª º·/÷ ^ µ< ~> =+ ±± += >~ < ^µ÷/·º ª ° ‰


give us based on how legible and enjoyable our words speak to them. Typography is critical in this relationship.

The fonts we use for print are Avenir and Baskerville. The contrast is necessary to subtly reflect our intention of any given message. For our online matter it would be ideal to use Avenir and Baskerville, but due to limitations a font recognizable by the widest array of browsers becomes the factor by which our decision must be made. So a font such as Arial or Verdana will be used since it can be accessed by browsers globally.

typography

41

AÆBCD JK NC B Æ NEMFLGKH J IIH GLFM ED

the capacity of attention a viewer is willing to

OŒØPQ RXS W TU VT WSXR Y ZY VU QZP Ø Œ

a æ b c d e f g hni imj kl kl m j i ni h g f e d c b æ

o œ ø p q r s ß tzuyvxwwxvyuzt ß s r q p ø œ

0 1 2 3 4 5 6 7#8¥9£€¢$$¢€£9¥8 # 7654321

Á áëÀ Ë àèÄ È äéÅ É åç Â Ç âãà ÃãâÇÂçåÉÅéäÈÄè àËÀë Ê áê

The fonts we use are important. It determines

typography


42

avenir

. , : ; ‘”””’ ‚„...!?¡¿_-

&§*†@•«‹›»®©™ [({})]`´¨ˆ˜??°¸???

Avenir Avenir Avenir Avenir Avenir Avenir

%‰°ªº/ µ<>+±=~^÷·

ÚúÙùÜüÛûŸÿ

ÍíÌìÏïÎîÑñÓóÒòÖöÔôÕõ

ÁáÀàÄäÅåÂâÃãÇçÉéÈèËëÊê

0123456789€$¢£¥#

oœøpqrsßtuvwxyz

aæbcdefghiijklmn

OίPQRSTUVWXYZ

AÆBCDEFGHIJKLMN

u s e av e n i r f o r p r e s e n t i n g

Avenir is a geometric sans-serif typeface de-

organic, humanist interpretation of these highly

signed by Adrian Frutiger in 1988, and released

geometric types. While similarities can be seen

by Linotype GmbH, now a subsidiary of Mono-

with Futura, the two-story lowercase a is more

type Corporation.

like Erbar, and also recalls Frutiger’s earlier

The name Avenir is French for “future,”

and takes inspiration from early geometric sansserif typefaces Erbar (1922) designed by Jakob Erbar, and Futura (1927) designed by Paul Renner. Frutiger intended Avenir to be a more

namesake typeface Frutiger.


baskerville

43

&§*†@•«‹›»®©™ [({})]`´¨ˆ˜??°¸???

%‰°ªº/ µ<>+±=~^÷·

Baskerville Baskerville Baskerville

Baskerville is a transitional serif typeface designed in 1757 by John Baskerville (1706–1775) in Birmingham, England. Baskerville is classified as a transitional typeface, positioned between the old style typefaces of William Caslon, and the modern styles of Giambattista Bodoni and Firmin Didot. The Baskerville typeface is the result of John Baskerville’s intent to improve upon the types of William Caslon. He increased the contrast between thick and thin strokes, making the serifs sharper and more tapered, and shifted the axis of rounded letters to a more vertical position. The curved strokes are more circular in shape,

. , : ; ‘”””’ ‚„...!?¡¿_-

ÚúÙùÜüÛûŸÿ

ÍíÌìÏïÎîÑñÓóÒòÖöÔôÕõ

ÁáÀàÄäÅåÂâÃãÇçÉéÈèËëÊê

0123456789€$¢£¥#

oœøpqrsßtuvwxyz

aæbcdefghiijklmn

OίPQRSTUVWXYZ

AÆBCDEFGHIJKLMN

u s e b a s k e rv i l l e f o r s t o r y t e l l i n g

and the characters became more regular. These changes created a greater consistency in size and form. Baskerville’s typeface was the culmination of a larger series of experiments to improve legibility which also included paper making and ink manufacturing. The result was a typeface that reflected Baskerville’s ideals of perfection, where he chose simplicity and quiet refinement. His background as a writing master is evident in the distinctive swash tail on the uppercase Q and in the cursive serifs in the Baskerville Italic. The refined feeling of the typeface makes it an excellent choice to convey dignity and tradition.


on screen

using type

(on

screen)

45


on print

using type

(on

print)

47


marketing

marketing

49


48

musicians

tour guides

r e a lt o r s

artists

promoters

publishers


people

O

ur marketing strategy involves talking to people.

Weâ&#x20AC;&#x2122;ve discovered our audiences have felt the benefit of spending their time and energy using our software to produce a mobile website for themselves. Our vertical pages are a series of websites (available from our homepage) that correlate to a specific person. These pages will be channeled through the venues where each niche industry reside in order to give a unique and personal solution that is right for the individual.

people

51


50

poster

d i s p l ay

sign

ta g

booth

article


objects

W

e are a species of tools. Through our objects

speaks a language of our work and what we stand for. Connecting Flare Code mobile websites to the physical places and objects they identify makes the content within the site relevant, opportune, and rewarding. To make better decisions we must be informed. Placing the right information at the moment of curiosity is paramount. This is integral for Flare Codeâ&#x20AC;&#x2122;s mission of helping businesses and individuals participate in the possibilties of emerging mobile technologies.

objects

53


T h e p r o d u c t i s p o s s i b i l i t y.

Choose a color scheme, upload a banner image, and switch up the background to make the site look like you. Sharing the site and commenting on the content is emphasized and encouraged so viewers can spread their love of you. Feeds of content flow into your mobile-friendly site from anywhere online meaning you can be assured viewers are discovering the most recent information from you.


the product

the product

55


using mobile

in the field

57


58

the future

QUICK RESPONSE (QR) CODES

NEAR FIELD COMMUNICATION (NFC)

IMAGE RECOGNITION

UNIFORM RESOURCE LOCATER (URL)

LOCATION–BASED SERVICES

types


of now

The list to the left identifies various ways of reaching information on the Internet. All are important because they are the connection between the physical and digital worlds. More information can be found online about these tools. I suggest searching Wikipedia for an overview that hasnâ&#x20AC;&#x2122;t been bastardized.

Stay tuned for a robust explanation of how our customers are using and benefiting from these mobile innovations and the Flare Code software.

m o b i l e i n n o v at i o n s

59


thank you

The story of Flare Code is ongoing. This book is two years of persistence, invention, admiration, collaboration, passion, and never quiting. This guide hopes to imploy a professional manner for the Flare Code family to be proud of. A manner that will impress the old and excite the young. We are more than mobile websites. We are helping people communicate.

°Thomas Baker° °Matt Bertoni° °Gilbert Clark° °Michael Cleaver° °Ian Bowman-Henderson° °Corey Hutton° °Ilya Kogan° °Anthony Mannira° °Niklos Salontay°

w h at w e ’ v e l e a r n e d

61


°This book was designed for the internal use of Flare Code employees. °It may be shown to any outside company or individual with discretion given by any Flare Code employee. °Designed by Anthony Mannira with pivotal guidance from Sherry Blankenship. °Used Avenir as the main typeface and occasionally using Baskerville here and there. °Printed at MinuteMan Press in Athens, OH.

© FLARE CODE 2012


colophon

colophon

63


The Book of Flare Code  

Visual Identity booklet for Flare Code Inc.

Read more
Read more
Similar to
Popular now
Just for you