city_hall

Les sites officiels utilisent .boston.gov

A .boston.gov website belongs to an official government organization in the City of Boston.

lock

Secure .gov websites use HTTPS

Un cadenas or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

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.

Update color relationships wheel

Couleurs primaires

Ce sont les couleurs principales qui définissent la personnalité du site. Elles offrent une interprétation moderne de notre passé diversifié et fonctionnent bien ensemble pour créer l'identité visuelle du site.

 

Image for dk blue 300x300

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.

Optimistic Blue

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.

 

Image for red 300x300

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.

 

Image for color supporting blues

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.

 

Image for color supporting greys

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 et sceaux

Logo et sceaux
Image for city of boston b
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.

Image for offical boston digital seal white
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.

Image for cityseal150
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

Le langage typographique de Boston.gov repose sur deux polices de caractères. Elles ont été choisies pour leur contraste et leur caractère audacieux. Lora et Montserrat sont toutes deux des polices web Google .

MONTSERRAT

Inspirée des rues urbaines et des affiches qui les ornent, Montserrat est une police audacieuse, forte et officielle. Pourtant, elle possède quelques petites particularités qui lui confèrent une convivialité et une chaleur que l'on ne trouve généralement pas dans les polices sans serif aussi robustes. Utilisez-la pour la navigation, les boutons et les en-têtes principaux. Utilisez-la toujours en MAJUSCULES et en gras . Téléchargez-la.
Montserrat Gras

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

Image for lora 3

Polices de caractères pour d'autres langues

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

Instructions d'installation des polices de caractères
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

ICONOGRAPHIE
Image for experiential
ICÔ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.

Image for departmental
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 ).

Image for small circular
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).

A person rowing in the City of Boston

Image for pool

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.

Image for  public works truck mechanic

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.

Image for i voted photo

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.

Image for bad stock 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.

Image for bad stock photo
Ce sont des citoyens adorables, mais cette photo est beaucoup trop posée. Prenez une photo plus spontanée. Et n'utilisez jamais de selfies.
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.

Headshots of City Councilors

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 !

Image for the Boston Tea Party Museum

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.

Image for the granary burying ground snow

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.

  1. 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 .
  2. 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.
  3. Le travail créatif commence. Une fois prêt, l'équipe créative soumettra la première ébauche au client pour examen.
  4. 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.
  5. 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.
  6. 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.
Haut de page