O melhor guia de design de IU

Contente

• 01. Escolha sua tipografia
• 02. Escolha a paleta certa
• 03. Links e botões de estilo
• 04. Crie seus componentes
• 05. Documente e colabore

O que é design de interface de usuário? Uma pergunta melhor seria: o que realmente entra no design de uma interface de usuário? Estética? Usabilidade? Acessibilidade? Todos eles? Como todos esses fatores se unem para permitir uma experiência de usuário ideal e qual deve vir primeiro?

A acessibilidade deve estar sempre em primeiro lugar, estabelecendo as bases para uma usabilidade ideal (usar um construtor de sites top ajudará aqui). E então, quando uma IU é acessível e utilizável, ela já deve ter uma aparência decente em termos de estética (as ferramentas de design da IU vão ajudar aqui). Então, para garantir que seu design funcione em todos os níveis, você precisará testá-lo completamente, o que pode ser feito com nossa seleção das melhores ferramentas de teste de usuário. Vamos dar uma olhada nos elementos fundamentais da maioria dos designs e o que pode ser feito para garantir a consistência visual.

01. Escolha sua tipografia

Uma ótima tipografia (como muitos aspectos do design) se resume à acessibilidade. O design visual certamente adiciona à experiência geral do usuário, mas no final do dia, os usuários estão interagindo com a IU, não a vendo como arte. Letras legíveis resultam em clareza e palavras legíveis ajudam os usuários a digerir o conteúdo de maneira eficiente. Ambos são mais importantes do que qualquer estética visual.

No entanto, uma tipografia bem projetada ainda pode ser esteticamente satisfatória. Helvetica preto sobre branco (ou uma fonte semelhante) pode ser uma coisa linda depois de apenas alguns aprimoramentos tipográficos simples. Por aprimoramentos, queremos dizer ajustar o tamanho da fonte, a altura da linha, o espaçamento entre as letras e assim por diante - não a fonte ou a cor do texto.

A tipografia "bonita" é realmente feia quando é ilegível, porque a frustração sempre supera a estética. O excelente design é equilibrado e harmonioso.

Como muitos aspectos do design da IU, o ajuste fino dos visuais para equilibrar acessibilidade e estética não é o desafio. O desafio é manter a consistência em todo o design. A consistência estabelece uma hierarquia clara entre os elementos de importância variável, o que, por sua vez, ajuda os usuários a entender uma IU mais rápido e até mesmo digerir o conteúdo com mais eficiência.

Quando se trata de legibilidade e legibilidade, o tamanho de fonte mínimo aceitável, conforme definido pelas WCAG 2.0 Web Content Accessibility Guidelines, é 18pt (ou 14pt negrito). O melhor tamanho de fonte a ser usado depende muito da própria fonte, mas é importante estar atento à hierarquia visual e como esse tamanho de base se distingue dos resumos e títulos (ou seja, h1>, h2>, h3>).

Com sua ferramenta de design de IU de escolha (usaremos o InVision Studio), crie uma série de camadas de texto (T) e, em seguida, ajuste todos os tamanhos para correlacionar com o seguinte modelo:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Com o InVision Studio (e todas as outras ferramentas de design de IU), isso é feito ajustando os estilos usando o painel Inspetor no lado direito.

Em seguida, escolha sua fonte, mas cuidado porque o que você pode notar com algumas fontes é que 18px p> e 22px h3> não parece tão diferente. Temos duas opções: ajustar os tamanhos das fontes ou considerar uma fonte diferente para os cabeçalhos. Escolha a última opção se você antecipar que seu design terá muito texto.

Tenha em mente que:

• O design da interface do usuário visual costuma ser uma abordagem intuitiva
• Nada está decidido; tudo está sujeito a mudanças

Altura da linha

A altura ideal da linha garante que as linhas de texto tenham espaçamento suficiente entre elas para atingir níveis decentes de legibilidade. Isso está se tornando cada vez mais reconhecido como um 'padrão'; A ferramenta Lighthouse Audit do Google até sugere isso como uma verificação manual (ou até mesmo uma sinalização se o texto contiver links que podem estar muito próximos como resultado de altura de linha abaixo do ideal).

Mais uma vez, o WCAG nos ajuda com este, declarando que as alturas das linhas devem ser 1,5x o tamanho da fonte. Então, em sua ferramenta de design de IU em 'Linha' (ou similar), basta multiplicar o tamanho da fonte por - pelo menos - 1,5. Por exemplo, se o corpo do texto for 18px, a altura da linha será 27px (18 * 1,5 - você também pode executar a operação matemática diretamente no Inspetor). Mais uma vez, porém, fique atento - se 1.6x parecer um ajuste melhor, use 1.6x. Lembre-se de que fontes diferentes produzirão resultados diferentes.

É muito cedo para pensar em usar dados reais em nosso projeto, mas, pelo menos, ainda devemos usar dados um tanto realistas (mesmo lorem ipsum). O InVision Studio tem um aplicativo nativo de dados reais para nos ajudar a ver como nossa tipografia pode realmente ser.

Espaçamento de parágrafo

O espaçamento de parágrafo não é um estilo que podemos declarar usando o Inspetor do InVision Studio. Em vez disso, precisaremos alinhar as camadas manualmente usando Guias Inteligentes (⌥). Semelhante à altura da linha, o multiplicador mágico é 2x (o dobro do tamanho da fonte). Por exemplo, se o tamanho da fonte for 18 px, deve haver pelo menos um espaço de 36 px antes de levar ao próximo bloco de texto. O espaçamento das letras deve ser de pelo menos 0,12.

No entanto, não precisamos nos preocupar com isso até começarmos a criar componentes.

Estilos compartilhados

Se sua ferramenta de design de IU suportar (o InVision Studio ainda não tem), considere transformar esses estilos tipográficos em "Estilos compartilhados" para torná-los rapidamente reutilizáveis, garantindo a consistência visual. Isso geralmente é feito por meio do Inspetor.

02. Escolha a paleta certa

Selecionar as cores perfeitas para o seu design vai muito além da estética: pode informar toda a hierarquia do seu site.

Quando se trata de design de interface do usuário, a cor é habitualmente uma das primeiras coisas com que gostamos de brincar, mas fomos ensinados que mergulhar direto no design visual é uma coisa ruim. Isso certamente é verdade, no entanto, quando se trata de consistência visual, a cor deve ser uma preocupação principal, pois desempenha outras funções.

A cor no design da IU pode ser muito eficaz, mas como alguns usuários (muitos, na verdade) sofrem de vários tipos de deficiência visual, nem sempre é confiável. Dito isso, não é necessariamente sobre a cor específica que está sendo usada, mas sim o tipo de cor. Isso pode não ser verdade quando se trata de branding, uma vez que a cor é usada para impacto emocional a esse respeito, mas, no design da IU, a cor também é usada para comunicar a intenção, o significado e, é claro, a hierarquia visual.

01. Rígido
O plugin Stark é compatível com Sketch e Adobe XD e ajuda a verificar o contraste de cores e simular daltonismo diretamente da tela. Suporte para Figma e InVision Studio em breve.
02.Cores
Colors é um conjunto de 90 combinações de cores que possuem a quantidade adequada de contraste de cores para atender às diretrizes WCAG 2.0 - algumas delas até conseguem atender ao padrão AAA.
03. Projeto A11y
O Projeto A11y é um grande centro para todas as coisas relacionadas à acessibilidade. Inclui recursos, ferramentas, dicas, tutoriais e é criado pelo criador do plugin Stark e recebe financiamento da InVision.

Os três tipos de cores

As cores têm significado, por isso é importante não ter muitos deles. Muitos significados resultam em mais coisas que o usuário precisa entender e lembrar - sem falar em mais combinações de cores para nos preocuparmos. De um modo geral, este seria o formato recomendado:

• Uma cor de call to action (também a cor principal da marca)
• Uma cor escura neutra (melhor para elementos da IU ou modo escuro)
• Para todos os itens acima, uma variação ligeiramente mais clara e mais escura

Isso permite o seguinte:

• O modo escuro será facilmente alcançável
• Nossa cor de CTA nunca entrará em conflito com outras cores
• Em qualquer cenário, seremos capazes de enfatizar e tirar a ênfase

Configure sua paleta

Com a ferramenta de design de IU de sua escolha, crie uma prancheta bastante grande (toque em A) para cada cor (denominada 'Marca', 'Neutro / Claro' e 'Neutro / Escuro'). Em seguida, em cada prancheta, crie retângulos menores adicionais exibindo as variações mais claras e mais escuras da cor e também as próprias cores.

Consideraríamos um pouco mais claro e mais escuro como 10 por cento extra branco e 10 por cento extra preto, respectivamente. Quando terminar, exiba uma cópia dos estilos tipográficos em cada prancheta. A cor dessas camadas de texto deve ser neutra, exceto na prancheta de luz neutra, onde devem ser neutras escuras.

Contraste

Em seguida, precisamos verificar nossas cores para um contraste de cor ideal. Há uma variedade de ferramentas que podem fazer isso, por exemplo, o plug-in Stark para Sketch e Adobe XD ou Contrast para macOS - no entanto, uma solução online como o Verificador de contraste ou o Verificador de contraste de cor é suficiente.

Verifique o contraste de cor para cada combinação e ajuste as cores de acordo. Se você não tiver certeza de quais cores usar, tente usar as recomendações do Color Safe.

03. Links e botões de estilo

Tamanho

Botões e links, assim como a tipografia, devem ter algumas variações. Afinal, nem todas as ações têm o mesmo nível de importância e, como discutimos antes, a cor é um método não confiável de comunicação, portanto não pode ser o principal método de influenciar a hierarquia visual. Também precisamos brincar com o tamanho.

Um teste de acessibilidade visual é um teste de usabilidade usado para determinar se os pontos de toque parecem ser clicáveis. Sincronize o design do Studio com o Freehand (⌘⇧F), envie o URL resultante aos testadores e peça-lhes que circulem os elementos que acreditam ser clicáveis.

Os usuários que não são do InVision Studio também podem usar o Freehand, mas os usuários do InVision Studio podem lançar seus projetos no Freehand perfeitamente a partir do InVision Studio, que é a maneira mais rápida e eficiente de obter feedback visual dos usuários.

Geralmente, recomendamos que o texto do botão seja declarado como 18 px (o mesmo que o texto do corpo), mas que os próprios botões tenham três variações de tamanho:

• Normal: 44 px de altura (cantos arredondados: 5 px)
• Grande: 54 px de altura (cantos arredondados: 10 px)
• Extra grande: 64 px de altura (cantos arredondados: 15 px)

Isso nos permite fazer com que certos botões pareçam mais importantes sem depender da cor e também aninhar botões (por exemplo, use um botão dentro de um campo de formulário de aparência mínima).

Profundidade

Independentemente de o alvo de toque ser um botão ou um campo de formulário, as sombras devem ser usadas para aumentar a profundidade e, portanto, sugerir interatividade. Um único estilo de sombra para todas as variantes de botões e campos de formulário é suficiente.

Interatividade

Cada tipo de botão precisa de uma variação para indicar seu estado de foco. Isso esclarece ao usuário que o que ele tentou fazer está totalmente bem e garante que continue sem demora.

Na verdade, esse é um dos aspectos mais complexos da manutenção da consistência visual, porque a cor costuma ser o estilo preferido de mudar quando se trata de criar um estado. Felizmente, essas mudanças de estado podem ser relativamente sutis, por isso não há problema em mudar a cor para uma variação ligeiramente mais clara ou mais escura - é para isso que servem. Isso se aplica a links também.

Decidir contra isso nos fará usar uma cor que já tem um significado significativo, resultando na confusão dos usuários ou então na decisão de sugerir outra cor. Decidir usar uma cor secundária é totalmente aceitável, mas ela deve ser salva para efeitos visuais de marketing ao invés de elementos de interface do usuário. Menos é mais (e mais fácil).

Lembre-se de repetir esta etapa para cada prancheta. Não inclua os botões de CTA da marca na prancheta da marca - mais tarde, abordaremos o que acontece quando certas combinações não funcionam.

04. Crie seus componentes

Os componentes economizam muito tempo e todas as ferramentas de design de IU oferecem esse recurso (por exemplo, no Sketch, eles são chamados de símbolos). No Studio, podemos criar componentes selecionando todas as camadas que devem constituir o componente e usando o ⌘K atalho.

Usando componentes

Os wireframes são muito úteis, não apenas para projetar interfaces de usuário de alta usabilidade, mas também para descobrir o que nossa interface de usuário exigirá no longo prazo. É uma espécie de preparação para o futuro.

Isso não significa que precisamos projetar muitos componentes ou estar prontos para qualquer cenário possível, mas significa que precisamos empregar uma atitude de 'e se?'

Por exemplo, se nosso wireframe pede um componente 3x1, mas sabemos que o conteúdo não está definido na pedra, um pouco de contemplação pode nos levar a pensar: 'E se esses componentes acabarem sendo 4x1?'. A regra prática é: projete apenas para as necessidades do usuário que já existem, mas tente fazer soluções relativamente flexíveis. Caso contrário, acabaremos com algumas 'dívidas de design' muito confusas mais tarde.

Agora podemos reutilizar esse componente arrastando-o para a tela de Bibliotecas> Documento no lado esquerdo, embora tenha em mente que esse fluxo de trabalho pode ser diferente dependendo de sua ferramenta de IU.

Este método de criação de guias de estilo (e eventualmente de criação do próprio design) funciona especialmente bem com layouts modulares / baseados em cartão, embora "áreas comuns", como cabeçalhos, rodapés e navegações também sejam excelentes candidatos para um componente.

Assim como fizemos com nossos estilos tipográficos, cores e botões, devemos nos lembrar de organizar nossos componentes com cuidado.

Utilizando nossas regras

Anteriormente, fizemos uma observação sobre não usar botões de CTA de marca em cima da cor da marca, uma vez que botões de CTA de marca obviamente precisam se destacar entre todo o resto. Então, como fazemos para criar um componente de marca e ainda sermos capazes de usar um botão de CTA de marca? Afinal, se estamos usando botões escuros neutros para, digamos, botões de navegação ou simplesmente botões menos importantes, isso simplesmente não seria uma opção, certo?

Direito. Portanto, esta seria uma oportunidade ideal para criar um componente - especificamente, uma combinação de título + texto + botão. Observe como eu criei um cenário de 'cartão' de luz neutra para permitir o uso do botão de marca. Da mesma forma, o campo de forma de luz neutra (campos de formulário são geralmente brancos por causa do modelo mental historicamente sinônimo de formulários de papel) não parece incrível no fundo de luz neutra, então eles só podem ser usados ​​no fundo escuro neutro - seja diretamente ou dentro um componente escuro neutro. É assim que tornamos nosso design flexível, obedecendo às nossas regras e mantendo a consistência.

Teste de estresse

Idealmente, a maneira mais rápida e eficaz de garantir a robustez de nosso projeto é testá-lo por estresse. Testar um design significa ser cruel. Digamos que temos uma navegação com uma quantidade X de itens de navegação porque esse era o requisito; para realmente garantir flexibilidade, tente alterar esses requisitos adicionando mais itens de navegação ou, para realmente jogar uma chave no trabalho, tente também adicionar um item de navegação com uma hierarquia visual mais alta do que os outros. Nossas regras de tamanho, tipografia e cores permitem algo assim? Ou, para oferecer uma usabilidade ideal, precisamos de outra regra?

Lembre-se de que há uma diferença entre adicionar regras e dobrar as regras. Mais casos extremos significam menos consistência, então na maioria das vezes é melhor para fins de usabilidade simplesmente repensar o componente.

05. Documente e colabore

Como tornamos nossos arquivos de design mais fáceis de usar, tanto para nós quanto para quaisquer outros designers que possam usar nosso arquivo de design? Bem, mantê-los armazenados com segurança em um armazenamento em nuvem compartilhado e confiável é importante, como você descobrirá.

Cores

A primeira etapa é salvar todas as cores na amostra 'Cores do documento', se ainda não tivermos feito isso - isso tornará mais fácil acessá-las quando precisarmos aplicá-las em nosso design.Para fazer isso, abra o widget de seleção de cores do Inspetor, escolha 'Cores do Documento' no menu suspenso e clique no ícone + para adicionar a cor à amostra. Isso funciona da mesma maneira na maioria das ferramentas de IU.

Bibliotecas compartilhadas

Em seguida, precisamos converter nosso documento - completo com estilos tipográficos, cores, botões, áreas comuns e componentes básicos - em uma biblioteca compartilhada.

Essencialmente, isso significa que cada elemento precisa ser um componente, mesmo que consista em apenas uma camada. Clique no botão + ‌ na barra lateral de Bibliotecas do lado esquerdo e importe este documento para um novo documento. Isso mesmo: nosso documento agora é uma biblioteca e está pronto para ser usado para projetar interfaces de usuário com consistência garantida.

O InVision Studio é um tanto limitado no sentido de que ainda não sincroniza com a ferramenta oficial de Design System Manager da InVision, mas é fácil o suficiente para hospedar a biblioteca no Dropbox para outros designers usarem e atualizarem ao longo do tempo. Quando uma alteração é feita (local ou remotamente), cada arquivo do Studio que usa a biblioteca (novamente, local ou remotamente) perguntará se você deseja atualizar as cores e componentes. É assim que as bibliotecas de design são mantidas entre as equipes.

Quando se trata de projetar interfaces de usuário visualmente consistentes, reutilize tudo. Crie botões, use os botões para criar os componentes do botão e, em seguida, use
componentes do botão para criar outros componentes, como alertas e caixas de diálogo.

Apenas não crie componentes desnecessários. Lembre-se de que construir uma biblioteca é um esforço contínuo e colaborativo. Ele não precisa ser concluído de uma só vez, concluído por você sozinho ou concluído nunca. Tem apenas que transmitir uma linguagem.

Design em escala

Conforme um projeto se expande, gerenciá-lo se torna mais difícil. Existem vários ajustes que podemos querer fazer para mantê-lo eficiente e sustentável, especialmente porque o DSM da InVision ainda não funciona com o Studio.

Por exemplo, podemos querer usar camadas de texto para fazer anotações em nossa biblioteca como um meio de explicar os casos de uso de vários elementos. Para os estilos tipográficos, podemos até editar o texto para ser mais descritivo (por exemplo, "h1> / 1.3 / 44px"). Isso diz que h1>s deve ter 44 px e uma altura de linha de 1,3.

Design Handoff

As ferramentas de transferência de design exibem os vários estilos usados ​​por cada elemento do design para que os desenvolvedores possam construir o aplicativo ou site. Essas ferramentas incluem uma visão geral dos estilos e também uma cópia da amostra de 'cores do documento'. Os desenvolvedores podem até copiar esses estilos como código, o que é excelente se você decidiu criar qualquer documentação de design por escrito e gostaria de incluir representações de snippet de código dos componentes.

Se você está preocupado com a solução de problemas e gerenciamento de um site, certificar-se de que você tem o serviço de hospedagem na web certo ajudará, mas para o seu sistema de design, a ferramenta de transferência de design da InVision, Inspect, é o que você deve usar. Para utilizá-lo, clicamos no botão / ícone "Publicar no InVision" no InVision Studio, abrimos o URL resultante e tocamos para alternar para o Modo de inspeção. É muito conveniente.

Este conteúdo apareceu originalmente na revista net.