Behance Served Sites

Served is a collection of sites that showcase category specific content from Behance, the world's leading platform for creative professionals across all industries.

View All Served Sites →

BEM

Info
Statistics
Created:
Last Edited:
8207
483
35
Description
BEM, a toolkit devised and used at Yandex, stands for “Block, Element, Modifier”. BEM is a front-end methodology: a new way of thinking for web interface development.
Share
  • BEM
    A new way of thinking for web interface development
  • BEM, a toolkit devised and used at Yandex (Russian Internet company which operates the largest search engine in Russia) , stands for “Block”, “Element”, “Modifier”. BEM is a front-end methodology: a new way of thinking for web interface development.

    The Challenge
    The brief to Flëve was to create a flexible brand identity that is easily adaptable to different contexts and has an identity that both a developer and a designer can identify with. Make sure that it's not logocentric and doesn’t create a corporate feel.

    The Solution
    Take 'b_' from the code, namely b_ _e_m and make it the main style-forming element.

    Design b_ in different styles to make it easily adaptable to different contexts and appealing to different target audiences.

    Use and integrate the code in the designs to attract developers as the main users of the methodology.

    Essentially, to create a new expression of the identity, take 'b_' designed in a certain style, make a pattern out of it and apply it accordingly throughout the whole identity. In this way, each 'b_' dictates the overall look and feel of the identity.

    The Result
    A highly flexible and variable identity with 'b_' playing the role of a powerful style-forming element.
  • We have used and integrated the code in the designs to appeal to developers
    as the main users of the methodology.
  • As far as we know, most developers love comics, so we created a short series of comic heroes in the shape of b_. Of course, more heroes can also be designed at any time.
  • As an example, let's say BEM is going to a web-development conference in San Francisco and giving a presentation there. Now it will be easy to make a few adjustments to the presentation to adapt it to a new audience.
  • A set of pictograms
  • Read a well-written article about BEM on Smashing Magazine

    Some companies already using BEM
    Rambler
    Yota
    TNK Racing team
    Headhunter
    Mail.ru
    Livejournal
    Lenta.ru
    Nile studio

    Here's a short review of the identity on Brand New 

    Stay tuned:

Comments: ( Comments )