Design De Iu
Como criar uma estrutura de design eficaz (inclui uma estrutura de interface de usuário de esboço grátis)
Se você já está no mundo do design há algum tempo, provavelmente já ouviu estes termos: estrutura de design, estrutura de interface com o usuário, kit de interface com o usuário ou biblioteca de padrões. Todos eles se referem à mesma coisa: um sistema de padrões de design, modelos, padrões de interface do usuário e componentes que são usados em todo o produto e atendem ao seu propósito. linguagem de design . Se você não construiu uma estrutura de design antes, iniciar uma pode parecer opressor e demorado, mas irá acelerar seu trabalho de design e torná-lo mais eficiente em geral.
Vamos descrever os principais problemas que um framework de design resolve, por que você precisa de um e os componentes que você precisará criar ao construir um. Você encontrará um framework de UI Sketch para download livre posteriormente no artigo que permite criar sua própria estrutura de design.
Uma estrutura de design no Sketch
O que é uma estrutura de design?
Cada design de IU começa com uma prancheta vazia e cada designer tem um processo que usa para transformar essa tela em branco em um produto totalmente funcional. Este processo inclui todos os pequenos componentes de design criados e as etapas que o designer executa para construir um todo coeso, das cores aos botões e tudo o mais.
Esse trabalho costuma ser repetitivo e pode ser consolidado e tornado mais eficiente com a criação de um sistema de padrões e componentes inter-relacionados. Em outras palavras, uma estrutura de design .
Estruturas de design resolvem vários problemas, incluindo:
- Eliminando inconsistências no design do produto.
- Aumente a colaboração, eficiência e comunicação entre as equipes de design e produto.
- Torne as atualizações de design menos frustrantes no processo de design.
O primeiro problema: inconsistência no produto
A consistência transforma um bom design em um ótimo design. A consistência melhora a experiência do usuário, a usabilidade geral e a eficiência com a qual os usuários podem usar produtos digitais. Quer se trate de um pequeno site, aplicativo ou grande produto SaaS, inconsistências no design prejudicam a aparência, a credibilidade e experiência de usuário do produto.
Inconsistências costumam ocorrer quando uma equipe ou equipe designer você faz as coisas muito rápido ou faz alterações na hora. Às vezes, um designer responde a um cliente ou parte interessada pedindo algo diferente, mostrando-lhes rapidamente como seriam essas mudanças. De repente, a equipe de design se depara com quatro tons diferentes de verde e ninguém sabe ao certo qual é a cor principal do botão.
Estruturas de projeto resolvem esse problema estabelecendo padrões consistentes.
O segundo problema: lacunas de colaboração e comunicação
Freqüentemente, durante o processo de desenvolvimento, quando há vários membros da equipe envolvidos, muitos trabalhando no design em diferentes pontos do processo, pode ser confuso se não houver um conjunto de padrões para orientar a equipe.
Uma estrutura de design aumenta a colaboração e a eficiência ao simplificar o processo de comunicação e fornecer padrões e orientações claras. Não se perde mais tempo tentando descobrir qual cor ou fonte é a certa para usar.
O terceiro problema: mudanças no design da última etapa
Quantas vezes os designers precisam fazer uma única alteração de cor no arquivo de design com 120 modelos de desktop já desenvolvidos? Quantas vezes é necessário mudar um ícone que faz parte de 200 componentes?
A mudança é inevitável em todo o processo de design, é a forma como o produto melhora, mas muitas vezes acontece mais tarde do que gostariam os designers . Uma estrutura de design torna as alterações de último estágio muito menos penosas, porque é construída em um sistema de componentes orientados a objetos. Altere-o uma vez e ele se propagará por todo o design.
Como criar uma estrutura de design
Agora que sabemos o que é uma estrutura de design e os problemas que ela resolve, vamos falar sobre como criá-la (e o que está no download do kit Sketch UI fornecido posteriormente neste artigo).
A estrutura de design usada para este artigo é um único arquivo de esboço que é apresentado usando uma hierarquia específica de componentes, conhecida no Sketch como 'símbolos'. Esses símbolos facilitam a implementação de alterações em todo o arquivo com um único clique. Uma alteração no componente 'mestre' - o 'símbolo' - é refletida instantaneamente em todas as outras instâncias.
Hierarquia de estrutura de design
Para criar uma estrutura de design que funcione bem, comece configurando uma hierarquia visual forte. Projete os componentes mais onipresentes como cores e tipografia primeiro. Em seguida, vá descendo até os menores, como botões e componentes de entrada. Pense nisso como construir uma casa - construa primeiro a fundação e, em seguida, adicione as outras peças à medida que o projeto avança.
Cor
A cor é o elemento mais importante em uma hierarquia de estrutura Design de interface do usuário - cada componente de um design usa cor. A cor provoca fortes reações e emoções nas pessoas e define a aparência geral, a sensação e o tom de um produto.
Uma boa prática é dividir as cores em grupos:
-
As cores primárias são as cores principais da marca, geralmente usadas para criar o esquema geral de cores de um projeto e para componentes cruciais, como botões.
-
Cores secundárias eles complementam a paleta principal - geralmente são matizes, saturações ou matizes diferentes das cores primárias. Tons de cinza É comumente usado para tipografia ou fundos. Algo entre cinco e oito níveis de cinza devem ser suficientes.
-
Cores de comentários do sistema eles são um grupo importante que os designers freqüentemente esquecem. Essas cores exibem mensagens do sistema, incluindo alertas, avisos e notificações.
Grade: o espaço de design
Uma vez que as cores são selecionadas, a próxima etapa é configurar uma grade. Uma grade mantém todos os outros componentes da página no lugar e na ordem corretos. Este é o espaço de design geral.
Existem dois tipos de grades: vertical Y horizontal .
A grade vertical é a mais comumente usada e mantém tudo alinhado horizontalmente. Existem muitos sistemas de grade populares como Bootstrap ou a grade de 960 pixels mais antiga. Uma grade horizontal não é tão comum. Uma grade horizontal é usada para tipografia. Cria um ritmo vertical para parágrafos e é comumente visto em jornais.
Modificadores: regras estilísticas
Além da cor e da grade, há mais um componente que está no alto da hierarquia da estrutura de design: modificadores. Eles não podem ser usados como componentes independentes - eles são usados para modificar ou estilizar outros.
Este grupo traz estilo a um projeto e inclui componentes responsáveis pela estética, como formas ou tons ; alterá-los individualmente nas fases posteriores do projeto pode ser complicado.
Trate os modificadores como parâmetros para todos os blocos de construção subsequentes. Crie símbolos Sketch de três maneiras diferentes: retângulo, retângulo arredondado e círculo. Use essas formas para criar cada um dos componentes de uma IU, incluindo botões, componentes de entrada, campos de formulário e assim por diante. e elementos de fundo.
Esta técnica permite para designers focar mais na UX do que na aparência dos componentes da IU. Também torna mais fácil voltar à forma básica, alterar seu estilo (por exemplo, raio de canto), e tudo conectado será atualizado automaticamente.
Tipografia: o conteúdo
A tipografia é o último componente importante da estrutura de design. Pode ser dividido em dois grupos: cópia de página estática, como títulos e parágrafos; e cópia interativa de componentes, como botões, navegação ou campos de entrada.
Projete o estilo e o tamanho de todos os títulos (H1, H2, H3, etc.) e parágrafos. A cópia estática da página geralmente não possui muitas variações estilísticas (cor ou peso). A única variação, em relação ao estilo de cópia de página estática, é se o fundo é claro ou escuro. Portanto, é melhor criar dois conjuntos de cores para garantir que a cópia de página estática funcione em ambos.
A cópia que aparece em componentes interativos, como botões ou mensagens de feedback do sistema, pode ter várias variações. Por exemplo, as mensagens de feedback do sistema podem ser exibidas em quatro cores de fundo diferentes, dependendo do tipo de mensagem (aviso, erro, sucesso, etc.) - os rótulos dos botões também podem ter fundos diferentes.
Incluir esse grupo na estrutura de design é útil ao pensar globalmente sobre tipografia. Primeiro, crie o texto normal do rótulo do botão e, segundo, crie suas variações; isso ajudará a evitar acabar com muitos tamanhos de fonte. Ao criar novos componentes de IU na estrutura, sempre verifique se há um estilo de fonte existente que se encaixa.
Ícones
Existem dois grupos de ícones em um sistema de layout: ícones informativos e de interface do usuário. O primeiro grupo normalmente faz parte de um conjunto de ilustração e não é usado para nenhum componente de interação da IU (como botões). O segundo grupo - ícones da interface do usuário - adiciona significado aos componentes mais complexos: botões, rótulos ou tabelas, enquanto ocupa uma quantidade muito pequena de espaço. Os ícones na IU também podem ser usados como gatilhos para funções como 'editar', 'copiar', 'baixar' e 'excluir'. Comece com ícones simples usados para interações da interface do usuário, como setas, 'adicionar' (+) ou 'fechar' (x). Uma boa prática é projetá-los em tamanhos diferentes (12px, 16px, 24px 32px).
Componentes
Botões
Os botões são, sem dúvida, um dos componentes mais importantes no design da interface do usuário e, ao longo dos anos, passaram por muitas mudanças conforme as tendências de design vêm e vão.
Ao projetar botões, certifique-se de projetar seus “estados” individuais. Como regra, um botão tem vários estados e fornece feedback visual aos usuários para indicar o estado atual (inativo, rolado, pressionado, desabilitado, ativo, etc.). Existem duas maneiras de fazer isso: a primeira é projetar a aparência dos botões separadamente para cada estado (normal, ativo, rolado e pressionado). Essa solução pode ser demorada, mas oferece bastante flexibilidade. (Este método foi usado na estrutura gratuita do Sketch UI incluída abaixo.)
A segunda maneira é projetar todos os estados com base no inicial. Por exemplo, crie uma Símbolo de esboço que mudará a cor, saturação ou brilho de cada estado. Para fazer isso, posicione o símbolo como uma sobreposição de botão com um dos modos de mesclagem do esboço: matiz, saturação ou sobreposição. Use um retângulo preto com modo de mistura de matiz no botão regular para alterar sua saturação. Alterar a opacidade da sobreposição posteriormente torna o botão mais ou menos saturado.
Componentes de entrada
As entradas permitem que o usuário se comunique com o aplicativo e faça upload de dados. O uso de componentes como campos de entrada junto com botões permite a criação de uma aplicação web simples. Tal como acontece com os botões, é melhor criar componentes de entrada com diferentes estados. Depende da estrutura de design, mas, no mínimo, considere a criação de estados vazio, preenchido e de erro.
Componentes complexos
Neste estágio, a estrutura de design pode ser considerada completa porque tem tudo que você precisa para criar um produto funcional. No entanto, geralmente vale a pena gastar mais tempo criando componentes de interface do usuário mais complexos para a estrutura da interface do usuário, como cartões, tabelas, separadores de data, gráficos e formulários. 
Seções
Nesse estágio, a estrutura de design pode ser desenvolvida com a criação das seções mais comuns de aplicativos ou sites. Ao projetar itens como navegação, títulos, uma seção 'sobre nós' e galerias, um designer pode economizar tempo nas fases posteriores de um projeto. A criação de diversas variações de diferentes seções do produto tornará mais fácil o ajuste a diferentes projetos ao longo da linha.
Boas práticas do framework de design
Teste constantemente a estrutura de design
O teste deve ser incluído em qualquer processo de design ou desenvolvimento. Evite erros e componentes ausentes ao criar pequenas peças de design e teste de estresse. Por exemplo, ele verifica se a alteração de um componente criado no início também altera um componente adicionado recentemente.
Crie componentes de interface de usuário simples
Mantenha os componentes simples enquanto pensa no maior número possível de casos de uso de design, para que, no futuro, qualquer estilo possa ser coberto. É melhor criar componentes de interface do usuário com formas simples, mantendo-os flexíveis o suficiente para caber facilmente em qualquer projeto.
Não se concentre em apenas um estilo
Uma estrutura de design deve ser universal, portanto, em vez de focar em um estilo específico, concentre-se nos componentes que podem ser usados para criar um estilo.
Crie sua própria estrutura de design
Em seu próximo projeto, reserve um tempo no início para construir cuidadosamente uma estrutura de design. Você descobrirá que ele melhora o processo geral de design, aumenta a eficiência e melhora a consistência do design do produto, o que melhora a facilidade de uso. Você economizará tempo, comunicará ideias de design com mais eficácia e deixará clientes e interessados felizes quando essas ideias ganharem vida em apenas alguns segundos em 120 pranchetas Sketch.
Pronto para iniciar sua própria estrutura de design?
Baixe o arquivo Sketch aqui . Estão incluídas instruções sobre como usá-lo.
Sistemas de design inspiradores e estruturas de interface do usuário
Uma das melhores maneiras de entender mais sobre estruturas de design é examinar como grandes empresas estabelecidas as utilizam. Siga esses tipos de empresas e conheça sua abordagem. Material Design do Google - atualmente uma das estruturas de design mais populares do mundo. Aprenda como o Google sobrepõe todo o processo de design e constrói uma hierarquia útil de componentes.
Linguagem de Design da IBM - A IBM compartilha todo o seu processo de design, incluindo uma explicação detalhada de cada detalhe.
Eles também compartilham muitos Recursos de sua linguagem de design, de ícones simples a uma biblioteca de animação de IU.
Atlassian –Outro excelente recurso de aprendizagem. dele guia de estilo do produto é um ótimo sistema de design para estudar. Eles compartilham seus Web GUI pack , um arquivo Sketch com toneladas de componentes e conceitos.
