Aplicativos do Windows
Recolher sumário
Expandir sumário

Definindo a identidade visual de seu aplicativo

Vejamos algumas das muitas possibilidades criativas que designers e desenvolvedores de aplicativos podem usar para incorporar identidade visual nos aplicativos da Windows Store.

Por que incorporar sua marca em seu aplicativo?

Uma marca define as qualidades pelas quais uma empresa quer ser conhecida. Ao projetar seus aplicativos da Windows Store, você precisa tomar decisões ponderadas para garantir que seus aplicativos incorporem a essência de sua marca. Da mesma forma que uma marca define um negócio, expressar a sua marca em seu aplicativo da Windows Store o diferencia de todos os outros aplicativos. Vamos dar uma olhada em um exemplo.

Este é um exemplo de aplicativo da Windows Store antes da identidade visual:

Exemplo de aplicativo da Windows Store para a Confeitaria Contoso antes da identidade visual.
O exemplo da Confeitaria Contoso ilustra como poderá ser a aparência de um aplicativo para confeitaria se ele aderir aos princípios de design da Microsoft. Este exemplo é bom para colocar conteúdo na frente e no centro, mas não transmite de forma eficiente a marca da confeitaria.

 

Veja o mesmo aplicativo de exemplo depois da identidade visual:

Exemplo de aplicativo da Windows Store para a Confeitaria Contoso depois da identidade visual.
Nesta versão do aplicativo da Confeitaria Contoso, algumas mudanças óbvias tornam este aplicativo mais atraente. Ao incorporar mais da marca da confeitaria, o conteúdo do aplicativo é apresentado de forma mais convincente, e a aparência geral do aplicativo evoca a essência da confeitaria.

 

Como incorporar sua marca

A expressão da sua marca é conseguida através de um conjunto de elementos visuais. Por exemplo, uma paleta de cores distintas, gráficos, layout e estilo de fotos funcionam todos juntos para criar uma marca reconhecível e replicável, através de uma variedade de mídias, como transmissão, impressão, Web e aplicativos da Windows Store.

Pense nesses elementos visuais como os botões e indicadores que você manipula pelo código para criar uma aparência exclusiva em seu aplicativo da Windows Store.

Elemento visualDescrição
Cores

A cor é um atributo fundamental para expressar sua marca. Aplique a cor principal associada à sua marca para que as pessoas saibam que esse aplicativo é da sua empresa.

Gráficos

Use gráficos para reforçar sua marca, adicionando qualidade à apresentação do conteúdo. Porém, o excesso de gráficos pode interferir no fluxo do seu conteúdo e parecer mera decoração ou ser um elemento de distração.

Imagens

Ilustrações e fotografias também devem refletir sua marca. Reutilize imagens e estilos de outros meios de comunicação ou sites da sua empresa.

Grade

O sistema de grade dos aplicativos da Windows Store ajuda a padronizar os elementos visuais da apresentação do seu aplicativo. A grade alinha a IU do aplicativo com a sua marca para trabalhar com o resto do Windows.

Layout

A distribuição dos elementos visuais em todas as páginas precisa ser relevante para a sua marca. Você deve fazer o possível para manter a consistência entre as páginas e os tipos de conteúdo.

Logotipo

Use seu logotipo para permitir que as pessoas identifiquem rapidamente seu aplicativo e reconheçam sua marca.

Tipografia

As faces de tipo são fundamentais para os aplicativos da Windows Store. A escolha certa pode ser tão impactante para sua marca quanto as cores, o logotipo ou o layout, então seja cauteloso com a tipografia que usa.

 

Exemplo de aplicativo de linha de negócios

Atribuir uma identidade visual a aplicativos de LOB (linha de negócios) é importante dos pontos de vista comercial e empresarial. Este exemplo demonstra como inserir uma marca em um aplicativo comercial e empresarial de uma empresa de serviços expressos.

Elementos da marca da empresa

A Fabrikam Worldwide Logistics fornece três níveis de serviços expressos internacionais. Os clientes-alvo são proprietários de pequenas empresas que desejam criar e gerenciar remessas com facilidade. Remessas globais confiáveis e transações tranquilas são as mensagens centrais aos clientes.

Elemento da marcaDescrição

Marca principal do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store

A marca principal expressa a paixão em fornecer serviços globais confiáveis usando elementos gráficos, como o mapa e a faixa.

Logotipos do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store

Com base na marca principal, o logotipo de cada serviços indica os três níveis de serviços.

Elementos da marca do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store

Os elementos da marca (como a linha pontilhada e o mapa) nos pacotes são reutilizados no design do aplicativo para criar um panorama de identidade visual coeso.

 

Criando uma remessa

Um cliente de uma pequena empresa faz logon em sua conta para renovar uma remessa.

Página de logon, com a identidade visual no cabeçalho, do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store
A cor, as imagens e o logotipo são utilizados no cabeçalho e nas páginas como elementos de identidade visual.

 

Na página da conta, a cor, as imagens (a faixa e a linha pontilhada) e a fonte representam a marca principal. A marca do cliente é compartilhada no cabeçalho.

Página da Coho Craftsman mostrando co-branding do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store
O compartilhamento de marca do cliente é inspirado nas fontes da marca principal e usa a fonte serif Constantia no título e a fonte sans-serif Corbel no restante do aplicativo.

 

A página de transações usa um padrão de navegação simples. Um usuário pode realizar o movimento panorâmico de todas as seções para visualizar e modificar as informações.

Padrão de navegação simples do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando movimento panorâmico horizontal em uma página

Padrão de navegação simples do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando movimento panorâmico horizontal à esquerda da página

Padrão de navegação simples do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando movimento panorâmico horizontal no meio da página

Padrão de navegação simples do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando movimento panorâmico horizontal à direita da página

Os usuários podem navegar para o modo de exibição de zoom semântico a partir da página de transações para ver o histórico de todas as transações com informações resumidas.

Padrão de navegação simples do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando zoom semântico, exibição reduzida

Padrão de navegação simples do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando zoom semântico, movimento panorâmico em uma exibição reduzida
Os elementos da marca, como cor, imagens, logotipos de serviços e fontes, são usados de forma consistente para transmitir a essência dos negócios.

 

Um usuário navega para outras categorias usando a barra de navegação.

Barra de navegação do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store

Entregando uma remessa

Um motorista usa o aplicativo para entregar remessar aos clientes. Usando o design em duas colunas para exibir o inventário à esquerda e o conteúdo à direita, o motorista pode navegar facilmente pelas informações detalhadas de uma remessa. Os elementos de identidade visual, como a faixa e os controles comuns, são usados de forma consistente em todo o aplicativo.

Página dividida em duas colunas do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando inventário e mapa

Quando o motorista chega, a coluna direita mostra os detalhes em uma lista com rolagem vertical. Tanto a lista do inventário quanto o conteúdo detalhado rolam na mesma direção.

Página dividida em duas colunas do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, mostrando lista de inventário e detalhes
O gráfico informativo que ajuda o motorista a localizar a remessa no caminhão usa as mesmas cores de identidade visual usadas em outras partes do aplicativo.

 

Quando o motorista pede a assinatura do cliente, o aplicativo mostra a página de assinaturas no modo de exibição retrato e exibe a barra de navegação com a marca. É mais fácil para o motorista entregar o dispositivo ao cliente no modo de exibição retrato.

Página de assinatura do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, orientação retrato
O momento da assinatura é essencial para a identidade visual. O usuário entra em contato com o aplicativo e a marca da empresa.

 

Quando o motorista coleta a assinatura, o aplicativo mostra os itens restantes e os gráficos do progresso.

Página de lista de inventário do aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store, orientação retrato

Compartilhando a marca de seu aplicativo

Um relacionamento entre duas ou mais marcas é chamado de "compartilhamento de marca". Tenha em mente as seguintes perguntas ao desenvolver um aplicativo que precisa conter várias marcas:

  • Qual marca é a mais importante na comunicação?
  • Qual a função da marca de suporte na comunicação?

Um aplicativo da Windows Store que não consiga responder a essas perguntas corre o risco de confundir os clientes e enfraquecer a marca.

Co-branding no aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store

O exemplo da Fabrikam lida com o compartilhamento de marca ao reforçar sua marca por meio de uma implementação consistente de elementos visuais. Por exemplo: a as imagens, o layout, a fonte e a cor da marca da Fabrikam aparecem em todo o aplicativo e possuem um conjunto limitado de variações de estilo. Cada página do aplicativo mostra claramente que ele foi desenvolvido pela Fabrikam.

Para indicar que a marca da Coho Craftsman é secundária em relação à marca principal, o logotipo, a fonte e a imagem da Coho Craftsman estão conectados ao layout da Fabrikam. Você pode imaginar, por exemplo, outros parceiros de pequeno porte da Fabrikam no lugar atualmente ocupado pela Coho Craftsman.

Co-branding no aplicativo de exemplo Fabrikam Worldwide Logistics da Windows Store

Este exemplo também mostra outras marcas. As empresas de cartão de crédito à esquerda da página aparecem como marcas de nível inferior. Isso ocorre em parte em função do tamanho pequeno, posicionamento específico do conteúdo e cores limitadas. No lado direito da página, as marcas dos fabricantes de roupas aparecem com um logotipo monocromático, com tamanho reduzido e de acordo com o estilo de design da marca principal. Em todos os casos, os elementos visuais foram modificados de modo a dar destaque às marcas de suporte, mas não tanto quanto a marca principal.

Exemplos que evocam marcas exclusivas

Veja alguns exemplos que mostram como cada elemento visual ajuda a evocar sentimentos e emoções diferentes. As descrições de cada elemento visual fornecem detalhes específicos sobre como o layout foi criado e por que isso é importante.

Cafeteria Contoso

Um exemplo de aplicativo da Windows Store para a Cafeteria Contoso, mostrando como a marca é expressa por meio de cores, grade, layout e tipografia.
A Cafeteria Contoso é uma marca conhecida por ser autêntica. Ela tem pratos artesanais e especialidade em bebidas caseiras. Neste exemplo, a cor, a grade, o layout e a tipografia são os elementos visuais usados principalmente para evocar a marca.

 

Exemplo de paleta de cores para a identidade visual de um aplicativo da Windows Store.Cores   Uma cor cinza escuro, perolada e cobre quente dá uma aparência sofisticada a este design. A paleta quente evoca algumas das mesmas cores que você encontraria em uma crosta de pão, sopa ou massa caseira.
Exemplo de grade para a identidade visual de um aplicativo da Windows Store.Grade   Neste exemplo, o conteúdo "quebra" a grade intencionalmente. O conteúdo do menu é fundamental para esta marca, portanto, a margem superior é reduzida para fornecer mais espaço para o menu. A margem esquerda é ajustada de forma que o nome da empresa, o texto introdutório e as informações de localidade fiquem mais centralizados, dando espaço para o conteúdo. Todos esses desvios foram consistentemente aplicados e executados em todas as outras páginas deste aplicativo.
Exemplo de layout para a identidade visual de um aplicativo da Windows Store.Layout  O design deve ser como um menu, porque é o menu que traz as pessoas de volta para esta cafeteria. Como seus sanduíches e outros itens do menu, o layout deve ser mais artesanal. A cor da tela de fundo perolada é uma reminiscência de papel, o tom é convidativo e o conteúdo é ordenado, com regras de separador vertical e forte alinhamento do texto à esquerda.
Exemplo de tipografia para a identidade visual de um aplicativo da Windows Store.Tipografia   Copperplate Gothic Bold é o tipo de letra principal usado neste design, o que dá uma aparência exclusiva ao nome da empresa, semelhante a uma assinatura em madeira esculpida à mão. Script MT Bold e Segoe UI são os tipos de letra que acompanham. A fonte do script é usada com moderação no cabeçalho do menu e evoca um estilo de escrita à mão. Segoe UI é usado como o texto do corpo para aumentar a legibilidade das opções do menu.

 

Marca Confeitaria Francesa Contoso

Um exemplo de aplicativo da Windows Store para a Cafeteria Contoso, mostrando como a marca é expressa por meio de cores, layout e fotos.
A Confeitaria Francesa Contoso é uma marca conhecida por ser indulgente. Para muitos de seus clientes, ela é o destino que as pessoas procuram para satisfazer seus desejos por doces e guloseimas. Neste exemplo, as cores, as imagens e o layout são os elementos visuais usados para evocar a marca.

 

Exemplo de paleta de cores para a identidade visual de um aplicativo da Windows Store.Cores   Uma paleta de cores de apenas duas cores, marrom e rosa, é suficiente para fazer os clientes pensarem em uma confeitaria. Marrom é a cor principal que evoca imagens de chocolate, e rosa é uma cor de destaque que evoca biscoitos e bolos gelados. Apesar dos sabores associados a ambas as cores, as duas são propositais para a marca. O marrom é neutro o suficiente para fornecer uma tela de fundo sofisticada para a foto colorida se destacar, e o rosa é brilhante o suficiente para destacar partes específicas do conteúdo.
Exemplo de imagem para a identidade visual de um aplicativo da Windows Store.Imagens   A foto é o foco deste design. É claro que tempo e experiência foram dedicados para garantir que cada imagem pareça boa o suficiente para comer. Como resultado, as imagens dos produtos da confeitaria deixam claro do que esta marca trata. Além disso, as imagens são usadas para definir as categorias de conteúdo.
Exemplo de layout para a identidade visual de um aplicativo da Windows Store.Layout   Em comparação com os designs de aplicativo padrão da Windows Store, este exemplo tem uma aparência diferente. A diferença mais marcante é a ausência de blocos quadrados. Os blocos e a grade ainda existem, mas as imagens têm sido estilizadas para imitar os itens que podem ser encontrados em uma confeitaria, por exemplo, as formas circulares e recortadas de uma fôrma de cupcake.

 

Marca de Caminhão de Sanduíches da Contoso

Um exemplo de aplicativo da Windows Store para o Caminhão de Sanduíches da Contoso, mostrando como a marca é expressa por meio de elementos gráficos, grade e logotipo.
O Caminhão de Sanduíches da Contoso é uma marca conhecida por ser urbana, social e com reconhecimento de local. Esta marca é apoiada por uma equipe de excelentes cozinheiros e uma frota de caminhões, tudo voltado para pessoas em movimento. Neste exemplo, gráficos, grade e logotipo são os elementos visuais usados para evocar a marca.

 

Exemplo de elementos gráficos para a identidade visual de um aplicativo da Windows Store.Gráficos   As opções do menu permanecem o foco e não são confusas devido ao uso excessivo de elementos gráficos. No entanto, os gráficos desempenham um papel no estabelecimento desta marca. Por exemplo, as "estrelas" implicam um sistema de classificação do cliente, as cores e formas são uma reminiscência de sinalização de rua e as informações de local são definidas em uma caixa escura que incorpora um gráfico de estrada asfaltada.
Exemplo de grade para a identidade visual de um aplicativo da Windows Store.Grade   A grade padrão ancora todos os aspectos deste design e imita uma estrutura semelhante a que você veria em uma exibição aérea de um mapa de ruas da cidade. Para desafiar esta apresentação ordenada, o conteúdo e os gráficos cheios de sobreposições diferenciam este exemplo. A apresentação geral do conteúdo é negrito e direto como forma de apelo para as pessoas em movimento e que precisam tomar decisões rápidas.
Exemplo de logotipo para a identidade visual de um aplicativo da Windows Store.Logotipo   O logotipo de uma empresa não é usado neste exemplo. O nome da empresa aparece no texto e no logotipo. Neste exemplo, vemos pela primeira vez o nome da empresa incorporado na composição geral. O logotipo ou nome não é simplesmente alinhado à parte superior esquerda.
Exemplo de paleta de cores para a identidade visual de um aplicativo da Windows Store.Cores   Preto e amarelo são usados como cores de ênfase. A partir de uma perspectiva de personalidade, preto e amarelo são cores encontradas em áreas urbanas, como placas de rua e marcas rodoviárias.

 

Exemplo que reforça a marca nas páginas do aplicativo

Infundir a marca nas páginas secundárias de conteúdo avançado do aplicativo é tão importante quanto a identidade visual na página de aterrissagem. Este exemplo usa um aplicativo fictício de time de futebol para demonstrar como incorporar a marca em todas as páginas do aplicativo.

Fabrikam FC, time de futebol profissional

Os fãs do Fabrikam FC, um time de futebol profissional, querem saber tudo sobre o time, incluindo todos os detalhes sobre os jogadores favoritos. Eles querem as informações mais atuais, vindas de qualquer lugar. O design da página de aterrissagem reflete a natureza corajosa e dinâmica da marca.

Página de aterrissagem do aplicativo de exemplo Fabrikam FC da Windows Store

A cor, a tipografia e os elementos gráficos destacam a natureza corajosa e dinâmica da marca.

 

Esse aplicativo usa um padrão de navegação simples. O usuário passa o dedo na barra de navegação para navegar até outras exibições do aplicativo.

Barra de navegação no aplicativo de exemplo Fabrikam FC da Windows Store

A cor e o logotipo sustentam a barra de navegação como elementos de identidade visual. As cores eletrizantes do time contra a tela de fundo escura criam um forte contraste para uma personalidade corajosa. O amarelo é usado em todo o aplicativo para indicar interatividade.

 

Usando a barra de navegação, o usuário pode ver os jogadores do time.

Página de jogador no aplicativo de exemplo Fabrikam FC da Windows Store

As fontes são consistentes entre as diferentes exibições do aplicativo. A face de tipos sans serif realça a personalidade intensa e corajosa do time. O estilo de fonte em maiúsculas faz com que determinados rótulos de texto pareçam um elemento gráfico.

 

Para navegar rapidamente até um jogador específico, reduza para a exibição de zoom semântico desta página.

Zoom semântico no aplicativo de exemplo Fabrikam FC da Windows Store

As imagens dos jogadores desafiam o convencional para criar um layout dinâmico cheio de energia. Elas são usadas na página do time e na página de aterrissagem.

 

Aplicativo de exemplo Fabrikam FC da Windows Store, mostrando ícones e elementos gráficos que reforçam a marca.

Elementos gráficos e ícones simples tornam o conteúdo mais divertido e acessível. Além disso, encorajam a interatividade e aguçam a curiosidade sobre o aplicativo.

 

Tópicos relacionados

Conheça os aplicativos da Windows Store
Diretrizes para a experiência do usuário
Padrões de comando
Padrões de navegação
Definindo o layout de uma página de aplicativo
Diretrizes para tamanhos de janelas e dimensionamento de telas
Diretrizes para fontes
Como definir a identidade visual no seu ListView
Galeria

 

 

Mostrar:
© 2017 Microsoft