Redesenhando a Página Inicial do ArcGIS Online de uma Cidade

RachelWeeden

<\/HEAD>

Se eu não fosse um profissional de GIS, sempre pensei que uma opção legal de trabalho alternativo seria nomear cores de tinta.<\/A> Claro, como profissional de GIS, eu brinco com cores aqui e ali - estilizando um mapa, projetando um aplicativo web, etc. Então, eu sabia que seria uma tarefa divertida quando, no início deste verão, a equipe de GIS da City of Boston<\/A> me deixou e LDafner-esristaff<\/A> ajudar com o redesenho do site ArcGIS Online<\/A>, que eles chamam de BostonMaps. E ainda melhor - o redesenho envolveu trabalhar com o novo estilo de cor web da City, que incluía tons maravilhosamente nomeados como Charles Blue<\/STRONG><\/SPAN> e Freedom Trail Red.<\/STRONG><\/SPAN><\/P><\/P>Um pouco de contexto - há vários anos, trabalhamos com a City em seu lançamento inicial do ArcGIS Online. Eles queriam causar um grande impacto e foram muito deliberados ao projetar sua presença no ArcGIS Online - criando um banner gráfico, personalizando a página inicial, criando novos ícones, etc. E o resultado foi muito usado por vários anos - mas era hora de uma atualização. Uma coisa que impulsionou a atualização foi que a City estava desenvolvendo um site web redesenhado - pilot.boston.gov<\/A> (agora lançado). Seria uma aparência e sensação completamente diferentes - a City desenvolveu uma nova diretriz de marca<\/A>, completa com novas tipografias, logos (e, claro, cores).<\/P>

<\/P>

Design e branding (especialmente em mídia digital) estão se tornando cada vez mais importantes para governos locais, e estou ouvindo cada vez mais profissionais de GIS mencionarem que querem construir mapas e apps cujo design seja harmonioso com os padrões de branding. Então, tivemos nossas ordens - fazer o novo design do BostonMaps harmonioso com o site pilot.boston.gov. Queria compartilhar detalhes do trabalho que fizemos, na esperança de que possa ser útil para outros passando por um processo semelhante. Aqui está a abordagem que adotamos, em três passos simples:<\/P>

<\/P>

1. Gráfico do banner:<\/STRONG>  Este é o chamariz da página inicial do ArcGIS Online! Já vi muitos ótimos exemplos de clientes que fazem suas próprias imagens usando as

diretrizes<\/A>. Para o BostonMaps, incorporamos uma captura de tela do mapa e adicionamos uma camada de Optimistic Blue<\/STRONG><\/SPAN> por cima. Usar a marca/logotipo B<\/STRONG><\/SPAN> (que também repetimos nas miniaturas) e marcar como um site oficial da City completa o visual:<\/P><\/P>2. Flat Design:<\/STRONG> Você pode ter notado que o gráfico do banner e as miniaturas parecem sutilmente diferentes do usual - a equipe web da City solicitou que usássemos um flat design e eliminássemos cantos arredondados e sombras para eliminar os efeitos que dão dimensão à página em favor de um visual mais minimalista (isso tem sido uma tendência popular de design web<\/A> há algum tempo): Para fazer isso, fomos às configurações da Página Inicial<\/A> e acessamos a visualização do código-fonte HTML<\/A>. Você sabia que pode realizar várias substituições de estilo na página inicial do ArcGIS Online inserindo código HTML/CSS nesta seção? Por exemplo, este trecho CSS remove os cantos arredondados & sombras de vários elementos da página inicial:<\/P>

<\/P>

<style><\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>\/<\/>* remove bordas arredondadas e sombra em caixa em:
#matrixLayout, /* banner org * /
#featuredMaps, /* controle itens destacados * /
#featuredMaps #fHeader,       /* cabeçalho controle itens destacados * /
.galleryNode.small .galleryThumbnail, /* itens destacados individuais * /
#bottomContent { /* descrição 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;
}

/* se você quiser remover a cor da borda inferior no controle itens destacados e descrição org * /

/* isso é visível quando a sombra da caixa é removida * /

#featuredMaps,
#bottomContent {
 border-bottom: none;
}

</style>

3. Ícones: Muitas pessoas usam a metade inferior da página inicial do ArcGIS como um contêiner para conteúdo adicional - talvez texto descritivo, links para apps populares ou informações de contato. A City queria usar essa área para promover três coleções do seu trabalho GIS: Story Maps, Open Ddata e Interactive Apps. Para espelhar o novo site Boston.gov, queríamos usar ícones para essas três categorias que combinassem com a mesma estética minimalista de desenho linear. Eu não sou artista, então tive que confiar em ícones disponíveis para uso. Apresento meu novo site favorito -

Noun Project<\/A>. Este site é uma ótima coleção de ícones que servem como representação visual da nossa linguagem - você pode encontrar uma grande variedade de imagens para qualquer coisa desde avião <\\/A> até . Encontramos ícones do mesmo artista para consistência e garantimos que estavam licenciados para nosso uso pretendido. Para torná-los mais 'mappy' adicionei um símbolo de alfinete nosso tom favorito de vermelho. O resultado:<\/P>

<\/P>

<\/P>

Juntas, essas três técnicas realmente tiveram um efeito transformador na página inicial do ArcGIS Online da Cidade - agora ela se integra perfeitamente com as outras propriedades web da Cidade, e tem uma aparência fresca e moderna que a equipe de GIS tem orgulho de mostrar. <\/P>

<\/P>

Confira você mesmo - você pode visitar o site aqui: 

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

GlennLetham2

Nice example and handy tips, thanks for sharing.