Refonte de la page d'accueil ArcGIS Online d'une ville

RachelWeeden

<\/HEAD>

Si je n'étais pas un professionnel GIS, j'ai toujours pensé qu'une option de travail de secours cool serait de nommer des couleurs de peinture.<\/A> Bien sûr, en tant que professionnel GIS, je peux jouer avec la couleur ici et là - styliser une carte, concevoir une application web, etc. Donc, je savais que ce serait une mission amusante quand, plus tôt cet été, l'équipe GIS de la City of Boston<\/A> m'a permis ainsi qu'à LDafner-esristaff<\/A> d'aider à la refonte de leur site ArcGIS Online<\/A>, qu'ils appellent BostonMaps. Et encore mieux - la refonte impliquait de travailler avec le nouveau style de couleur web de la City, qui comprenait des teintes merveilleusement nommées comme Charles Blue<\/STRONG><\/SPAN> et Freedom Trail Red.<\/STRONG><\/SPAN><\/P><\/P>Un peu de contexte - il y a plusieurs années, nous avons travaillé avec la City sur leur première version d'ArcGIS Online. Ils voulaient faire sensation et ont été très délibérés dans la conception de leur présence ArcGIS Online - créant une bannière graphique, personnalisant la page d'accueil, créant de nouvelles icônes, etc. Et le résultat a été bien utilisé pendant plusieurs années - mais il était temps d'une mise à jour. Une chose qui a motivé cette mise à jour était que la City développait un site web repensé - pilot.boston.gov<\/A> (maintenant publié). Ce serait un look et une sensation complètement différents - la City a développé une nouvelle charte graphique<\/A>, complète avec de nouvelles polices, logos (et, bien sûr, couleurs).<\/P>

<\/P>

Le design et le branding (surtout dans les médias numériques) deviennent de plus en plus importants pour les gouvernements locaux, et j'entends de plus en plus souvent des professionnels GIS mentionner qu'ils veulent construire des cartes et des applications dont le design est harmonieux avec les standards de branding. Donc, nous avions nos ordres - rendre le nouveau design BostonMaps harmonieux avec le site pilot.boston.gov. Je voulais partager les détails du travail que nous avons fait, dans l'espoir que cela puisse être utile à d'autres traversant un processus similaire. Voici l'approche que nous avons prise, en trois étapes simples:<\/P>

<\/P>

1. Bannière graphique:<\/STRONG>  C'est l'élément accrocheur d'une page d'accueil ArcGIS Online ! J'ai vu beaucoup d'excellents exemples de clients qui créent leurs propres images en utilisant

ces directives<\/A>. Pour BostonMaps, nous avons incorporé une capture d'écran de carte et ajouté une couche de Optimistic Blue<\/STRONG><\/SPAN> par-dessus. En utilisant le signe/logo B<\/STRONG><\/SPAN> (que nous avons également répété dans les vignettes) et le marquage pour le qualifier comme un site officiel de la City complètent le look :<\/P><\/P>2. Flat Design:<\/STRONG> Vous avez peut-être remarqué que la bannière graphique et les vignettes ont un aspect subtilement différent du habituel - l'équipe web de la City a demandé que nous utilisions un flat design et éliminions les coins arrondis ainsi que les ombres portées pour supprimer les effets qui donnent de la dimension à la page au profit d'un look plus minimaliste (cette tendance est populaire dans le design web depuis un certain temps) : Pour ce faire, nous sommes allés dans les paramètres de la page d'accueil<\/A> et avons accédé à la vue du code source HTML<\/A>. Saviez-vous que vous pouvez effectuer diverses surcharges de style sur la page d'accueil ArcGIS Online en insérant du code HTML/CSS dans cette section ? Par exemple, ce fragment CSS supprime les coins arrondis & ombres portées de divers éléments de la page d'accueil :<\/P>

<\/P>

<style><\/SPAN><\/P>\/* supprimer les bordures arrondies et box-shadow sur : *\/
#matrixLayout, \/* bannière org *\/
#featuredMaps, \/* contrôle des éléments mis en avant *\/
#featuredMaps #fHeader,       \/* en-tête du contrôle des éléments mis en avant *\/
.galleryNode.small .galleryThumbnail, \/* éléments mis en avant individuels *\/
#bottomContent { \/* description org *\/
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 -o-border-radius: 0;
 border-radius: 0;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 -o-box-shadow: none;
 box-shadow: none;
}
\/* si vous voulez supprimer la bordure inférieure sur le contrôle des éléments mis en avant et la description org *\/
\/* ceci est visible lorsque box-shadow est supprimé *\/
#featuredMaps,
#bottomContent {
 border-bottom: none;
}
<\style>

3. Icônes: Beaucoup utilisent la moitié inférieure de la page d'accueil ArcGIS comme conteneur pour du contenu additionnel - peut-être du texte descriptif, des liens vers des applications populaires ou des informations de contact. La City voulait utiliser cette zone pour promouvoir trois collections de leur travail GIS : Story Maps, Open Ddata et Interactive Apps. Pour refléter le nouveau site Boston.gov, nous voulions utiliser des icônes pour ces trois catégories qui correspondaient à la même esthétique minimaliste en dessin linéaire. Je ne suis pas artiste, donc j'ai dû me fier aux icônes disponibles à l'utilisation. Voici mon nouveau site web préféré -

<\/P>

<\/P>

Ensemble, ces trois techniques ont vraiment eu un effet transformationnel sur la page d'accueil ArcGIS Online de la Ville - elle s'intègre désormais parfaitement avec les autres propriétés web de la Ville, et présente un look frais et moderne dont le personnel SIG est fier de montrer. <\/P>

<\/P>

Découvrez-le par vous-même - vous pouvez visiter le site ici : 

http:\/\/boston.maps.arcgis.com<\/A><\/STRONG><\/P><\/BODY><\/HTML>

GlennLetham2

Nice example and handy tips, thanks for sharing.