Athem en scène
Parce que le métier d’Athem est de mettre en scène, nous avons conçu une charte graphique qui évoque le métier de la scénographie, qui soit déjà une mise en scène. Afin d'exprimer l’esprit rigoureux et créatif de l'atelier, nous avons opté pour un décalage incarné et non proclamé. Comme suspendues aux fils d’un marionnettiste, les lettres de la charte graphique proposent
un jeu dans l’espace, et offrent une sensation de mouvement qui rappelle l’animation des créations de l’Atelier. Allégés de certains fragments, ces caractères ont également quelque chose de l’ombre chinoise, de la projection lumineuse – un écho stylisé au vidéo mapping.
un jeu dans l’espace, et offrent une sensation de mouvement qui rappelle l’animation des créations de l’Atelier. Allégés de certains fragments, ces caractères ont également quelque chose de l’ombre chinoise, de la projection lumineuse – un écho stylisé au vidéo mapping.
En s’élevant sur une portée invisible, l’ensemble joue une musique graphique unique. Tout comme une partition, cette charte est un outil de création mais aussi de précision, de rigueur.
Athem on stage
Because Athem's job is putting on a show, we created a graphic charter that evokes the profession of set design, a whole production in itself. To express the studio's meticulous and creative spirit, we chose intrinsic and unexpected spacing. As if suspended from the strings of a puppet master, the letters of the graphic charter suggest
a game in space, and evoke a sense of movement reminiscent of the studio's creations. With cutaway sections, the letters also hint at shadow puppets and light projections - a stylised echoing of video mapping.
Lifted up on to an invisible stave, they create a unique musical graphic. Just like a musical score, this charter is a creative tool, as well as one of precision and rigour.
a game in space, and evoke a sense of movement reminiscent of the studio's creations. With cutaway sections, the letters also hint at shadow puppets and light projections - a stylised echoing of video mapping.
Lifted up on to an invisible stave, they create a unique musical graphic. Just like a musical score, this charter is a creative tool, as well as one of precision and rigour.
La typographie
Le logo d'ATHEM est issu d'une typographie que notre studio a créé pour l'occasion. Appelée l'Athem Sans, cette typographie se décline en trois versions de graisse identique.
Athem Sans Regular
L'Athem Sans Regular est une typographie Sans Sérif condensée.
Elle n'existe qu'en majuscule tout comme ses sœurs: l'Athem Sans Regular Cut et l'Athem Sans Regular Alternate. Elle est la version basique de cette typographie, sans variations de hauteur ni coupes.
Athem sans regular Cut
L'Athem Sans Regular Cut se distingue de la Regular par la coupe des 5 lettres constituant
le logo d'Athem. Les espacements et Kernings (espacements des pairs) sont réajustés en conséquence.
le logo d'Athem. Les espacements et Kernings (espacements des pairs) sont réajustés en conséquence.
Athem sans regular Alternate
L'Athem Sans Regular Alternate est travaillée autour de la même structure que ses sœurs.
Sa particulartié réside dans le décalage des seules lettres composant le logo d'Athem. En effet, les lettres A, T, H, E, M ont conservé leurs décalages et leurs coupes visibles dans le logo. Le reste
de l'alphabet est placé verticalement sur la ligne du H et du M. Les glyphes accentués contenant un ou plusieurs caractères modifiés subissent la même transformation visuelle que leur parents.
de l'alphabet est placé verticalement sur la ligne du H et du M. Les glyphes accentués contenant un ou plusieurs caractères modifiés subissent la même transformation visuelle que leur parents.
L'idée véhiculée par cette variante de la typographie est la suivante : chaque mot écrit avec cette typographie se verra ainsi bousculé, revisité par ATHEM.
The typography
Athem's logo is made with a typographical design created specially by our studio. Called Athem Sans, this typography is available in three versions of the same bold type.
Athem Sans Regular
Athem Sans Regular is a condensed sans-serif font.
It only exists in capitals just like its siblings Athem Sans Regular Cut and Athem Sans Regular Alternate. It's the basic form of this font, with no variations in height or cuts.
Athem Sans Regular Cut
Athem Sans Regular Cut differs from Regular by the cuts in the 5 letters that make up
the Athem logo.The spacings and kerning (spacing between letters) are adjusted accordingly.
Athem Sans Regular Alternate
Athem Sans Regular Alternate is based on the same structure as its siblings.
Its defining feature is the cutaways in the letters that make up the Athem logo. Essentially, the letters A, T, H, E and M have kept their cutaway sections and visible cuts in the logo. The rest
of the alphabet sits along the vertical line of the H and M. Accented glyphs with one or more modified letters are visually transformed like their parents.
The idea behind this twist in the typography is that every word written in the font will be jostled around, restyled by Athem.
Athem Sans Regular is a condensed sans-serif font.
It only exists in capitals just like its siblings Athem Sans Regular Cut and Athem Sans Regular Alternate. It's the basic form of this font, with no variations in height or cuts.
Athem Sans Regular Cut
Athem Sans Regular Cut differs from Regular by the cuts in the 5 letters that make up
the Athem logo.The spacings and kerning (spacing between letters) are adjusted accordingly.
Athem Sans Regular Alternate
Athem Sans Regular Alternate is based on the same structure as its siblings.
Its defining feature is the cutaways in the letters that make up the Athem logo. Essentially, the letters A, T, H, E and M have kept their cutaway sections and visible cuts in the logo. The rest
of the alphabet sits along the vertical line of the H and M. Accented glyphs with one or more modified letters are visually transformed like their parents.
The idea behind this twist in the typography is that every word written in the font will be jostled around, restyled by Athem.
Athem Sans Regular
Athem Sans Regular cut
Athem Sans Regular Alternate
Caractères spéciaux / Special characters
Le Jamion
ATHEM s'est créé un outil de travail inédit pour réaliser ses video mappings.
Un camion aux attributs brevetés, capable de s'adapter à de nombreuses situations et répondant aux normes sécuritaires imposées par les villes.
Sur fond noir satiné, le logotype y est élégamment mis en valeur.
The Jamion
Athem created a new tool to execute its video mapping projects.
A lorry with patented elements, able to adapt to multiple situations and meet towns' security standards.
The logo stands out elegantly against a satin black background.
Athem created a new tool to execute its video mapping projects.
A lorry with patented elements, able to adapt to multiple situations and meet towns' security standards.
The logo stands out elegantly against a satin black background.
© Photos Athem.
Le Book
ATHEM évolue dans des domaines variés. Depuis quelques années cependant, l'atelier s'est fait un nom dans le domaine culturel. Pour son book, l'atelier a exprimé la volonté de donner cette image en en utilisant les codes. Concevoir un book comme un objet, un véritable livre d'art. Voici ce qu'il a été demandé au studio.
120 pages / 2000 exemplaires
The portfolio
Athem performs in various arenas. For several years, however, it has made a name for itself in the cultural space. For its portfolio, the studio wanted to bring this image to life using its codes.To design a portfolio like an object, like an art book. That's what the studio was asked for.
120 pages / 2,000 copies
Athem performs in various arenas. For several years, however, it has made a name for itself in the cultural space. For its portfolio, the studio wanted to bring this image to life using its codes.To design a portfolio like an object, like an art book. That's what the studio was asked for.
120 pages / 2,000 copies
La couverture
4 passages sérigraphiques ont été appliqués sur la couverture et le dos du book. (un rouge, un rouge légèrement plus foncé, un blanc et un vernis sélectif).
Nous avons ensuite découpé au laser le logo ATHEM dans un carton Sumo (Favini) 1,5 mm que nous avons contrecollé sur un second afin qu'une fois assemblés, le logo apparaisse en profondeur.
Puis une couleur de la couleur d'Athem a été réalisée sur les quatres tranches.
Façonnage
Reliure apparente.
Intérieur
Papier couché Freelife Satin 170g (Fedrigoni)
Quadrichromie + 1 pantone
The cover
4 silk screen layers were applied to the cover and back of the portfolio.(a red, a slightly darker red, a white and a spot varnish).
We then laser cut the Athem logo into a 1.5mm Sumo card (Favini) that we stuck on to another layer of card so that, once it's assembled, the logo has real depth.
Then one of the Athem colours was applied on the four edges.
Finish
Exposed binding.
Inside
Freelife Satin 170g coated paper (Fedrigoni)
Four colour process printing + 1 Pantone
4 silk screen layers were applied to the cover and back of the portfolio.(a red, a slightly darker red, a white and a spot varnish).
We then laser cut the Athem logo into a 1.5mm Sumo card (Favini) that we stuck on to another layer of card so that, once it's assembled, the logo has real depth.
Then one of the Athem colours was applied on the four edges.
Finish
Exposed binding.
Inside
Freelife Satin 170g coated paper (Fedrigoni)
Four colour process printing + 1 Pantone
Le concept éditiorial par Ecriveron
Une collection de mots est intégrée à la charte graphique, incarnant tout l’esprit de l’Atelier. À chaque mot correspond une définition au style rédactionnel sur mesure : l’ensemble permet à Athem de se dévoiler à sa manière, en livrant sa vision singulière de la création et de la communication.
Avec ce concept à la croisée du graphisme et de l’éditorial, nous réaffirmons l’importance de l’écriture dans les créations visuelles et sonores d’ATHEM et jouons avec l’inextricable lien entre le beau et l’intelligent.
Editorial concept by Ecriveron
A collection of words is integrated into the graphic charter, embodying the spirit of the studio. Every word matches a definition to a tailor-made editorial style. Together they allow Athem to express itself in it own way, sharing its singular vision of creation and communication.
Through this concept that merges graphic design with editorial, we are reaffirming the importance of the written word in Athem's visual and audio creations and playing with the inextricable link between beauty and intellect.
A collection of words is integrated into the graphic charter, embodying the spirit of the studio. Every word matches a definition to a tailor-made editorial style. Together they allow Athem to express itself in it own way, sharing its singular vision of creation and communication.
Through this concept that merges graphic design with editorial, we are reaffirming the importance of the written word in Athem's visual and audio creations and playing with the inextricable link between beauty and intellect.
Le site web
Un site envoûtant
Administrable, ce site emmène le visiteur dans l'univers de l'atelier. Entre sensations et originalités techniques, l'utilisateur est invité à ressentir un positionnement, l'état d'esprit d'ATHEM.
Le site joue tout au long de ses pages avec le décalage vertical. Telle une partition de musique, l'utilisateur lit les projets qui défilent sur une portée. Très animé, le site propose entre ses différentes pages des tranitions fluides et élégantes.
Chaque page possède son originalité tout en se visitant via une navigation en scroll.
The website
A captivating site
Self-manageable, the site leads the visitor into the studio’s world. A cross between sensations and technical innovations, the user is invited to feel something specific - Athem's state of mind.
On every page the website plays with vertical spacing. Like a sheet of music, the user reads about the projects as they float across the stave. The lively site provides fluid and elegant transitions between its pages.
Each page has an original feel, and everything is navigated by scrolling.
A captivating site
Self-manageable, the site leads the visitor into the studio’s world. A cross between sensations and technical innovations, the user is invited to feel something specific - Athem's state of mind.
On every page the website plays with vertical spacing. Like a sheet of music, the user reads about the projects as they float across the stave. The lively site provides fluid and elegant transitions between its pages.
Each page has an original feel, and everything is navigated by scrolling.
Mobile / tablette
Les versions mobile et tablette du site web sont travaillée autour des particularités de ces supports.
La navigation se transforme en un swipe horizontal afin de rendre le site plus agréable à visiter.
Mobile / tablet
The mobile and tablet versions of the site are specially designed for those formats.
Navigation changes to horizontal scrolling to make the experience more enjoyable.
The mobile and tablet versions of the site are specially designed for those formats.
Navigation changes to horizontal scrolling to make the experience more enjoyable.
Zoom sur la page "Les 5 étapes de la création"
Cette page illustre la créativité de l'atelier. Sous la forme d'animations abstraites, les 5 étapes du processus d'ATHEM sont représentées par les mises en scènes d'œuvres aux époques et styles variés. L'atelier y présente aussi son attachement aux domaines de l'art et de l'architecture. Créées sur AfterEffects et mise en place grâce au plugin bodymovin.
Zooming in on the page "The 5 stages of creation"
This page illustrates the studio's creativity. Through abstract animations, the five stages of Athem's process are represented by dramatisations of works of art from different time periods and in different styles. Here, the studio is expressing its love of art and architecture. Created on AfterEffects and installed with the Bodymovin plugin.
This page illustrates the studio's creativity. Through abstract animations, the five stages of Athem's process are represented by dramatisations of works of art from different time periods and in different styles. Here, the studio is expressing its love of art and architecture. Created on AfterEffects and installed with the Bodymovin plugin.
Zoom sur la page "Equipe"
Cette page met en scène l'équipe au complet de l'atelier. Les membres se regardent et se répondent en suivant les volontés de la souris. Un principe complexe à mettre en place, car dynamique. Les réactions des membres s'adaptent en fonction du nombre de personnes présentes.
Zooming in on the "Team" page
This page shows off the studio's full team. They look at each other and respond to each other by following the wishes of the mouse. A complex concept to achieve because it's dynamic. The team's reactions change depending on the number of people on the page.
This page shows off the studio's full team. They look at each other and respond to each other by following the wishes of the mouse. A complex concept to achieve because it's dynamic. The team's reactions change depending on the number of people on the page.
Visiter le site Athem !
Visit the Athem website !
...........................................................................
Technologies
Technologies : html5 – css3 – javascript – node
CMS : Storyblok
CMS : Storyblok
...........................................................................
