Het herontwerpen van de ArcGIS Online-startpagina van een stad

RachelWeeden

<\/HEAD>

Als ik geen GIS-professional was, dacht ik altijd dat een coole back-up baanoptie zou zijn om verfkleuren te benoemen.<\/A> Natuurlijk mag ik als GIS-professional hier en daar met kleur spelen - het stylen van een kaart, het ontwerpen van een webapp, enzovoort. Dus ik wist dat het een leuke opdracht zou zijn toen, eerder deze zomer, het GIS-team van de stad Boston<\/A> mij en LDafner-esristaff<\/A> liet helpen met een herontwerp van hun ArcGIS Online<\/A>-site, die ze BostonMaps noemen. En nog beter - het herontwerp betrof het werken met de nieuwe webkleurstijl van de stad, die prachtig benoemde tinten bevatte zoals Charles Blue<\/STRONG><\/SPAN> en Freedom Trail Red.<\/STRONG><\/SPAN><\/P><\/P>Enige achtergrond - enkele jaren geleden werkten we samen met de stad aan hun eerste ArcGIS Online-release. Ze wilden een grote indruk maken en waren zeer doordacht bezig met het ontwerpen van hun ArcGIS Online-aanwezigheid - het creëren van een bannerafbeelding, het aanpassen van de startpagina, het maken van nieuwe pictogrammen, enzovoort. En het resultaat werd meerdere jaren goed gebruikt - maar het was tijd voor een update. Een reden voor de update was dat de stad een herontworpen website ontwikkelde - pilot.boston.gov<\/A> (nu uitgebracht). Het zou een compleet andere look en feel krijgen - de stad ontwikkelde een nieuwe merkhandleiding<\/A>, compleet met nieuwe lettertypen, logo's (en natuurlijk kleuren).<\/P>

<\/P>

Ontwerp en branding (vooral in digitale media) worden steeds belangrijker voor lokale overheden, en ik hoor steeds vaker GIS-professionals zeggen dat ze kaarten en apps willen bouwen waarvan het ontwerp harmonieert met de merkstandaarden. Dus we hadden onze opdracht - maak het nieuwe BostonMaps-ontwerp harmonieus met de pilot.boston.gov-site. Ik wilde details delen van het werk dat we deden, in de hoop dat het nuttig kan zijn voor anderen die door een vergelijkbaar proces gaan. Hier is de aanpak die we namen, in drie eenvoudige stappen:<\/P>

<\/P>

1. Bannerafbeelding:<\/STRONG>  Dit is de blikvanger van een ArcGIS Online-startpagina! Ik heb veel geweldige voorbeelden gezien van klanten die hun eigen afbeeldingen maken volgens

deze richtlijnen<\/A>. Voor BostonMaps verwerkten we een kaart-screenshot en voegden er een laag Optimistic Blue<\/STRONG><\/SPAN> bovenop toe. Het gebruik van het B<\/STRONG><\/SPAN>-teken/logo (dat we ook herhaalden in miniaturen) en tagging om het als officiële site van de stad te markeren maakt de look compleet:<\/P><\/P>2. Flat Design:<\/STRONG> Je hebt misschien gemerkt dat de bannerafbeelding en miniaturen subtiel anders lijken dan gewoonlijk - het webteam van de stad vroeg ons om een flat design te gebruiken en afgeronde hoeken en slagschaduwen te elimineren om effecten die dimensie aan de pagina geven te verwijderen ten gunste van een meer minimalistische uitstraling (dit is al geruime tijd een populaire webdesigntrend<\/A>): Om dit te doen gingen we naar de instellingen voor startpagina<\/A> en openden we de HTML-broncodeweergave<\/A>. Wist je dat je verschillende stijloverschrijvingen kunt uitvoeren op de ArcGIS Online-startpagina door HTML/CSS-code in dit gedeelte in te voegen? Bijvoorbeeld, deze CSS-code verwijdert afgeronde hoeken & schaduwen van verschillende elementen op de startpagina:<\/P>

<\/P>

<style><\/><\/><\/>

\/* verwijder afgeronde randen en box-shadow op: *\/<\/><\/><\/>

#matrixLayout, \/* org banner *\/<\/><\/><\/>

#featuredMaps, \/* featured items control *\/<\/><\/><\/>

#featuredMaps #fHeader,       \/* featured items control header *\/<\/><\/><\/>

.galleryNode.small .galleryThumbnail, \/* individuele featured items *\/<\/><\/><\/>

#bottomContent { \/* org beschrijving *\/<\/><\/><\/>

 -webkit-border-radius: 0;<\/><\/><\/>

 -moz-border-radius: 0;<\/><\/><\/>

 -o-border-radius: 0;<\/><\/><\/>

 border-radius: 0;<\/><\/><\/>

 -webkit-box-shadow:none;<\/><\/><\/>

 -o-box-shadow:none;<
/P>

 box-shadow:none;<
/P>

}<
/P>

/* als je de onderste randkleur wilt verwijderen op featured items control en org beschrijving */

/* dit is zichtbaar wanneer box-shadow is verwijderd */


#featuredMaps,


#bottomContent {


 border-bottom:none;


}

pstyle= "padding-left:\n90px">
l
p

3.Iconen: Veel mensen gebruiken de onderste helft van de ArcGIS-startpagina als container voor extra inhoud - misschien beschrijvende tekst, links naar populaire apps of contactinformatie. De stad wilde dit gebied gebruiken om drie collecties van hun GIS-werk te promoten : Story Maps , Open Ddata en Interactive Apps . Om het nieuwe Boston.gov-site te spiegelen , wilden we iconen gebruiken voor deze drie categoriedie dezelfde minimale lijntekening esthetiek hadden . Ik ben geen kunstenaar , dus moest ik vertrouwen op iconen die beschikbaar waren om te gebruiken . Maak kennis met mijn nieuwe favoriete website - Noun Project . Deze website is een geweldige verzameling iconen die dienen als visuele representatie van onze taal - je kunt een grote verscheidenheid aan afbeeldingen vinden voor alles van vliegtuig &nbsp ; tot zebra . We vonden iconen door dezelfde kunstenaar voor consistentie , en zorgden ervoor dat ze gelicentieerd waren voor ons beoogde gebruik . Om ze meer 'mappy' te maken voegde ik een pushpin-symbool toe in onze favoriete tint rood. Het resultaat:<\/P>

<\/P>

<\/P>

Gezamenlijk hadden deze drie technieken echt een transformerend effect op de ArcGIS Online startpagina van de stad - nu sluit het naadloos aan bij de andere webproperties van de stad, en heeft het een frisse, moderne uitstraling waar het GIS-personeel trots op is om te tonen. <\/P>

<\/P>

Bekijk het zelf - je kunt de site hier bezoeken: http:\/\/boston.maps.arcgis.com<\/A><\/STRONG><\/P><\/BODY><\/HTML>

GlennLetham2

Nice example and handy tips, thanks for sharing.