Rediseñando la página de inicio de ArcGIS Online de una ciudad

RachelWeeden

<\/HEAD>

Si no fuera un profesional de GIS, siempre pensé que una opción genial como trabajo alternativo sería nombrar colores de pintura.<\/A> Por supuesto, como profesional de GIS, puedo jugar con el color aquí y allá - estilizando un mapa, diseñando una aplicación web, etc. Así que, supe que sería una tarea divertida cuando, a principios de este verano, el equipo GIS de la Ciudad de Boston<\/A> me permitió a mí y a LDafner-esristaff<\/A> ayudar con un rediseño de su sitio ArcGIS Online<\/A>, que llaman BostonMaps. Y aún mejor - el rediseño involucró trabajar con el nuevo estilo de color web de la Ciudad, que incluía tonos maravillosamente nombrados como Charles Blue<\/STRONG><\/SPAN> y Freedom Trail Red.<\/STRONG><\/SPAN><\/P><\/P>Un poco de contexto - hace varios años, trabajamos con la Ciudad en su lanzamiento inicial de ArcGIS Online. Querían causar un gran impacto y fueron muy deliberados al diseñar su presencia en ArcGIS Online - creando un gráfico para el banner, personalizando la página principal, creando nuevos íconos, etc. Y el resultado se usó mucho durante varios años - pero era hora de una actualización. Una cosa que impulsó la actualización fue que la Ciudad estaba desarrollando un sitio web rediseñado - pilot.boston.gov<\/A> (ya lanzado). Tendría un aspecto y sensación completamente diferentes - la Ciudad desarrolló una nueva guía de marca<\/A>, completa con nuevas tipografías, logotipos (y, por supuesto, colores).<\/P>

<\/P>

El diseño y la marca (especialmente en medios digitales) están siendo cada vez más importantes para los gobiernos locales, y cada vez escucho más a profesionales GIS mencionar que quieren construir mapas y aplicaciones cuyo diseño sea armonioso con los estándares de marca. Así que, teníamos nuestras órdenes claras - hacer que el nuevo diseño de BostonMaps fuera armonioso con el sitio pilot.boston.gov. Quería compartir detalles del trabajo que hicimos, con la esperanza de que pueda ser útil para otros que estén pasando por un proceso similar. Aquí está el enfoque que tomamos, en tres pasos simples:<\/P>

<\/P>

1. Gráfico del banner:<\/STRONG>  ¡Este es el llamador de atención de una página principal de ArcGIS Online! He visto muchos grandes ejemplos de clientes que hacen sus propias imágenes usando

estas directrices<\/A>. Para BostonMaps, incorporamos una captura de pantalla del mapa y añadimos una capa de Optimistic Blue<\/STRONG><\/SPAN> encima. Usar la marca/logotipo B<\/STRONG><\/SPAN> (que también repetimos en miniaturas) y etiquetarlo como un sitio oficial de la Ciudad completa el aspecto:<\/P><\/P>2. Diseño plano:<\/STRONG> Puede que hayas notado que el gráfico del banner y las miniaturas se ven sutilmente diferentes a lo habitual - el equipo web de la Ciudad solicitó que usáramos un diseño plano y elimináramos las esquinas redondeadas y las sombras para eliminar los efectos que dan dimensión a la página en favor de un aspecto más minimalista (esto ha sido una tendencia popular en diseño web<\/A> desde hace tiempo): Para hacer esto, fuimos a la configuración de la página principal<\/A> y accedimos a la vista del código fuente HTML<\/A>. ¿Sabías que puedes realizar varias anulaciones de estilo en la página principal de ArcGIS Online insertando código HTML/CSS en esta sección? Por ejemplo, este fragmento CSS elimina las esquinas redondeadas y sombras de varios elementos de la página principal:<\/P>

<\/P>

<style><\/SPAN><\/P>\/* eliminar bordes redondeados y sombra en: *\/


#matrixLayout, \/* banner org *\/
#featuredMaps, \/* control elementos destacados *\/
#featuredMaps #fHeader,       \/* encabezado control elementos destacados *\/
.galleryNode.small .galleryThumbnail, \/* elementos destacados individuales *\/
#bottomContent { \/* descripción 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 quieres eliminar el color del borde inferior en control elementos destacados y descripción org *\/
\/* esto es visible cuando se elimina la sombra *\/
#featuredMaps,
#bottomContent {
 border-bottom: none;
}
<\/_style>
<\/_p></style>

3. Íconos: Muchas personas usan la mitad inferior de la página principal de ArcGIS como contenedor para contenido adicional - quizás texto descriptivo, enlaces a aplicaciones populares o información de contacto. La Ciudad quería usar esta área para promover tres colecciones de su trabajo GIS: Story Maps, Open Ddata e Interactive Apps. Para reflejar el nuevo sitio Boston.gov, queríamos usar íconos para estas tres categorías que coincidieran con la misma estética minimalista de dibujo lineal. No soy artista, así que tuve que confiar en íconos disponibles para usar. Entró mi nuevo sitio web favorito -

Noun Project. Este sitio web es una gran colección de íconos que sirven como representación visual de nuestro lenguaje - puedes encontrar una amplia variedad de imágenes para cualquier cosa desde avión hasta cebra. Encontramos íconos del mismo artista para mantener consistencia y nos aseguramos que estuvieran licenciados para nuestro uso previsto. Para hacerlos más 'mappy' agregué un símbolo de chincheta en nuestro tono favorito de rojo. El resultado:<\/P>

<\/P>

<\/P>

Juntas, estas tres técnicas realmente tuvieron un efecto transformador en la página principal de ArcGIS Online de la Ciudad - ahora se integra bastante bien con las otras propiedades web de la Ciudad, y tiene un aspecto fresco y moderno que el personal de GIS está orgulloso de mostrar. <\/P>

<\/P>

Compruébalo tú mismo - puedes visitar el sitio aquí: http:\/\/boston.maps.arcgis.com<\/A><\/STRONG><\/P><\/BODY><\/HTML>

GlennLetham2

Nice example and handy tips, thanks for sharing.