Neugestaltung der ArcGIS Online-Startseite einer Stadt

RachelWeeden

<\/HEAD>

Wenn ich kein GIS-Fachmann wäre, dachte ich immer, eine coole Backup-Joboption wäre es, Farben zu benennen.<\/A> Natürlich darf ich als GIS-Fachmann hier und da mit Farbe spielen – eine Karte gestalten, eine Web-App designen usw. Deshalb wusste ich, dass es ein spaßiger Auftrag sein würde, als mir Anfang dieses Sommers das GIS-Team der Stadt Boston<\/A> und LDafner-esristaff<\/A> bei der Neugestaltung ihrer ArcGIS Online<\/A>-Seite halfen, die sie BostonMaps nennen. Und noch besser – die Neugestaltung beinhaltete die Arbeit mit dem neuen Web-Farbstil der Stadt, der wunderbar benannte Farbtöne wie Charles Blue<\/STRONG><\/SPAN> und Freedom Trail Red.<\/STRONG><\/SPAN><\/P><\/P>Einige Hintergrundinformationen – vor einigen Jahren arbeiteten wir mit der Stadt an ihrer ersten ArcGIS Online-Veröffentlichung. Sie wollten einen großen Eindruck machen und waren sehr bedacht darauf, ihre ArcGIS Online-Präsenz zu gestalten – ein Bannerbild zu erstellen, die Startseite anzupassen, neue Symbole zu kreieren usw. Das Ergebnis wurde mehrere Jahre gut genutzt – aber es war Zeit für ein Update. Ein Grund für das Update war, dass die Stadt eine neu gestaltete Website entwickelte – pilot.boston.gov<\/A> (jetzt veröffentlicht). Es sollte ein völlig anderes Aussehen und Gefühl werden – die Stadt entwickelte eine neue Markenrichtlinie<\/A>, komplett mit neuen Schriftarten, Logos (und natürlich Farben).<\/P>

<\/P>

Design und Branding (besonders in digitalen Medien) werden für Kommunalverwaltungen immer wichtiger, und ich höre zunehmend von GIS-Fachleuten, dass sie Karten und Apps erstellen wollen, deren Design harmonisch mit den Branding-Standards ist. Also hatten wir unseren Auftrag – das neue BostonMaps-Design harmonisch mit der pilot.boston.gov-Seite zu gestalten. Ich möchte Details unserer Arbeit teilen in der Hoffnung, dass es für andere in einem ähnlichen Prozess nützlich sein könnte. Hier ist der Ansatz, den wir in drei einfachen Schritten verfolgten:<\/P>

<\/P>

1. Banner-Grafik:<\/STRONG>  Dies ist der Blickfang einer ArcGIS Online-Startseite! Ich habe viele großartige Beispiele von Kunden gesehen, die ihre eigenen Bilder mit

diesen Richtlinien<\/A> erstellen. Für BostonMaps integrierten wir einen Kartenausschnitt und legten eine Schicht von Optimistic Blue<\/STRONG><\/SPAN> darüber. Die Verwendung des B<\/STRONG><\/SPAN>-Zeichens/Logos (das wir auch in Miniaturansichten wiederholten) und das Tagging zur Kennzeichnung als offizielle Website der Stadt vervollständigen den Look:<\/P><\/P>2. Flat Design:<\/STRONG> Vielleicht ist Ihnen aufgefallen, dass die Banner-Grafik und Miniaturansichten subtil anders aussehen als üblich – das Webteam der Stadt bat uns, ein Flat Design zu verwenden und abgerundete Ecken sowie Schatten zu entfernen, um die Effekte zu eliminieren, die der Seite Dimension verleihen zugunsten eines minimalistischen Looks (dies ist seit einiger Zeit ein beliebter Webdesign-Trend<\/A>): Dazu gingen wir in die Einstellungen der Startseite<\/A> und öffneten die HTML-Quellcodeansicht<\/A>. Wussten Sie, dass Sie verschiedene Stilüberschreibungen für die ArcGIS Online-Startseite vornehmen können, indem Sie HTML/CSS-Code in diesen Bereich einfügen? Zum Beispiel entfernt dieser CSS-Schnipsel abgerundete Ecken & Schatten von verschiedenen Elementen der Startseite:<\/P>

<\/P>

<style><\/SPAN><\/P>\/* entferne abgerundete Ränder und Box-Schatten bei: *\/
#matrixLayout, \/* org banner *\/
#featuredMaps, \/* featured items control *\/
#featuredMaps #fHeader,       \/* featured items control header *\/
.galleryNode.small .galleryThumbnail, \/* einzelne vorgestellte Elemente *\/
#bottomContent { \/* org description *\/
 -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;
}
\/* wenn Sie die untere Randfarbe bei featured items control und org description entfernen möchten *\/
\/* dies ist sichtbar wenn der box-shadow entfernt wird *\/
#featuredMaps,
#bottomContent {
 border-bottom: none;
}
<\/_style>
<\/_style>

3. Symbole<\/STRONG>: Viele verwenden den unteren Bereich der ArcGIS-Startseite als Container für zusätzlichen Inhalt – vielleicht beschreibenden Text, Links zu beliebten Apps oder Kontaktinformationen. Die Stadt wollte diesen Bereich nutzen, um drei Sammlungen ihrer GIS-Arbeit zu bewerben: Story Maps, Open Ddata und Interactive Apps. Um die neue Boston.gov-Seite widerzuspiegeln, wollten wir Symbole für diese drei Kategorien verwenden, die denselben minimalistischen Linienzeichnungsstil haben. Ich bin kein Künstler, also musste ich mich auf verfügbare Symbole verlassen. Hier kommt meine neue Lieblingswebseite ins Spiel –

Noun Project<\/_A>. Diese Webseite ist eine großartige Sammlung von Symbolen als visuelle Darstellung unserer Sprache – man findet eine große Vielfalt an Bildern für alles von Flugzeug <\/_A> bis hin zu Zebra<\/_A>. Wir fanden Symbole desselben Künstlers für Konsistenz und stellten sicher, dass sie für unsere beabsichtigte Nutzung lizenziert sind. Um sie "mappiger" zu machen fügte ich ein Stecknadel-Symbol hinzu unsere Lieblingsrotton. Das Ergebnis:<\/P>

<\/P>

<\/P>

Zusammen hatten diese drei Techniken wirklich eine transformative Wirkung auf die ArcGIS Online-Startseite der Stadt – jetzt fügt sie sich ziemlich nahtlos in die anderen Webauftritte der Stadt ein und hat ein frisches, modernes Aussehen, auf das das GIS-Team stolz ist.<\/P>

<\/P>

Schauen Sie es sich selbst an – Sie können die Seite hier besuchen: 

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

GlennLetham2

Nice example and handy tips, thanks for sharing.