Directives de marque
La beauté de Boston commence par une certaine audace. L'audace d'avoir une opinion. De penser. De la diversité. L'audace d'être soi-même. Même si nous sommes tous différents et venons de cultures et d'horizons divers, nous sommes liés par notre audace. Et par notre ville. Nous sommes Boston.
Ce guide est exactement ce qu'il prétend être : un guide. Il vise à vous aider à comprendre notre stratégie et nos décisions, et à vous fournir une base sur laquelle vous pourrez vous appuyer. Nous l'enrichirons au fur et à mesure que nous donnerons vie à Boston.gov au cours des mois et des années à venir.
STRATÉGIE DE MARQUE
CONFIDENTIEL
Formulez des affirmations, pas des questions. Les gens cherchent des réponses, il est donc crucial d'avoir un point de vue clair. Soyez direct et allez droit au but. N'utilisez pas le subjonctif. Les mots « si, peut-être, mais, pourrait, pourrais » n'existent pas dans notre vocabulaire. Moins d'adjectifs, des phrases plus courtes et moins de fioritures, c'est mieux. Si vous êtes sur le point d'ajouter une virgule, réfléchissez si un point fort et précis ne serait pas préférable.
UTILE
Nous sommes ici pour servir, pour simplifier les choses pour nos citoyens. Tout ce que nous disons ou toute information que nous donnons doit être utile, facile à comprendre et pertinente pour la personne concernée.
OPTIMISTE
Tout est possible dans notre monde. S'il y a un problème, nous pouvons le résoudre avec un peu d'ingéniosité. Tous les contenus doivent refléter ce ton optimiste. Là où il y a une volonté, il y a un moyen. Et s'il est question d'un problème, il est accompagné d'un plan d'action pour le résoudre. Nous sommes peut-être des rêveurs, mais — plus important encore — nous sommes des acteurs.
HUMILITÉ
Nous pouvons être confiants, mais jamais arrogants. Soyez attentifs aux adjectifs que vous utilisez. Évitez les circonvolutions et les exagérations. Votre grammaire doit toujours être impeccable, mais vos mots doivent être simples. Si vos mots comportent plusieurs syllabes, réévaluez leur choix. Soyez prudent dans la description de vos actions et de vos projets. Gardez à l'esprit les personnes que vous souhaitez aider.
PERSONNEL
La visite d'un site web est une expérience personnelle, souvent vécue en solitaire. Utilisez des pronoms personnels comme « nous » et « vous ». Soyez honnête. Soyez authentique. Soyez accessible. Soyez compréhensible et inclusif. Boston est composée de milliers d'individus, et vous êtes là pour chacun d'entre eux. Cependant, évitez tout excès de familiarité – l'argot ou le langage conversationnel sonnent étranges venant d'un organisme officiel.
Vous pouvez en apprendre davantage sur la façon d'écrire dans le ton de notre marque ici.
COULEUR
Le mélange de rouges, de blancs et de bleus de la palette de couleurs contraste avec un gris moderne. Cela reflète le caractère progressiste de la ville, tout en rendant hommage à son passé emblématique. La couleur principale du site est le blanc. L'utilisation d'espaces blancs est un mécanisme de référence pour un contenu clairement présenté. Les couleurs principales sont les éclaboussures qui attirent l'œil vers les notifications importantes et les moments de fonctionnalité. Les couleurs secondaires sont là lorsque votre conception a besoin d'une certaine variation pour fonctionner.
RELATIONS ENTRE LES COULEURS
La couleur principale du site est le blanc. Si l'on zoomait sur le site, on verrait des espaces blancs servir de fondement à un contenu présenté de manière claire.
Les couleurs primaires sont les éléments qui attirent l'attention sur les notifications importantes et les moments fonctionnels. Utilisez le bleu de manière forte et intentionnelle, et utilisez le rouge avec parcimonie. Utilisez le gris clair généreusement avec le blanc, tout en gardant le blanc dominant.
Couleurs primaires
CHARLES BLEU
hexadécimal : #091F2F
Pantone : 295C
RVB : 9, 31, 47
Utilisez notre bleu foncé pour les titres typographiques et pour ajouter du contraste et du poids aux pages plus claires. Utilisez cette couleur lorsque vous avez besoin d'un aspect plus officiel.
BLEU OPTIMISTE
hexadécimal : #1871bd
Pantone : 285 C
RVB : 24, 113, 189
Utilisez ce bleu pour les liens et les boutons normaux, ainsi que comme couleur de fond. Vous devez également utiliser cette couleur pour les superpositions sur les photos. Utilisez cette couleur lorsque vous devez apporter de la chaleur à une mise en page (et que vous pouvez être un peu moins formel). N'utilisez pas cette couleur par-dessus le rouge Freedom Trail.
FREEDOM TRAIL ROUGE
hexadécimal : #FB4D42
Pantone : 1788C
RVB : 251, 77, 66
Un rouge brique, inspiré du Freedom Trail. Utilisez cette couleur avec parcimonie. Le rouge peut être une couleur d'alarme et doit être utilisé avec précaution. N'utilisez jamais le bleu optimiste sur le rouge Freedom Trail (et vice versa). Ils sont trop lumineux et vibrent lorsqu'ils sont utilisés l'un sur l'autre.
COULEURS DE SUPPORT
Dans certaines situations de conception, vous trouverez peut-être les couleurs primaires limitantes. C'est pourquoi nous avons créé des couleurs complémentaires qui conservent le même ton et la même personnalité, mais qui vous offrent plus de liberté. Par exemple, dans la mise en page de notre site, nous utilisons la gamme de bleus et de gris présentée ci-dessous lorsque les couleurs primaires ne conviennent pas à la conception. N'utilisez les couleurs suivantes que si les couleurs primaires ne fonctionnent pas.
EN SOUTIEN AUX BLEUS
#061622, #0C2639, #45789C, #51ACFF
Le plus foncé de ces bleus doit être utilisé très rarement, lorsque vous avez besoin de quelque chose qui ressemble au noir. Le bleu suivant, le plus foncé, est utilisé pour la couleur de fond du pied de page, afin qu'il puisse se fondre sans problème avec notre bleu foncé principal. Le bleu désaturé peut être utilisé lorsque vous avez besoin que le texte recule visuellement. Le bleu le plus clair est utilisé comme substitut de notre bleu clair principal lorsqu'il doit apparaître sur un fond sombre.
SOUTENIR GRaYS
#58585B, #D2D2D2, #E0E0E0, #F2F2F2
Le gris le plus foncé est utilisé pour le texte principal, et le gris le plus clair est utilisé comme couleur de fond. Les deux gris moyens peuvent être utilisés pour diverses choses, comme les séparateurs horizontaux et les bordures diverses.
Logo de la ville de Boston
Le nouveau logo de Boston n'est pas juste la lettre B, mais une lettre B en gras. Soulignée. Quand quelque chose est important, on le souligne. Nous utilisons le B pour adopter un ton amical. Alors que le sceau est un symbole d'autorité, le B et le logo plus long de la ville de Boston sont notre façon de montrer que nous sommes humains.
Sceau numérique
Le sceau numérique de Boston remplace le sceau officiel sur tous les supports et communications numériques. Ce sceau a été créé pour mieux fonctionner en petit format et sur les écrans. Il sera également nécessaire, pour les supports imprimés, d'utiliser une interprétation plus épurée et moderne du sceau traditionnel.
Sceau officiel de la ville de Boston
Ce sceau doit être utilisé lorsque la ville doit être symbole d'autorité, comme sur les factures et les formulaires non numériques. Le sceau de la ville a été adopté en 1823. La première image du sceau a été publiée en 1827. Il est devenu le sceau officiel en 1914. Nous avons plus d'informations sur le symbolisme et Boston .
TYPOGRAPHIE
MONTSERRAT
ABCDEFGHIJKLMNOPQRSTUVWXYZ
LORA
Lora est une typographie serif contemporaine bien équilibrée, aux racines calligraphiques. Polie, poétique et chaleureuse, elle est idéale pour le corps du texte. Techniquement, Lora est optimisée pour l'affichage à l'écran, mais fonctionne tout aussi bien à l'impression. Utilisez-la en petite taille pour le corps du texte, ou en grande taille et italique pour les citations ou autres textes secondaires spéciaux. Associez-la à Montserrat autant que possible pour refléter notre voix audacieuse, mais humaine. Téléchargez-la
Arabe
Texte de Markazi (remplacement de Lora)
Mada (remplacement de Montserrat)
Espagnol (Spanish):
Lora et Montserrat
Kreyòl ayisyen (Créole haïtien) :
Lora et Montserrat
Chinois traditionnel (繁體中文):
Noto Serif TC (remplacement de Lora)
Noto Sans TC (remplacement de Montserrat)
Chinois simplifié (简体中文):
Noto Serif SC (remplacement de Lora)
Noto Sans SC (remplacement de Montserrat)
French (French):
Lora et Montserrat
Viêt-namien (Tiếng Việt):
Lora (ou Palatino) et Montserrat
Russe (Russian):
Lora et Montserrat
Portugais (Portugais brésilien) :
Lora et Montserrat
kriolu (créole du Cap-Vert) :
Lora et Montserrat
Mac OS X
Si vous n'avez besoin que d'une seule police, double-cliquez dessus et cliquez sur « Installer la police ». S'il y a plusieurs polices, vous pouvez faire la même chose pour chacune. Une autre option consiste à ouvrir « Font Book » et à sélectionner et faire glisser toutes les polices vers la colonne centrale de Font Book.
Pour trouver Font Book sur votre Mac, ouvrez une fenêtre du Finder, sélectionnez « Applications » et faites défiler jusqu'à Font Book.
Windows 7 / Windows 8
Si vous n'avez besoin que d'une seule police, double-cliquez dessus et cliquez sur « Installer ». Pour choisir plusieurs polices, cliquez sur le bouton « Démarrer », puis sur « Panneau de configuration > Apparence et personnalisation ». Cliquez ensuite sur « Polices ». Vous pouvez glisser-déposer les nouvelles polices ici.
Windows Vista
Si vous n'avez besoin que d'une seule police, faites un clic droit sur le fichier de police, puis cliquez sur « Installer ». Pour choisir plusieurs polices, suivez les instructions ci-dessus pour Windows 7 / Windows 8.
Windows XP
Vous pouvez glisser-déposer les fichiers de polices que vous souhaitez installer dans le dossier « Polices » de votre ordinateur. Cliquez sur le bouton « Démarrer » et recherchez « C:\Windows\Fonts ». Une fois le dossier ouvert, glissez-déposez les polices dedans.
TYPES DE POLICES DE CARACTÈRES POUR LES COURRIELS
Si les polices web de Google ne sont pas disponibles et que vous devez remplacer vos polices de caractères par les polices par défaut du système, nous vous recommandons de remplacer Lora par Georgia et Montserrat par Arial . Toutes les mêmes règles stylistiques s'appliquent.
ICONOGRAPHIE
ICONOGRAPHIEICÔNES EXPÉRIENTIELLES
Ces icônes à lignes épaisses doivent être utilisées pour des actions spécifiques qu'un citoyen peut vouloir entreprendre (comme payer une contravention de stationnement). Utilisez-les pour les transactions qui doivent se démarquer rapidement afin que les citoyens puissent agir et mener à bien leur démarche. Ces icônes sont créées avec des traits de 3 pixels d'épaisseur et ont généralement (mais pas toujours) des bords nets. Évitez les coins arrondis inutiles.
ICÔNES DES DÉPARTEMENTS
Les icônes de département doivent être utilisées pour tout contenu créé par des départements spécifiques. Ces icônes indiquent un contenu plus approfondi ou peuvent vous diriger vers les pages des départements spécifiques. Elles servent simplement d'outil d'orientation pour permettre aux utilisateurs de voir quel département a créé ce contenu spécifique. Avec des formes simples et solides, elles sont conçues pour être reconnues instantanément par un utilisateur régulier. Elles sont remplies de bleu Charles et soulignées de rouge Freedom Trail ( voir Palette de couleurs ).
PETITES ICONES CIRCULAIRES
Pour les petites icônes en ligne, nous utilisons un style similaire à celui des icônes des réseaux sociaux. Elles sont entourées d'un cercle de 3 pixels et remplies de notre couleur bleu foncé. Vous remarquerez leur utilisation sur la page d'accueil et sur les pages « Lieu », mais elles pourraient être utilisées n'importe où.
Photographie
Le site propose trois types de photos : des gens, des vues panoramiques et des monuments. Nous proposons également deux traitements différents : en couleur et avec superposition bleue et texte. Cette page Google Photos est un excellent endroit pour rechercher des photos libres de droits, utilisables gratuitement par la ville. Nous avons rassemblé quelques-unes de nos photos préférées, mais il existe de nombreux endroits pour obtenir des photos gratuites de la ville. N'utilisez que les photos pour lesquelles la ville de Boston détient les droits. Si vous avez besoin d'aide, veuillez contacter l'équipe numérique.
Photos de stock de l'équipe numérique , BPL, Flickr , Library of Congress, page Flickr du maire, Archives de la ville.
PHOTOS DE PERSONNES AU NATUREL
Il s'agit de photos de citoyens et d'employés municipaux au travail, en train de jouer ou de se connecter avec leur communauté. Ces photos doivent offrir un regard sincère et rapproché sur les habitants de Boston dans leur vie quotidienne. Les photos de personnes doivent avant tout paraître réelles et authentiques, comme quelque chose de familier que l'on voit tous les jours, mais que l'on ne remarque peut-être pas. N'utilisez pas de mannequins. N'utilisez pas de photos de stock. Et ne demandez à personne de poser pour une photo. Il n'est même pas nécessaire que des personnes soient sur la photo, juste une preuve d'une forte présence humaine (comme une assiette à moitié mangée de délicieux plats locaux).
Essayez de trouver de vraies personnes faisant de vraies choses dans les quartiers moins « célèbres » de Boston. Trouvez des moments spontanés, où les gens ne savent pas que vous les photographiez.
Cherchez des moments où vous pouvez faire sentir à un vrai résident ou employé de Boston qu'il est un peu un héros dans ce qu'il fait. C'est ce qui est réalisé ici avec l'objectif grand angle et un point de vue plus bas.
Essayez de trouver des éléments intéressants dans votre composition sur lesquels vous concentrer – ce ne sont pas forcément des personnes, et c'est très bien. Ce type de photos est excellent car vous pouvez superposer du texte sur la partie floutée et le texte reste lisible. La présence humaine doit être suggérée, même s'il n'y a pas de personne sur la photo.
Évitez les clichés – trouvez une approche différente de Boston. Ne prenez pas les gens en photo d'en haut. Cela a tendance à ressembler à des photos de stock et à paraître moins réel.
PHOTOS DE PROFIL
Sur le site, les photos de profil des personnes doivent toujours être recadrées en cercle. Cela permet de distinguer et d'encadrer les photos plus formelles et officielles des élus des photos prises sur le vif. Nous savons que cela sera difficile avec autant d'employés municipaux, mais envisagez d'établir un style de photo de profil cohérent et facile à réaliser lors de l'embauche de nouveaux employés. Il devrait sembler qu'une seule équipe vous est au service.
HORIZONS URBAINS
Il n'y a rien de plus optimiste qu'un panorama urbain. Il est rempli de potentiel, d'espoir et d'histoires encore à découvrir. Les photos doivent mettre en valeur la diversité de notre ville à travers des perspectives inhabituelles. Aidez les gens à se ré-émerveiller devant Boston en photographiant les paysages urbains depuis des endroits atypiques. Trouvez la vue qui sera nouvelle pour les gens – pas celle qu'ils ont vue mille fois dans les brochures et les guides touristiques. Si ça ressemble à une photo de guide touristique, jetez-la ! Si ça ressemble à une photo de stock, jetez-la !
POINTS DE REPÈRE
Ce sont des photos qui montrent la ville elle-même sous un angle emblématique. L'histoire est tissée dans le tissu même de Boston, ce qui rend presque impossible de marcher dans la rue sans voir un monument historique à chaque coin de rue. De même que pour nos conseils sur la photographie du skyline de Boston, trouvez des perspectives inattendues pour photographier des monuments familiers. Prenez des photos du point de vue humain, qui n'est pas forcément le point de vue le plus spectaculaire. Cela signifie prendre des photos du panneau Citgo depuis le sol, et non depuis un hélicoptère au-dessus du Charles River. Zoomez et recadrez pour créer une image forte.
Boîte à outils du personnel
Veuillez dupliquer le document avant de commencer votre travail.
Veuillez dupliquer le document avant de commencer votre travail.
Veuillez dupliquer le document avant de commencer votre travail.
Google Docs
Google Docs
Veuillez dupliquer le document avant de commencer votre travail.
Fond d'écran pour téléphone et ordinateur de bureau dans notre marque.
Veuillez dupliquer le document avant de commencer votre travail.
Formulaires Google
Document Google
Mises en page pour les plateformes de médias
Mises en page pour les plateformes de médiasUn document PDF présentant les différents modèles et les restrictions de taille pour notre système de newsletter.
Consultez les spécifications les plus récentes concernant les dimensions des images pour les différents réseaux sociaux.
CHRONOLOGIE DE LA PRODUCTION
Si vous souhaitez démarrer un projet avec l'équipe créative, veuillez consulter le calendrier ci-dessous afin d'avoir une idée de ce à quoi vous attendre. La traduction ajoutera entre 24 heures et une semaine entière à la durée du projet.
- Contact pour le projet : Vous contactez l’équipe créative et leur donnez une idée générale du projet. Nous posons les mêmes questions à chaque client .
- Lors du lancement du projet, l'équipe créative demandera au client de répondre aux questions que nous lui avons envoyées à l'étape 1. Lors de cette revue, nous identifierons les obstacles et travaillerons avec le client pour trouver des solutions. Une fois que toute la documentation et les éléments finaux auront été remis à l'équipe créative, nous passerons à l'étape 3.
- Le travail créatif commence. Une fois prêt, l'équipe créative soumettra la première ébauche au client pour examen.
- Le client fournit un compte rendu et une critique. C'est la dernière occasion pour le client de modifier le texte/le scénario/l'histoire.
- Une fois le travail finalisé et approuvé, les éléments sont envoyés pour traduction. Toutes les traductions DOIVENT être relues attentivement. Vous pouvez le faire avec des fournisseurs LCA professionnels ou avec le groupe de bénévoles LCA. Nous donnerons à nos bénévoles LCA environ une semaine pour vérifier l'exactitude des traductions, mais si après une semaine elles ne sont toujours pas vérifiées, nous contacterons un deuxième fournisseur pour qu'il les vérifie. Si un deuxième fournisseur est nécessaire, les frais seront prélevés sur le budget LCA de votre département.
- Une fois les traductions finalisées, la vidéo/le visuel sont envoyés à l'imprimeur/au responsable des relations avec les médias/à la presse/à l'équipe de contenu pour publication.