retrospective erik spiekermann
DESCRIPTION
Cahier de direction artistique pour la Retrospective Erik Spiekermann à l'ESAG Penninghen (proposition)TRANSCRIPT
RÉTROSPECTIVEERIK SPIEKERMANN
Cahier de direction artistique
Shannon Kordylas - Oriane Juster
RÉTROSPECTIVEERIK SPIEKERMANN
Contexte
Shannon Kordylas - Oriane Juster
RÉTROSPECTIVE ERIK SPIEKERMANN3
BRAND AGENCY
RAPPEL DU BRIEF
identité multimédia
Créer un logo et des codes visuels cohérents pour une publication print réaliséedans le cadre du cours de design éditorial
Travail de conception graphique de l’identité préliminaire au travail de design éditorial qui sera conduit par la suite en print et en digital
Méthode
Analyser l’oeuvre, en dégager des valeurs sé-mantiques nécessaires à la création du lettrage et aux principes d’interac-tion (principes de mises en pages des gabarits et transitions)
Attendus
Cahier de direction artistique intégrant :- Lettrage- Lettrage en réduction- Lettrage et son tracé régulateur- Lettrage et sa zone de sécurité- Lettrage en positif et en négatif- Déclinaison typographique- Choix de typographies d’accompagnement- Palette couleur- Vocabulaire de formes (en vue de la création de principes de mise en page ou de transition)
Sommaire
— Contexte2 Rappel du brief3 Who is Erik Spiekermann ?4 Ses travaux : polices de caractères5 Ses travaux : expérimentations typographiques
— Principes graphiques8 Le logo18 Les typos et leurs combinaisons23 Les couleurs24 Exemple d’utilisation
RÉTROSPECTIVE ERIK SPIEKERMANN4
BRAND AGENCY
WHO IS ERIK SPIEKERMANN ?
Carrière
Erik Spiekermann est un des designers et typographes les plus renommés. Alors qu’il est encore étudiant en His-toire de l’art, il ne prend pas le temps de décrocher son diplôme avant d’aller offrir ses services à diverses agences de design à Londres et fi nit par créer sa propre maison à Berlin avec Florian Fischer et Dieter Heil : Metadesign. L’agence grandit, à Londres, San Francisco, Zurich. Les clients se multiplient : Adobe, Apple, Audi mais aussi Volkswagen, BVG - les transports publics berlinois - et la ville de Berlin pour son identité institutionnelle. En 1990, Spiekermann fonde le Fontfoundry Fontshop International avec son épouse Joan et le designer anglais Neville Brody. Il crée le FontFont Bibliothek Spiekermann où il publie les fameuses typographies FF Meta, FF Unit, FF Info et bien d’autres encore. En 2000, Spiekermann quitte Metadesign. Aujourd’hui, il travaille avec Bosch, Otto Bock et la ZDF depuis son bureau EdenSpiekermann à Berlin ou Amsterdam.
Source : arte.fr
Pour aller plus loin
↘ en.wikipedia.org/wiki/Erik_Spiekermann↘ son blog : spiekermann.com/en↘ sa fonderie : www.fontfont.com↘ son agence : edenspiekermann.com↘ sur Twitter : @espiekermann
RÉTROSPECTIVE ERIK SPIEKERMANN5
BRAND AGENCY
TRAVAUX
Polices de caractère
Deux best-sellers Ses autres polices
RÉTROSPECTIVE ERIK SPIEKERMANN6
BRAND AGENCY
TRAVAUX
Expérimentations typographiques
RÉTROSPECTIVEERIK SPIEKERMANN
Principes graphiques
Shannon Kordylas - Oriane Juster
RÉTROSPECTIVE ERIK SPIEKERMANN8
BRAND AGENCY
LOGO
rétro t ive
Erik Spiekermann
Le logo reprend les deux alphabets les plus connus d’Erik Spiekermann : le Meta, sous forme de contours, ainsi que le Offi cina Serif, sous forme de lettres pleines. Le bleu est la couleur de choix de Siekermann, utilisé dans le branding de ses agences sucessives.
Parler de typographie au grand public
Faire apparaître les lignes de construction et d’études des fontes de caractère est un choix délibéré, qui vise à faire comprendre au grand public l’essence du métier de typographe, et à renvoyer les initiés à ce qu’ils connaissent déjà.
RÉTROSPECTIVE ERIK SPIEKERMANN9
BRAND AGENCY
LOGO
Principe de création
rétro t ive
RÉTROSPECTIVE ERIK SPIEKERMANN10
BRAND AGENCY
LOGO
Déclinaisons
Monochrome fond clair Monochrome fond sombre
Couleur fond clair Couleur fond bleu
CMJN : 0 0 0 47RVB : 135 137 140
CMJN : 0 0 0 0RVB : 255 255 255
CMJN : 73 27 0 0RVB : 46 134 204
CMJN : 0 0 0 100RVB : 0 0 0
CMJN : 0 0 0 0RVB : 255 255 255
CMJN : 0 0 0 47RVB : 135 137 140
CMJN : 0 0 0 100RVB : 0 0 0
CMJN : 0 0 0 0RVB : 255 255 255
CMJN : 73 27 0 0RVB : 46 134 204
CMJN : 0 0 0 100RVB : 0 0 0
CMJN : 0 0 0 0RVB : 255 255 255
CMJN : 0 0 0 47RVB : 135 137 140
rétro t ive
rétro t ive rétro t ive
rétro t ive
RÉTROSPECTIVE ERIK SPIEKERMANN11
BRAND AGENCY
LOGO
Tracé régulateur et zone de sécurité
tracé régulateur
zone de sécurité
RÉTROSPECTIVE ERIK SPIEKERMANN12
BRAND AGENCY
130 x 50 mm
85 x 33 mm
40 x 15 mm
rétro t ive
rétro t ive
rétro t ive
LOGO
Échelles
RÉTROSPECTIVE ERIK SPIEKERMANN13
BRAND AGENCY
LOGO
Cartouche associé
rétro t ive
Taille minimum d’utilisation : Taille minimum d’utilisation :
Toujours positionné dans l’angle inférieur gauche.
rétro t ive
26 mm
18 mm
rétro t ive rétro t iverétro t ive
18 mm
26 mm
rétro t ive
rétro t ive rétro t ive
RÉTROSPECTIVE ERIK SPIEKERMANN14
BRAND AGENCY
rétro t ive
rétro t ive
rétro t ive rétro t ive
Sur une image, opacité = 75 %rétro t ive rétro t iverétro t ive
LOGO
Cartouche associé
RÉTROSPECTIVE ERIK SPIEKERMANN15
BRAND AGENCY
rétro t ive
LOGO
Exemples d’utilisation
rétro t iverrééttrroo ttiivvee
rétro t ive
RÉTROSPECTIVE ERIK SPIEKERMANN16
BRAND AGENCY
LOGO
Exemples d’utilisation
rétro t iverétro t ive
rétro t ive rétro t ive
rétro t ive
RÉTROSPECTIVE ERIK SPIEKERMANN17
BRAND AGENCY
LOGO
VIOLATIONS
rétro t ive
rétro t ive
50 x 19 mm
40 x 15 mm
30 x 12 mm
20 x 8 mm
rétro t ive
rétro t iveo tt
rétro t ive 15 mm
40 mm
Taille minimum d’utilisation du logo :
rétro t ive rétro t ive
rétro t ive
o
rétr
o ti
ve
rétro t ive
Supprimer une partie du logo :
Pencher le logo :
Supprimer le fond (bleu ou noir) :
Modifi er les couleurs :
rétro t ive
RÉTROSPECTIVE ERIK SPIEKERMANN18
BRAND AGENCY
LES TYPO ET LEURS COMBINAISONS
Les alphabets de titrageO
ffi ci
na C
rayo
nné
Met
a Tr
acé
Met
a Ax
esO
ffi ci
na R
egul
ar
Quatre alphabets à combiner…
Le logo reprend les deux alphabets les plus connus d’Erik Spiekermann : le Meta, sous forme de contours, ainsi que le Offi cina Serif, sous forme de lettres pleines. Le bleu est la couleur de choix de Siekermann, utilisé dans le branding de ses agences sucessives.
… pour raconter la création typogra-phique
Faire apparaître les lignes de construction et d’études des fontes de caractère est un choix délibéré, qui vise à faire comprendre au grand public l’essence du métier de typographe, et à renvoyer les initiés à ce qu’ils connaissent déjà.
RÉTROSPECTIVE ERIK SPIEKERMANN19
BRAND AGENCY
LES TYPO ET LEURS COMBINAISONS
Quelques déclinaisons possibles…
Offi cina Crayonné + Meta Tracé
Offi cina Crayonné + Meta Axes
Meta Trac» + Meta Axes
Meta Axes + Offi cina Regular
Raconter l’évolution de la typographie avec combinaisons
RÉTROSPECTIVE ERIK SPIEKERMANN20
BRAND AGENCY
Texte courant Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem. Ga. Itat prepe vent dignita temporeri nem nullit, omnimusam hitasint.
Chapeau et exergues nobis ipitatia sit lanihit iisquis duntest iistionseque odit aut volupti beratinum inus,
NOTES ET SOURCES Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Intertitres ipsum si
Offi cina Crayonné 50 ptCMJN 73 27 0 0 | RVB 46 134 204Meta Tracé 50 ptCMJN 0 0 0 100 | RVB 0 0 0
Offi cina Regular 22 ptCMJN 73 27 0 0 | RVB 46 134 204Meta Axes 22 ptCMJN : 0 0 0 47 | RVB : 135 137 140
MetaPro Normal 13 ptCMJN 0 0 0 85 | RVB 60 60 62
MetaPro Bold 11 ptCMJN 73 27 0 0 | RVB 46 134 204
Offi cina Serif Book 10 ptCMJN 0 0 0 7 | RVB 80 81 84
MetaPro Book et Bold 8 ptCMJN 0 0 0 7 | RVB 80 81 84
LES TYPO ET LEURS COMBINAISONS
Charte et éléments graphiques
Les fi lets0,25 pt - Tirets pointillés - CMJN 0 0 0 47 - RVB : 135 137 1400,25 pt - Tirets pointillés - CMJN 0 0 0 100 - RVB : 0 0 01 pt - Points japonais - CMJN : 73 27 0 0 - RVB : 46 134 2041 pt - Ligne continue - CMJN : 73 27 0 0 - RVB : 46 134 2041 pt - Ligne continue - CMJN 0 0 0 100 - RVB : 0 0 0
RÉTROSPECTIVE ERIK SPIEKERMANN21
BRAND AGENCY
MetaPro Bold
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZaàbcçdeéèêfghijklmnopqrstuùvwxyz0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
MetaPro Normal
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZaàbcçdeéèêfghijklmnopqrstuùvwxyz0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
MetaPro Medium
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZaàbcçdeéèêfghijklmnopqrstuùvwxyz0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
Officina Serif Book Std
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZaàbcçdeéèêfghijklmnopqrstuùvwxyz0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
Officina Serif Book Italic Std
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZaàbcçdeéèêfghijklmnopqrstuùvwxyz0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
Polices de caractères recommandées pour les intertitres et les notes
Autres polices de caractère utilisables en fonction des besoins du support : citations, sous-titres…
Police de caractères recommandée pour le texte courant Meta et Officina sont tous deux des créations de Spie-kermann.
Le Meta (FF Meta)
Dessinée en 1984, cette linéale comporte de nombreux petits détails, biseaux, angles, etc. des-tinés à faciliter la lecture. Originellement commandée par la Poste allemande, elle a été refusée… et est quasi instantanément devenue un best-seller de Font Font, la fonderie de Spiekermann.
Le Officina Serif
Sorti dans les années 90, ce caractère a d’abord été travaillé dans une version sans empattement, Officina Sans. Destinée aux commu-nications institutionnelles, sa grande lisibilité en a fait un autre grand succès de Spiekermann. Officina Serif a été quasi entièrement re-desinnée par Spiekermann en 2003.
LES TYPO ET LEURS COMBINAISONS
Charte graphique
RÉTROSPECTIVE ERIK SPIEKERMANN22
BRAND AGENCY
LES TYPO ET LEURS COMBINAISONS
Charte graphique - Exemple de réalisation
Nes consequo mollibus dem etu-rioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita tem-poreri nem nullit, omnimusam hitasint.
Me eictum volorum volest, ipid quam vit qui in corror sequia volup-tiatis esto esed ut idendem es es
everis eatem quam solum ipsam, nem voluptat omnisti aut eost qui ut a dolorectotas et molentin eaquundes nihitios molupta siti ul-labore mosam, cusaped maximent, tempore moluptatem. Occusam eatque esti berum, cus volores torpos pero eaque dus.
Nec consectetur
Arit amus a nimos sam estione sen-diaes dolut adis et quat et ommolor arci aliti que net apeliam quibus nis
pore exerum fuga. Name nos es so-luptiumque non parchit atuscia as apiene perumqui optasimus mo cum quid eliquia sitibus arum ni des et et vendae porporeiur minis eosam aut alibus estrum rehenis et odio. Dae periatque dolo optaturepudi…
Se non nobis ipitatia sit lanihit iisquis duntest iistionse-que odit aut volupti beratinum inus, acepel magnien disitat. Debitiaestem facia quam, quametur, quam…
NOTES Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Nes consequo mollibus dem etu-rioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita tem-poreri nem nullit, omnimusam hitasint.
Me eictum volorum volest, ipid quam vit qui in corror sequia volup-tiatis esto esed ut idendem es es everis eatem quam solum ipsam, nem voluptat omnisti aut eost qui ut a dolorectotas et molentin eaquundes nihitios molupta siti ul-labore mosam, cusaped maximent, tempore moluptatem. Occusam eatque esti berum, cus volores torpos pero eaque dus.
RÉTROSPECTIVE ERIK SPIEKERMANN23
BRAND AGENCY
LES COULEURS
Gris 01
CMJN : 0 0 0 47RVB : 135 137 140
# 999b9e
Blanc 01
CMJN : 0 0 0 0RVB : 255 255 255
# FFFFFF
Bleu Eden 01
CMJN : 73 27 0 0RVB : 46 134 204
# 0f93d9
Noir 01
CMJN : 0 0 0 100RVB : 0 0 0# 000000
Gris Texte 01
CMJN : 0 0 0 75RVB : 80 81 84
# 636467
Gris Texte 02
CMJN : 0 0 0 85RVB : 60 60 62
# 4d4d4f
Bleu 02
CMJN : 60 13 0 0RVB : 73 164 224
# 41b0e9
RÉTROSPECTIVE ERIK SPIEKERMANN24
BRAND AGENCY
EXEMPLE D’UTILISATION
Nes consequo mollibus dem etu-rioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita tem-poreri nem nullit, omnimusam hitasint.
Me eictum volorum volest, ipid quam vit qui in corror sequia vo-luptiatis esto esed ut idendem es
es everis eatem quam solum ipsam, nem voluptat omnisti aut eost qui ut a dolorectotas et molentin eaquundes nihitios molupta siti ullabore mosam, cusaped maxi-ment, tempore moluptatem. Occu-sam eatque esti berum, cus volores torpos pero eaque dus.
Nec consectetur
Arit amus a nimos sam estione sen-diaes dolut adis et quat et ommolor arci aliti que net apeliam quibus nis
Se non nobis ipitatia sit lanihit iisquis duntest iistionse-que odit aut volupti beratinum inus, acepel magnien disitat. Debitiaestem facia quam, quametur, quam…
NOTES Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
rétro t iveCatalogue de l’exposition
Nes consequo mollibus dem etu-rioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita temporeri nem nullit, omnimusam hitasint.
Me eictum volorum volest, ipid quam vit qui in corror sequia voluptiatis esto esed ut idendem es es everis eatem quam solum ipsam, nem voluptat omnisti aut eost qui ut a dolorectotas et molentin eaquundes nihitios molupta siti ul-labore mosam, cusaped maximent, tempore moluptatem.
Occusam eatque esti berum, cus volores torpos pero eaque dus. Arit amus a nimos sam estione sendiaes
dolut adis et quat et ommolor arci aliti que net apeliam quibus nisTemporro dicta venisci magnam, oditatem dolorro explias diam ario vent optatur ehenetus aut ventius simin et a nonseque necte re explis ipsunt acculparum inctorita verferi-bus, quodio es alique repe voluptiis coriam andicil labori od qui diasit alis ea velent dolorem nus quidem quodit parum, cones quossed ex en-dundel in plitem quunt estionsero omnist laudit plic tem et alia.
Nec consectetur
Conseque nonsequam duciaep erenis repelique sa dolor aut fugiam asitibus non consequi conseribus ma sequibus ex et amenditio optaque vid ut qui conserferes essi dent fugit esequi occuptatis comnihil eatius simagnis minvelest facipid endenim enducid untota-
tiunt quam, nullat rendis entis es quid quatem et modiam ea quatur, sitis accabor iberum que ditis accae. Ga. Ut pra dolore, quunt, sentisti-bus, quatur? Cearum corecus ex et occullaborro modit rectamus, te sit, non repudia dolestissum, offi cae cuptatum fuga. Odi rendis que nonserovit pereperias de volori odi-tatiur recea es et offi cit lati nonse-qui dolupitiamet aligenia perumqui ventis et es a voluptati cum conserum que volo blam aspidunt vent enditatur at ditaest, nonsequi offi c to et acius rehendam, quam sequam quaersp erchilit pro et etus explaborum dolupta speribusa soloris ea sum aligend igentia velliberum fugiasini optatas ut lam alique con consequ iscimod
NOTES Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
NOTES Nes conse-quo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.