Aguarde...

13 de abril de 2021

Guia para construir um sistema de design de IU

Guia para construir um sistema de design de IU

Visão geral

Um sistema de design de IU mantém o design de seu produto organizado e consistente. Veja como criar um para seu próximo projeto.

  • Os sistemas de design de IU ajudam a estabelecer um design consistente em seu produto. Este design consistente é crucial para a experiência do usuário e SEO. Você não terá um produto eficaz sem um bom design de componentes.
  • O projeto eficaz de componentes começa com a coleta de pesquisa de mercado e inspiração. Comece com um quadro de humor e deixe todo o resto ramificar a partir daí. Estabeleça elementos consistentes, incluindo uma paleta de cores, escala de tipo, ícones e formulários.

O mundo do web design permite mais criatividade do que nunca. Já se foram os dias das páginas estáticas com fontes neon e música de fundo. A evolução da tecnologia significa que o design da web pode incluir muito mais do que se imaginava anteriormente. Isso também significa que o design pode ser mais complexo do que nunca. Manter o design de seu componente consistente pode ser um desafio. É aí que entram os sistemas de IU. Continue lendo para aprender como projetar componentes para serem uniformes em todo o seu produto.

O que é um sistema de design de componentes?

Um sistema de projeto de componente é um ponto de referência para certos padrões de projeto que você decidiu antes ou durante a montagem de seu produto. Pense nisso como um guia de estilo visual ou um inventário de componentes de design. Isso incluirá sua paleta de cores, escala de tipo, ícones, botões e quaisquer outros elementos de design que o produto usa (mais informações sobre cada um desses componentes e mais abaixo).

Para ter uma ideia melhor de como isso se parece, dê uma olhada em alguns sistemas de design de IU de marcas reconhecíveis e nosso repositório gratuito de sistemas de design e bibliotecas de padrões disponíveis – Adele . 

Por que você precisa de um sistema de design de componentes?

Existem várias razões pelas quais um sistema de projeto de componente é necessário e várias maneiras pelas quais um projeto ruim pode prejudicá-lo.

Um site bem projetado não apenas parece bom. Ele lê bem e transmite sua mensagem com uma navegação intuitiva. Seu produto, seja um site ou um aplicativo, torna-se a primeira impressão do usuário sobre sua marca. O design consistente é a chave para um design intuitivo, pois o usuário pode ter uma boa noção de onde navegar, a aparência dos botões, a aparência de um erro e assim por diante.

O design otimizado para Ux também pode fazer ou quebrar a visibilidade do seu produto. As melhores práticas de SEO podem parecer um alvo em movimento, mas as táticas de hoje são muito mais complicadas do que o enchimento de palavras-chave de ontem. O design e a acessibilidade desempenham um papel importante nas classificações SERP , portanto, se o seu produto oferece uma experiência do usuário ruim, os mecanismos de pesquisa não o verão com bons olhos.

Criação de um sistema de design de componentes

Construir seu próprio sistema de IU não é algo para ser considerado levianamente. É um processo que exige muito tempo e dedicação. Mas valerá a pena quando você tiver um design consistente e de alta qualidade para seu produto. Portanto, não se apresse! Você está realizando etapas de planejamento cruciais para a marca do seu produto.

Quadro de humor

Você está basicamente montando um painel privado do Pinterest. Depois de ter “alfinetes” suficientes, você será capaz de recuar e ver algumas linhas comuns entre eles. E com essas linhas comuns, você pode decidir sobre componentes como cores, linhas e ícones.

Paleta de cores

Mas as paletas de cores em sistemas de design de IU são mais complexas do que isso. Você vai querer decidir sobre as cores primárias, secundárias e terciárias, bem como as cores que indicam sucesso ou fracasso em campos relevantes. (Eles estarão relacionados aos seus botões e formulários, descritos abaixo.)

Você vai querer um conhecimento básico da teoria das cores para fazer uma paleta de cores atraente. Isso significa compreender o valor, a saturação e os esquemas de cores. Você também precisará decidir com que frequência usar cada cor, usando cores primárias e acentos com frequência suficiente para transmitir sua importância. Há uma regra 60-30-10 geralmente recomendada para esse propósito: sua cor primária é usada 60% do tempo, a cor secundária 30% e os acentos 10%.

Leia mais sobre como escolher uma paleta de cores .

Com todos os nossos avanços tecnológicos, as telas dos computadores ainda são bidimensionais. Mas isso não significa que você não possa adicionar profundidade e perspectiva ao seu design, e é definitivamente algo a se considerar. O uso de sombra é um elemento de design tendência ultimamente, e por um bom motivo. O uso estratégico de sombras com seus componentes de design é uma maneira eficaz, porém sutil, de dar ênfase e chamar a atenção. Apenas certifique-se de manter essas sombras consistentes com direção, profundidade e força.

Quando se trata de seu texto, você quer ter certeza de que a fonte permanece consistente e legível. Mas você também deseja prestar atenção ao dimensionamento do texto e dos cabeçalhos para que tudo pareça uniforme. Se o H2 na página inicial for diferente de H2 na página de contato, não é uma boa aparência. Você também deseja evitar que seus H2s pareçam muito próximos em tamanho aos H1s ou H3s. Uma escala de tipo padronizada ajuda a estabelecer tamanhos e formatos uniformes para o corpo do texto, títulos, links e assim por diante.

Se precisar de ajuda para estabelecer uma escala do tipo, há um free-to-use escala do tipo online.

Ícones

Mantenha seus ícones simples e uniformes. Como são pequenos por natureza, muitos detalhes podem ser perdidos. O design inconsistente com seus ícones parecerá apenas desleixado. Existem pacotes de conjuntos de ícones gratuitos disponíveis online se você tiver problemas para definir um design, mas para tornar as coisas muito mais fáceis para você, temos uma biblioteca de ícones pronta para usar no UXPin . 

Guia para construir um sistema de design de IU

Botões, controles deslizantes, formulários e outros componentes

Os botões são como ícones no sentido de que o design simples é melhor e a consistência entre os botões é obrigatória. Isso não significa que o design dos botões deva ser enfadonho – há muito espaço para brincar com a aparência de seus botões padrão e botões de rádio ! Se você precisa de inspiração ou deseja adicionar componentes prontos para uso ao seu projeto, você pode encontrar uma biblioteca pronta em UXPin com padrões de Material Design.  

Mantenha seus outros componentes, como menus suspensos de navegação e campos de texto visíveis, sem sobrecarregar o resto do design. É aqui que sua paleta de cores e sombras podem entrar em ação.

Postado em Blog
Escreva um comentário