Craft no.
18

BMAD.
Brand identity

α. Concept. β. Brand identity: Identity system. Graphic system. Application usage. Website.
Jul - Oct 2018
Enjoy

BMAD is a young company that is growing exponentially in a fast-moving environment. We produce a wide variety of AR & VR projects. We are mad about technology, we are mad about future reality and we are looking for creative people with the same enthusiasm for new technologies to join our team.

BMAD Montreal studio leverages its expertise in the development of interactive mobile applications and in creating augmented reality and virtual reality (AR & VR) experiences.

Table of contents:

Identity system

Graphic system

Application usage

Website

Identity system

Logo

The logo symbolize dynamic, growing, developing organization (left to right). The shape based on triangle symbolize stability, in material word most stable object has three points of ground contact.

This look lends itself to a new era, taking a bold and modern typographic approach to match ever-growing brand.

The previous logo was constructed from four bold, uppercase letters of same size - BMAD, using one of the popular types, where the first letter B was placed in dark orange circle and used white color for better contrast with the dark orange. The other three letters used grey color. The circle with B and other three letters share same clear spacing, thus the B was emphasized - Be: Be mad, Be innovative, Be creative, Be unique... White B in dark orange circle also used like icon - separated from the rest of the construct, this element was used where small size of the logo needed.

Logotype

Icon

The icon is a first letter of the logotype. Mainly in use on small canvases and for small icons.

Icon

Construction

The development of the logo can be seen in its construction.

As the logotype is solely in lowercase letters, the x-height is its most important feature. Hence the x-height of the "bmad" becomes the A measurement of the logo.

The B measurement is a inner empty space which is used to measure clear space between the logotype elements.

45 degree rule creates a half of the quadrate - right triangle.

Construction

Clear space

A is then used as the clear space to surround the logo. This clear space helps to maintain the integrity of the logo in making sure that other elements are far enough away to not compromise the brand. Clear space helps the logo maintain its attributes.

Clear space

Icon clear space

The icon will use the B measurement (inner empty space) as the clear space between the mark and surrounding background (square or circle). Also B will be used as the clear space between the icon and its background and other objects surrounding it.

Icon clear space

Logo and bottom located and brand oriented text.
Spacing and position rules

The logo will use the B measurement (inner empty space) as the clear space between the logo and bottom located and brand oriented text. The clear space is A, but in cases when text is related to the brand will be used B measurement, the smallest allowed clear spacing.

The text located below the letter M, keeping the letter B separately. This is visually underline the original logo idea - BE MAD.

Logo followed by company description.

Spacing and position rules

Logo followed by a few words message.

Spacing and position rules

Logo and right located text with company information.
Spacing and position rules

The logo will use the A measurement as the clear space between the logo and right located and company oriented text. The text block will be top logo line aligned. This construct mainly will be used in small sizes.

Logo followed by company address.

Logo and right located text

Three and four lines text appearance rule

Will try to organize three four and more lines of the text blocks: first and last lines are shorter than the middle lines.

Three and four lines text rule

Emphasizing text block with orange line

If we need to highlight some of the text blocks to give them more importance than to others blocks of the information. Will be used vertically centered orange line that more close to left (if left alignment if right or centre use relatively) side of the text block as a symbol of number one. As well we can highlight each of the blocks inside a group with one, two, three lines and more. Here is clear association with the latin numbering - deep relation is a key to the brand successful integration.

Emphasizing text block

Phone number format

Twenty-four countries and territories share the North American Numbering Plan (NANP), with a single country code. The formatting convention for phone numbers is NPA-NXX-XXXX, where NPA is the three digit area code and NXX-XXXX is the seven digit subscriber number. The prefix NXX of the subscriber number is a code for the local central office, unique in the numbering plan area.

The phone number usually appears in small sizes. To increase readability of this important communication detail we double the letter spacing on the dashes of the phone number.

Phone number format

Two inline text blocks separation

As a separator of the two inline text blocks instead separation character we will use increased clear spacing.

Two inline text blocks rule

Brand colors

The brand’s colors dictate the mood and personality of the brand. The primary color was chosen because of the significant qualities that the company management team believe color orange holds. The previous identity system used dark orange, new identity will use lighter and juicy orange color, which has better contrast with the surrounding.

The image clearly showing the color hierarchy.

Brand colors

Color usage

The dark and light iterations of the logo shows how the brand holds when it is reversed out. This shows the legibility and flexibility of the logo on any backgrounds. However our brand wan’t use dark color as a background color.

Color usage

Graphic system

Typography

Two primary typefaces: Avenir and Adobe Garamond Pro.

Avenir typeface (medium and bold) will be used: titles (uppercase), company description with logo, company information on stationary objects, website menu, email signatures and more.

Adobe Garamond Pro typeface will be mainly used for front matter - large font size and short text blocks in purpose to highlight some textual information and as body text - the main content of a printed and digital matter.

Typography

Photography

We will use detailed photos or summary photos not the middle solution. Very close or very far. For print or media: photo has straight corners and does not use any display effects such as shadow, border and other. We give big importants to the quality of the photos and other images we share publicly.

Exaggerated detail example.

Humpback whale.
Travel photographer of the year. National Geographic, contest 2018.

Photography

Exaggerated summary example.

Venus.
Catch Venus Before It Disappears. Space.com, article.

Photography

Application usage

Stationery system

Since Queen Victoria's reign (nineteenth century) stationery has been an important part of good social behaviour. We believe that personalized communication emphasizes our professionalism. Showing our customers and clients how far we went to stand out, will help them to make the right decision.

Stationery system

Outdoor advertising

A billboard is a large outdoor advertising structure, typically found in high-traffic areas such as alongside busy roads. Billboards present large advertisements to passing pedestrians and drivers. They work best with clear, concise messaging, as the people who are viewing it are on the move. Typically showing witty slogans and distinctive visuals, billboards are highly visible in the top designated market areas.

Outdoor advertising

Apparel. Cap

A snapback is a flat-billed adjustable cap that is typically worn by today’s youth. It is an accessory that can go with most styles of streetwear. Hats can be a symbol of style and culture, but they are mostly used for the purpose of keeping cool on sunny day. Hats with embroidery say something a person and can start up a conversation.

Cap

Promotional item

A popsicle with a branded sleeve can be handed out at any place as a way to show support on a smaller and more personal level.

Promotional item

Website

Loader (entering the site)

a. Will be shown to user when access any of the site pages first time. The internal navigation will use different loading overlay.

b. The svg logo will be animated.

Loader. Web page

Home page (top section template for all pages)

a. When the loader has removed, all the page content are static except the outer part of the eye, that moves relatively to cursor, opposite to the cursor movement and animated bottom line that gives the clue to user about existence of the more content.

b. On scroll the inner part of the eye will start to follow the cursor (div).

Home page

Top navigation

Before scroll.

Current tab will have orange line. Other tabs on hover will have animated down, vertical, dark line smaller than the orange line.

Top navigation

Start scroll.

The tabs values will be hidden. Instead will be shown short lines. Dark lines will be animated from the top (top of the line). Orange line height will be reduced. Orange line will be slightly longer than the dark lines.

Top navigation

Hover navigation block.

When hovering the nav block the tab values will be shown and dark lines removed. Such a small detail can change a lot I think :)

Top navigation

This is just an idea. The orange area can become a container for anything - message, animation, art and more. The experience begin with the loading orange screen and ends with the orange footer. Beginning = End.

Footer

About page

a. Gears will move. The moving speed will be related to the cursor movement speed - faster cursor moves, faster gears turn around.

b. On scroll the small gear will start to follow the cursor, again here the speed related to the cursor movement speed.

About page main content area shows how the text sections will be organized. The example of how will be organized images and following text can be found above.

About page

Thanks for
joining me in this journey
all the way down.

Maxim Aginsky. October 2018

P.S.

Before I have organized the materials for publication on WebTalkTo, all the information - text and images, were located in one very long image, which I have published on my Log - "BMAD. Brand identity manual".

Comparing two publications or better to say two different formats of the same publication I have came to conclusion that the information better presented when it is an image. That will probably lead me to find better way of presenting information on my portfolio, in other words this is a new beginning, in other words this is a new design version.