Antes de começar a fazer sua app, você precisa definir o visual dela, e este artigo vai te ajudar a definir o visual tendo como premissa te mostrar os princípios de design e referências para preparar sua app.

Conhecendo o Modern Design

Modern Design é o conjunto de princípios de design utilizados nas Windows Store apps e Windows Phone apps para manter seu visual moderno, limpo, telas sóbrias que operam de forma rápida, tipografia minimalista e notificações automáticas para novidades e
informações atualizadas.

Os pilares do Modern Design

Para você conhecer mais a fundo o Modern Design, veja os 3 pilares (para saber a história por de trás dos pilares leia os artigos citados na seção referências deste artigo):

• The Bauhaus: remover o que é supérfluo
• Swiss Style: design limpo, legibilidade e objetividade são seus temas centrais. Apartir disso temo um grid visual e layouts assimétricos
• Motion design: o conceito de movimento para interagir entre as tasks

Esses pilares inspiraram a Microsoft a criar os próprios princípios de design:

1. Orgulho em criar arte
2. Faça mais com menos
3. Rápido e fluido
4. Autenticamente digitais
5. Vença como um

Orgulho em criar arte

O primeiro principio é o primeiro porque criadores, construtores e artesãos historicamente se distinguem dos outros profissionais por causa do orgulho em seu próprio trabalho. Esse princípio sugere a atenção nos detalhes, devotando de corpo e alma a cada pequeno detalhe, incluindo o ajuste de cada pixel na grid deixando tudo alinhado, a escolha das cores, tipografia e tela.

Para isso usamos alguns conceitos para cuidar de cada detalhe do visual da app:

Uso de grid visual: É recomendado que use uma grid para alinhar os itens na tela do app, mantendo a coerência entre o conteúdo. A seguir, a imagem sugere como organizar seu conteúdo através de uma grid visual. Você pode baixar o template visual com grid para desenhar sua app neste link.

Hierarquia e equilibrio: A ideia desse pilar é mostrar diferentes tipos de informação com diferentes propriedades, como a cor da fonte, o tamanho, o posicionamento para fazer diferentes níveis de hierarquia da informação.

O exemplo da imagem seguinte mostra duas diferentes telas, na primeira há organização entre as hierarquias na segunda não. Veja como na primeira é mais fácil ver o titulo da app e a baixo os itens todos com seus respectivos títulos e abaixo o conteúdo em
outra cor para diferenciar os estados e conteúdos.

Para se organizar, ficam aqui os conceitos:

• Texto grande e grande contraste de cor – Para mostrar o cabeçário do app;
• Próximo texto grande – Para mostrar um importante detalhe, no caso o nome de quem mandou a mensagem. É um título do item mensagem;
• Texto menor – A primeira linha ou duas abaixo do nome vem o início da mensagem. É o conteúdo que descreve o item;
• Espaçamento e alinhamento – Para separar as threads, os itens.

Identidade

O próximo item é como a tipografia pode falar mais sobre a app, como parte da identidade. Por exemplo, uma app séria, como uma app de noticias, tem uma tipografia mais séria, talvez uma fonte serifada, mas uma app de visual jovem e divertido pode ter uma fonte colorida e moderna.

Recapitulação do principio

• Cuide dos detalhes;
• Faça sua app segura e confiável;
• Use equilíbrio, simetria e hierarquia;
• Alinhe o layout do app na grid – o novo layout para apps;
• Faça sua app o mais acessível possível.

Faça menos com mais

A ideia desse princípio é retirar as distrações da tela, como degradês e fundos confusos e mostrar as informações com menos itens (como ícones), porém usando de hierarquia (conceito visto anteriormente nesse artigo) para agrupar as informações.

Checklist do princípio:

• Prefira algo grande ao invés de coisas pequenas e em grande quantidade;
• Priorize o conteúdo mais do que o fundo;
• Tenha um visual focado e direto;
• Inspire confiança nos usuários;
• Diminua as redundâncias visuais.

Autenticidade digital

Anteriormente os ícones em um sistema imitavam itens do mundo real, com texturas e proporções. Essa é a ideia do Skeuomorphism, esse visual realista do itens na tela e que foi muito comum há alguns anos.

A ideia agora é ser como a escola de design Bauhaus, com ícones sem supérfluos, sem textura, sem reflexos e sem sombras.

Checkilst do princípio

• Seja dinâmico e vivo com a comunicação;
• Use tipografia moderna;
• Use cores fortes e vibrantes.

Vença como um

Considerando que sua app vai rodar em toda uma gama de dispositivos, se pergunte qual o melhor device e otimize sua app para ele, mas use das multiplataformas, fazendo seu design ser agradáel em todos os dispositivos.

Checklist do princípio:

• Use a UI model;
• Trabalhe com outras apps para completar o cenário da atualização da sua app usando contratos;
• Use ferramentas e templates para promover consistencia entre o design em múltiplosevices.

Cuidando do layout

O layout, o conteúdo e a navegação da sua app fazem parte do design global dela. O layout precisa respeitar o principio de Autenticidade Digital (discutida anteriormente nesse artigo), ou seja, priorize o conteúdo, evite de imitar itens do mundo real (como madeira, metal etc), procure usar cores vivas, sem sombras. Procure um layout limpo e direto.

Também evite encher sua app de botões poluindo o visual da app. Você pode usar das bordas da app para isso. Outra dica é aproveitar os padrões de navegação para fazer sua app de modo horizontal e inovar no layout. Outro detalhe a levar a diante é deixar sua marca principal na app. Por exemplo, a app pode ter as cores da sua empresa. Para incorpoar a sua marca no app, leve em consideração o conjunto dos elementos visuais, como paleta de cores, gráficos, estilo de fotografia, estilo de tipografia e layout. Pense em botões e campos para ter a cara da sua empresa.

Defina com cuidado o estilo de tipografia da sua app. Para escolher uma tipografia bonita considere os seguintes pontos:

• Tipo da fonte
• Espaços em branco
• Heirarquia
• Altura da linha
• Tamanho do texto

A imagem a seguir descreve um exemplo para tipografia de elementos visuais

Dica de fontes para serem usadas são as da família Segoe UI, a Calibri e a Cambria.

Use também dos efeitos de transparência nas fontes para indicar subtítulos, por exemplo. Lembre de usar Unicode para evitar problemas com os textos.

Outra coisa é lembrar de encaixar a tipografia da sua app dentro da grid geral do layout da sua app. Evite usar texto na configuração justificado.

Referências:

Artigos do Centro de Desenvolvimento Windows:

• Microsoft Design Principles
• Layout
• Branding your app
• Type
• Guidelines for fonts
• Guidelines for typography