Design De Iu
Criação de um guia de estilo de interface do usuário para uma melhor experiência do usuário
Ouça a versão em áudio deste artigo
Garanta um design de produto coeso e experiência do usuário
Em 1976, Johnny Cash lançou Uma peça de cada vez , uma música que conta a história de um trabalhador automobilístico de Detroit que passa vinte anos coletando peças de Cadillac roubadas da linha de montagem.
Infelizmente, quando o trabalhador começa a construir seu Cadillac bootleg, ele descobre que muitas peças são incompatíveis porque os principais recursos de design mudaram ao longo dos anos. Com um pouco de engenhosidade, o carro personalizado vem junto, mas é uma confusão feia que inspira o ridículo onde quer que vá.
O back-end também parecia engraçado
Mas nós juntamos tudo e quando terminamos
Bem, foi quando percebemos que só tínhamos uma barbatana caudal.
Designers e os desenvolvedores das experiências digitais atuais enfrentam um desafio semelhante. A passagem do tempo é um adversário formidável, capaz de causar estragos na continuidade dos produtos digitais. Com o tempo, os membros da equipe vêm e vão, as tendências evoluem e os recursos mudam. Além disso, o ritmo acelerado de nosso cenário digital moderno significa que a inovação de produtos ocorre em trimestres, não em anos.
Se uma equipe de negócios ou de design não tiver um registro compartilhado que documente a aparência pretendida de um produto, inconsistências visuais e experienciais irão surgir, os usuários ficarão frustrados e a reputação da marca será afetada.
Os guias de estilo da interface do usuário são uma ferramenta de design e desenvolvimento que traz coesão à interface do usuário e à experiência de um produto digital. Em sua essência, eles:
- Registre todos os elementos de design e interações que ocorrem dentro de um produto
- Liste os componentes essenciais da IU, como botões, tipografia, cor, menus de navegação, etc.
- Documento importante Componentes UX como estados de foco, preenchimentos suspensos, animações etc.
- Contém elementos ativos e snippets de código para os desenvolvedores referirem e usarem
Antes de dar uma olhada mais de perto em como montar um Guia de Estilo de IU de nível especialista, é importante entender que não existe uma abordagem única para todos. O valor dos guias de estilo vai além de grandes marcas com grandes equipes de produtos. Empresas de médio a pequeno porte que buscam uma experiência digital consistente também se beneficiam quando os guias de estilo de interface do usuário são feitos sob medida para suas necessidades específicas.
Incluir Esses Componentes Cruciais de Design em Guias de Estilo de IU
Designers familiarizados com as diretrizes de identidade da marca não devem ter problemas para fazer a transição para os Guias de estilo da IU, porque há ampla sobreposição com muitos dos componentes de design cruciais que devem ser incluídos.
Dica profissional: Documente apenas os componentes de design relevantes. Informações estranhas tornam os guias de estilo da interface do usuário inchados e difíceis de trabalhar.
Esquema de Tipografia
Tipografia é um dos elementos de design de interface mais comuns, então não é suficiente apenas listar os nomes das fontes usadas em um produto. Instruções claras devem ser fornecidas para títulos, legendas, cabeçalhos (H1, H2, H3), corpo do texto e legendas.
Além disso, os tamanhos das fontes devem ser fornecidos, os pesos indicados e os estilos definidos. A altura da linha e o kerning também são necessários, e é uma boa ideia destacar uma fonte a ser usada quando surgirem circunstâncias especiais.
Layouts responsivos
Quando os produtos digitais são projetados em torno responsivo sistemas de grade, os guias de estilo da IU devem abordar layouts de interface em todos os tamanhos de tela. Isso significa incluir notas e exemplos de espaçamento, preenchimento e colocação. Também é útil mostrar sobreposições do sistema de grade do produto em relação a diferentes tamanhos de tela.
O grande objetivo aqui é fornecer contexto suficiente para evitar a necessidade de designs de tela únicos. Com o tempo, eles aumentam e minam a coesão de um produto digital.
Paleta de cores
Uma das maneiras mais rápidas de destruir uma interface é o uso inconsistente de cores, portanto, as combinações de cores precisam ser claramente definidas. Listar cores e seus valores (HEX, UIColor) é um bom começo, mas pares específicos e exemplos de uso também devem ser fornecidos.
Se o Guia de estilo da interface do usuário estiver fazendo referência a um conjunto de identidade da marca diretrizes, verifique se um esquema secundário de cores de destaque mais claras está disponível. Caso contrário, crie seu próprio documento e. Uma seleção de valores de cinza também é útil.
Botões
Quase todas as interfaces incluem botões, portanto, reserve um tempo para documentar seus tamanhos, estilos, cores, posicionamento, espaçamento e elementos tipográficos. Se vários botões forem usados em contextos diferentes, deixe isso claro também.
Componentes de IU adicionais que podem ser necessários
- Iconografia
- Dicas de ferramentas e popovers
- Modais
- Elementos de formulário
- Tabelas de dados
- Menus de navegação
- Gráficos e visualizações de dados
- Abas
- Chaves liga-desliga
- Diálogos
- Listas da grade de conteúdo
- Listas verticais
- Barras de Ferramentas
- Selecionadores de data e hora
- Carregando indicadores
- Caixas de seleção
- Alertas
- Menus suspensos
- Sliders
- Steppers
- Paginação
Organizar e contextualizar as instruções de design
Além dos componentes de IU obrigatórios, há uma série de recursos práticos que tornam os Guias de Estilo de IU mais fáceis para empresas e equipes de design referenciar, navegar e implementar.
Índice
Um índice bem organizado e claramente marcado é uma maneira simples de ajudar todos a encontrar rapidamente o que está dentro do documento.
Notas de Contexto
É impossível prever todas as decisões de design problemáticas que podem surgir ao longo da vida útil de um produto, portanto, articular a lógica do design por trás dos componentes de IU usados com frequência pode facilitar a resolução de cenários imprevistos.
Por exemplo:
“Basicamente, nosso produto trata de mostrar as melhores imagens de arquitetura de todo o mundo. Por esse motivo, o layout de nossa interface prioriza imagens grandes e chamativas sobre o texto. Sempre que possível, faça das imagens o foco do nosso produto. ”
Instruções de espaçamento e posicionamento
Espaçamento e posicionamento são frequentemente abordados na seção 'Layouts responsivos'. Dependendo da complexidade do produto digital, as instruções podem consistir em “regras gerais” ou ser bastante granulares.
O que fazer e o que não fazer
Muitas vezes, pode ser útil delinear claramente o que fazer e o que não fazer no projeto. Por exemplo:
- ' Faz use a versão com marca branca do logotipo de nossa empresa no rodapé da interface. ”
- ' Não use versões de cores alternativas da marca da nossa empresa em fundos pretos. ”
O que fazer e não fazer evita o debate e economiza tempo de design e desenvolvimento, mas é sempre melhor fornecer uma nota de contexto como este:
“Esta lista de coisas que devemos e não devemos fazer cobre uma ampla gama de decisões de design importantes, mas não leva em consideração todos os possíveis usos indevidos dos elementos de design de nosso produto. Com isso em mente, use o bom senso quando a incerteza surgir e faça escolhas que reflitam com precisão a aparência geral de nosso produto. ”
Elementos ativos e snippets de código
As diretrizes de identidade da marca são normalmente documentos estáticos, mas os guias de estilo da interface do usuário incluem elementos ativos que operam como fariam no produto final - o que significa que os botões se comportam como botões, os menus suspensos na verdade são suspensos e as animações são animadas.
Os snippets de código permitem que os desenvolvedores copiem e colem rapidamente o código de elementos ativos no back-end de um produto.
Torne os guias de estilo da interface do usuário facilmente acessíveis para equipes de design
Agora que entendemos como criar um guia de estilo e os componentes e recursos incluídos em um Guia de estilo de IU, mudamos nossa atenção para o compartilhamento e a comunicação. Mais especificamente, quais são as opções para abrigar Guias de estilo de interface do usuário?
Tradicionalmente, os guias de estilo da interface do usuário existiam como páginas da web. Isso fornece aos designers e desenvolvedores acesso fácil e permite que os elementos de design funcionem como fariam no produto.
Mais recentemente, um punhado de plataformas baseadas em nuvem surgiu, permitindo que as equipes projetem, prototipem e testem produtos de forma colaborativa. Essas mesmas plataformas também são capazes de abrigar guias de estilo de interface do usuário e permitir que os membros da equipe troquem feedback e ideias contínuos.
Vejamos como algumas dessas plataformas descrevem sua abordagem aos guias de estilo de interface do usuário.
“Crie sistemas de design com componentes de UI vinculados que toda a equipe pode usar. Receba atualizações quando forem feitas alterações em componentes compartilhados ”
“Bibliotecas como sempre deveriam ter sido: cores, propriedades e elementos ... até mesmo o tempo de transição - tudo em um componente agora. Edite no local - tudo é um mestre. Substitua tudo o que você não precisa, por instância. ”
“Todos os componentes de marca e UX - incluindo a documentação de uso - são gerenciados em um único lugar. As alterações são sincronizadas com toda a equipe, e os designers podem mudar para a versão mais recente ou reverter as atualizações a qualquer momento. ”
“Faça seu próprio tema de material e crie uma biblioteca de símbolos de marca aplicando mudanças de estilo à cor, forma e tipografia. Compartilhe, carregue e apresente iterações de design na Galeria. Em seguida, use o modo de inspeção para acessar a documentação do desenvolvedor. ”
Os guias de estilo da interface do usuário devem ser fáceis de usar
Ao montar os Guias de estilo da IU, a comunicação não pode ser considerada garantida. As equipes de produto são formadas por pessoas de diferentes disciplinas, origens culturais e experiências profissionais. Use esses princípios para garantir clareza e facilidade de uso.
Layouts simples
Os guias de estilo da IU requerem layouts de tela limpos e organizados. Cada tela deve ser bem organizada, claramente identificada e altamente legível. Não há vantagem em sobrecarregar as telas com informações visuais, portanto, procure arranjos que sejam mínimos e espaçosos.
Instruções concisas
Mantenha as instruções curtas e amáveis. Evite parágrafos longos e use Tópicos . Sempre que possível, demonstre com recursos visuais sobre palavras.
Cenários de uso informativos
Quer saber quando usar este estilo de controle deslizante em vez daquele? Os 'cenários de uso' resolvem esse tipo de confusão. Novamente, os recursos visuais são mais fortes do que as palavras aqui, portanto, forneça exemplos que demonstrem claramente o cenário e o caminho adequado a seguir.
Histórias de versões relevantes
Os produtos digitais são atualizados com freqüência. Enquanto as equipes de produto procuram refinar cada detalhe da interface, é importante manter um registro contínuo de como os componentes de design evoluíram. Use discrição aqui - para empresas menores e equipes de produto, manter uma extensa biblioteca de históricos de versão pode ser impraticável.
Os guias de estilo da interface do usuário são um recurso valioso e uma ferramenta de design poderosa
As equipes de design e desenvolvimento contemporâneos valorizam a eficiência e a colaboração multidisciplinar, conforme evidenciado pelos sistemas de linguagem de design promovidos por grandes marcas como MailChimp, Google e Salesforce.
como calcular o preço IPO por ação
Os sistemas de linguagem de design permitem que diversas equipes que trabalham em produtos digitais sofisticados se comuniquem usando uma linguagem visual padronizada. Os guias de estilo da interface do usuário são integrados à estrutura dos sistemas de linguagem de design e servem como uma ferramenta confiável para iteração rápida e experiências digitais consistentes.
Ao mesmo tempo, o design não é uma atividade reservada apenas às grandes empresas. Uma gama diversificada de equipes de produtos e projetos digitais pode se beneficiar de guias de estilo de interface do usuário bem construídos, mas os recursos (financeiros, tempo e talento) variam de empresa para empresa.
Por esse motivo, os guias de estilo da interface do usuário são mais úteis quando adaptados às necessidades de empresas individuais e equipes de design. O maior objetivo de cada Guia de estilo de interface do usuário é um equilíbrio entre clareza e praticidade que leve a experiências de usuário consistentemente agradáveis.
• • •Leituras adicionais no ApeeScape Design Blog:
- Estilos de fontes para web e design de impressão
- Design Responsivo - Melhores Práticas e Considerações
- Por que as startups precisam de um guia de estilo
- Práticas recomendadas de usabilidade e design de ícones
- Use sua inspiração - um guia para quadros de humor
Compreender o básico
O que é um guia de estilo de branding?
Um guia de estilo de marca é um documento que contém todos os elementos de design visual de uma empresa (logotipo, cor, tipografia, iconografia etc.). Um guia de estilo de marca fornece regras básicas e notas de contexto para ajudar os designers a obter consistência de marca ao criar ativos para impressão, web, celular, etc.
Por que é importante ter um guia de estilo?
É importante ter um guia de estilo para ajudar os designers a manter a uniformidade da marca ao desenvolver material promocional para impressão, web, celular etc. Os guias de estilo são especialmente importantes quando há muitos designers trabalhando em um produto digital.
O que são trechos de código e como eles podem ser usados?
Ao trabalhar em produtos digitais para web e dispositivos móveis, os snippets de código permitem que os desenvolvedores copiem e colem rapidamente o código dos elementos de design ao vivo no back-end de um produto.
