Construindo um sistema de design Sketch: dicas e truques

Criar um sistema de design Sketch pode parecer muito desafiador e demorado no início, mas realmente vale a pena no futuro. É uma necessidade se você deseja obter soluções consistentes e melhorar seu DesignOps.

Por isso, preparamos algumas dicas e truques úteis para guiá-lo no processo de construção de um sistema de design em Sketch.

O que é um sistema de design?

Os sistemas de design geralmente são descritos como um conjunto de princípios e ativos de design que se traduzem em consistência na maneira como você cria interfaces de usuário. As três principais vantagens de usar um sistema de design são:

• Sintoniza um contexto de uso específico e domínio de aplicativo.
• Funciona como um inventário de padrões de design de UX e orientação de estilo de marca.
• Acelera o processo de design e melhora significativamente a consistência.

Já cobrimos tudo sobre sistemas de design em "6 etapas para construir um ótimo sistema de design" – o artigo piloto de nossa série de blogs em 3 partes. Portanto, você pode dar uma olhada nele para explorar o assunto em profundidade antes de continuar com a construção de um sistema de design em Sketch.

O que é Sketch?

É uma das plataformas gráficas vetoriais tudo-em-um mais comumente usadas para design digital simplificado. Sketch permite que os criadores de produtos digitais visualizem, apresentem e transformem suas ideias em layouts de design móvel de aparência moderna e protótipos básicos de maneira rápida e fácil.

A plataforma de design de produto digital equipa os designers com um conjunto de bibliotecas de interface do usuário, componentes flexíveis e símbolos que são constantemente atualizados. Dessa forma, os criadores digitais têm o poder e as ferramentas para experimentar conceitos, versões de design, fluxos de usuários e incorporar as últimas tendências de UI e UX ao que estão criando.

Quais são as vantagens do Sketch?

• Você pode facilmente criar e experimentar diferentes versões de design.
• Parece intuitivo e é ideal para prototipagem básica ou exibição de histórias de usuários.
• Oferece uma variedade de bibliotecas, símbolos, e componentes que estão sendo constantemente atualizados.
• Inclui plug-ins úteis como link Autolayout, Magic mirror e Git sketch.
• Fornece uma interface intuitiva que permite aos designers fazer todos os tipos de representações gráficas vetoriais.
• Fácil integração com outras ferramentas, como nosso App Builder de arrastar e soltar WYSIWYG, para reduzir o tempo de desenvolvimento e implementação do design e melhorar a colaboração entre equipes multifuncionais.

Quais são as desvantagens do Sketch?

• Muito pouco espaço para colaboração e comunicação.
• Não é possível comparar alterações em designs que foram feitos.
• Lacks basic image editing options.
• No free version.

O que é um sistema de design Sketch?

Um sistema de design em Sketch servirá basicamente como sua única fonte de verdade, combinando todos os recursos necessários para começar seu próximo projeto, mantendo a consistência em seus designs Sketch. Ter um desses sistemas realmente facilitará seu trabalho como designer e ajudará ainda mais a reduzir as discrepâncias ao aderir à marca, requisitos e padrões gerais de design, pois apresenta uma paleta de cores consistente e forte, estilos de tipografia e muito mais.

Como construir um sistema de design no Sketch?

Vamos direto ao ponto e ver como criar um sistema de design Sketch e usar variáveis de cor para criar a base de suas cores. Então, aqui estão as dicas e truques.

Paletas de cores

Se você tiver o azul como cor primária e o verde como destaque, provavelmente precisará de mais do que apenas uma única tonalidade. Um botão azul provavelmente precisará de um estado de foco, que geralmente é um pouco mais escuro e em um estado desativado que pode parecer desbotado. No entanto, há uma cor base da qual essas duas derivam e ela deve existir como uma variável de cor. Discutiremos os dois na próxima dica, quando falarmos sobre paletas.

Para continuar, sugerimos usar uma abordagem semelhante para cores cinza e para a cor de fundo principal do seu aplicativo e componentes como listas e cartões. Em Indigo.Design chamamos essa cor de "superfície". Ele existe como uma variável de cor, permitindo que você alterne facilmente todo o seu aplicativo de um tema claro para um tema escuro. Claro, mudar a superfície não é suficiente, porque você precisará atualizar as cores cinzas de acordo para garantir um bom contraste.

Mas como eles também formam uma paleta na maioria dos casos, teremos que nos aprofundar um pouco mais nisso na próxima dica, juntamente com as cores primárias e de destaque.

Use estilos de cores para criar os derivados de suas cores primárias, de destaque e cinza, formando paletas. Nossa abordagem com Indigo.Design foi ter 500 variantes que mapeiam para a tonalidade da variável e criam as variantes mais escuras até 900 adicionando preenchimentos que escurecem e saturam a cor base por baixo. Para as variantes mais claras que descem até 50, fazemos o oposto – dessaturar e clarear as camadas de preenchimento adicionadas à cor base.

Aqui você pode experimentar as propriedades desses preenchimentos até obter o resultado desejado para cada tonalidade. No entanto, lembre-se de que o objetivo final é ter uma paleta completa de cores, em vez de uma única. A melhor parte é que, quando a variável de cor precisa ser atualizada, todos os estilos de cores são atualizados, fornecendo outra paleta com bastante facilidade e rapidez. Ou, em outras palavras, faça isso uma vez para a cor primária e, em seguida, apenas duplique e mude para usar a cor de destaque como base para ter uma segunda paleta.

Agora, deixei de fora as cores cinzas da dica anterior porque elas merecem uma seção própria. Existem duas abordagens conflitantes quando falamos sobre os tons de cinza (trocadilho intencional) e, geralmente, a partir de uma discussão amigável, evolui para uma discussão dolorosa. Um grupo de designers defende a percepção de que as cores cinzas devem ser como todas as outras paletas, com uma base no meio e derivados em tons mais escuros e mais claros. O grupo oposto coloca a base em uma extremidade da paleta e extrai o restante dos tons brincando com a opacidade. Se o seu aplicativo de destino for apenas um modo, escuro ou claro realmente não importa. O que significa que ambas as abordagens funcionarão bem na maioria dos casos.

No entanto, se você estiver arquitetando um sistema de design Sketch para ambos os mundos, provavelmente deve optar pela abordagem de opacidade. Isso significa que você usa sua variável de cor cinza que é preta ou quase preta e aplica opacidades diferentes a todas as variantes. Por exemplo, 900 pode usar 87%, 800 pode usar 74% e assim por diante até 50, que pode ter apenas 2%. Com isso, mudar de um tema claro para um escuro é tão fácil quanto alterar as variáveis de cor de superfície e cinza, como mostramos acima.

Em seu sistema de design Sketch, você também pode considerar a criação não apenas de um, mas de dois ou três grupos de estilos de cores. Além de preenchimentos, você pode querer adicionar contornos/bordas e a combinação de um preenchimento e um contorno/borda. Claro, eu adiaria essa decisão até que surja um componente que realmente exija tal abordagem, caso contrário, será uma sobrecarga desnecessária. E, finalmente, um pequeno segredo de cor meu - crie uma cor transparente com 0% de opacidade no preenchimento e na borda. Isso permitirá que você tire os elementos da vista, mas simultaneamente os mantenha no lugar se não quiser perturbar seus layouts automáticos.

Tipografia

Passando para a tipografia, que em Sketch atende pelo nome de "estilos de texto", você notará uma semelhança com os estilos de cores discutidos acima. Agora, as principais propriedades que devem nos preocupar aqui são o tamanho e o peso da fonte que descreverão exclusivamente nossos títulos, subtítulos e corpo do texto, para citar alguns. Você também pode ter estilos internos como os que temos em Indigo.Design para um botão com uma transformação de texto, tornando-o todo em maiúsculas em nosso tema padrão inspirado em Material. Ou para o avatar e o hiperlink com seus próprios tamanhos e tratamentos especiais.

A regra geral aqui é incluir uma tipografia como parte de seu sistema de design Sketch que permite organizar o texto em blocos significativos, digamos, enquanto você escreve um artigo como este e ter opções suficientes disponíveis para que seus componentes alcancem o que os usuários do seu sistema de design podem ter em mente. No painel esquerdo da imagem abaixo, você encontrará a variedade de estilos de texto de alto nível que vêm com Indigo.Design kit de interface do usuário para Sketch.

Ao criar seus componentes, você notará que o texto nem sempre flui da esquerda para a direita. Um emblema numérico pode ter a necessidade especial de que seu valor esteja sempre alinhado no centro, enquanto um sufixo de texto pode fluir da direita para a esquerda, ao contrário do prefixo que segue o caminho oposto. Para facilitar todos esses cenários, é útil dividir seus estilos de texto de alto nível em grupos com alinhamento à esquerda, ao centro e à direita.

As cores seguem um caminho semelhante e devem ser a próxima e última camada de personalização, simplesmente porque os usuários do sistema de design de Sketch são muito mais propensos a desejar uma cor diferente para o texto das iniciais em um avatar do que alterar o alinhamento do texto. Agora, a tipografia de avatar é um caso especial, pois é aplicável apenas ao componente. Então, você provavelmente vai querer usar um princípio de design inteligente chamado restrições. Eu li pela primeira vez no livro de Don Norman "O design das coisas cotidianas". A restrição em vigor para o avatar é que sua tipografia vem apenas em um alinhamento centralizado, evitando que os usuários do seu sistema de design em Sketch cometam erros involuntários.

Para finalizar a tipografia, temos que mencionar que os estilos de texto são capazes de usar variáveis de cor e é assim que devem ser definidos. Afinal, se amanhã um novo diretor de arte vier e mudar as cores da marca, você não gostaria de passar uma semana atualizando seu sistema de design de Sketch, certo? Aproveitar variáveis de cor e texto e estilos de cores que as usam resume todo esse esforço a apenas alguns cliques.

Componentes

O último conjunto de dicas estará relacionado aos componentes. Para torná-lo um lance mais amplo, usarei o termo símbolos como são chamados em Sketch. Um símbolo pode ser qualquer coisa que não seja apenas um estilo, como texto e cor. No entanto, ele ainda é usado com bastante frequência e você precisa de um mecanismo para torná-lo autônomo, consistente e conectado à sua definição, ou seja, o mestre do símbolo em Sketch gíria.

Começando com algo tão simples como um conjunto de ícones, uma sombra ou uma coleção de ilustrações e indo até listas com seus itens e grades com vários tipos de células como exemplos de estruturas mais complexas. Mas por que eles deveriam vir como componentes, você pode se perguntar? Bem, ao criar um componente de botão de ícone no Sketch, é provável que você o defina amplamente. Mas como você o usa em um determinado contexto, você precisará alterar o ícone padrão por outro. O mesmo vale para uma ilustração de estado vazio e pode até ser aplicável a alguns estados interativos. Por exemplo, quando um cartão é focado, sua sombra cresce para fazê-lo se destacar e parecer surgir acima do resto da coleção.

É uma boa ideia, então, criar componentes de ícones para alimentar sua coleção de ícones no sistema de design Sketch. Esteja você usando um conjunto de terceiros, como ícones de materiais, fontes incríveis ou sua própria coleção personalizada, basta escolher um tamanho padrão. No caso do nosso sistema de design para codificar Indigo.Design, é 24 por 24, criando símbolos com os glifos de ícones. Ter todos os ícones com o mesmo tamanho de símbolo permite que os usuários marquem a caixa de seleção "Trocar no tamanho original". Considerando que usá-lo como uma substituição de símbolo em um componente, ele fornecerá apenas os símbolos aplicáveis, ou seja, todos os outros ícones para escolher.

Outra coisa importante é a nomenclatura, e gostaria que olhássemos para um exemplo de Indigo.Design. Temos o ícone de configurações: "一/Overrides/Material Icons/action/settings" que começa com um estranho símbolo especial "一". Seu único objetivo é empurrá-lo para a parte inferior do menu de inserção em Sketch dificultando a inserção direta do glifo.

Indigo.Design tem um componente de ícone para renderizar o próprio glifo de ícone. Portanto, mantemos a coleção de glifos em um local, dificultando a inserção direta. A próxima parte diz "Substituições" e é usada para designar que o que vem na linha deve ser usado apenas como uma substituição de símbolo. Então temos "Ícones de materiais" que é o nome do conjunto de ícones. As duas últimas partes do nome do símbolo definem o nome da categoria opcional e o próprio nome do ícone. As categorias são úteis para criar alguma organização em famílias maiores de ícones, como Material do Google e Material estendido por Infragistics.

As mesmas estratégias são aplicáveis a sombras e ilustrações, com a única observação de que, para ilustrações, não é necessário que sejam sempre do mesmo tamanho. Mais uma coisa importante ao projetar um componente é garantir que ele seja redimensionado de forma responsiva. Em outras palavras, se você quiser usar o ícone de configurações em uma área de 36 por 36, ele deve ser dimensionado adequadamente a partir de seu tamanho base.

Agora estamos prontos para mergulhar fundo e falar sobre como arquitetar componentes. Vejamos o que define um botão como um exemplo simples e comum de um componente. A primeira coisa que distingue os botões é o contexto de uso. Você precisará de um tipo de botão para o seu CTA, outro tipo para outras ações importantes, mais um para ações secundárias e até mesmo algo que flutue sobre uma lista e execute ações contextuais nela, como adicionar outro item da lista. Isso nos leva à necessidade de ter botões contidos, contornados, planos e flutuantes, por exemplo. Agora, se quisermos ter um botão super simples com apenas um ícone, podemos muito bem ter uma quinta variante.

O que é comum para esses botões é que eles têm algumas propriedades de estilo, onde a cor e os estilos de texto sobre os quais falamos anteriormente desempenham seu papel. Mas também podemos querer considerar alguns estados de interação, como passar o mouse, focar ou desabilitar um botão antes que determinada condição seja atendida. Para que os elementos usados dentro do botão forneçam seu conteúdo, pense em maneiras úteis de usar layouts inteligentes como abaixo, permitindo que você mostre e oculte partes dele, como o ícone anterior, o rótulo e o ícone posterior.

Antes de irmos para como você deve arquitetar os estados de interação de um botão, há duas coisas com as quais você deve ter muito cuidado ao configurar o layout inteligente. Em primeiro lugar, o texto do rótulo do botão deve ser configurado para definir sua largura automaticamente. E em segundo lugar, você deve certificar-se de que os elementos separados do layout não se sobreponham nem mesmo a uma fração de pixel e estejam em seu tamanho original.

Com isso, seu layout inteligente funcionará tão bem que você nunca precisará alterar nada nele. Eles devem ser definidos pela maneira como vemos um botão e eu aconselho você a dividi-los em dois. Primeiro vem o fato de que, à medida que um botão aparece na tela, ele pode ser ativado ou desativado. Portanto, em Indigo.Design nós mostramos isso da mesma forma que aparecemos, quer você esteja inserindo um botão delineado ou plano. O segundo é o estado disparado pela interação do usuário, se o botão está em repouso ou quando ele se torna focado com o teclado ou passa o mouse.

Como esses são os estados verdadeiramente interativos quando vistos do ponto de vista do usuário final, decidimos defini-los como símbolos separados, permitindo que os designers do sistema de design Sketch os alternem no painel de substituições de símbolos.

Vejamos outro átomo do sistema de design de Sketch com maior complexidade – a entrada. Além dos tipos de entradas no tema padrão de Indigo.Design– linha, caixa e borda – existem algumas outras características distintivas. Como, por exemplo, se vem com uma dica ou sem ela, que também foi exibida no menu de inserção. Isso foi necessário devido ao fato de termos um prefixo que empurra não apenas o valor, mas também o rótulo e a dica.

Se esse não for o seu caso, você pode usar um layout inteligente para a dica e matar dois coelhos com uma cajadada só. Algo que você não seria capaz de evitar, no entanto, são os estados de validação. Além do estado ocioso, preenchido e focado, definindo algum grau de interação do usuário que foi concluído ou está ocorrendo, também temos estados de sucesso, aviso e erro para dar suporte aos vários cenários de validação de formulários.

Finalmente, vamos dar uma olhada no grupo de botões e no cartão. De muitas maneiras, eles exibem os princípios usados para criar componentes e padrões mais complexos. O grupo de botões vem como dois símbolos inseríveis, representando uma coleção horizontal e uma vertical de sete botões cada.

Não há nada de especial sobre o grupo de botões além do fato de que ele tem um layout inteligente horizontal ou vertical abrangente que afeta não apenas os botões, mas também a borda, o plano de fundo e a sombra que estilizam todo o grupo. Se um ou mais botões forem ocultados pelo usuário do sistema de design ao definir suas substituições de símbolo como nenhum símbolo, tudo o que resta flui. Como seria de esperar de um componente verdadeiro.

O cartão pode parecer muito diferente, mas segue essencialmente a arquitetura de um grupo de botões verticais. A única diferença real é que não é uma coleção de elementos repetidos. Em vez disso, ele tem suas próprias seções especiais realizadas como componentes separados com diferentes variantes configuráveis como substituições.

A peça de mídia pode renderizar uma imagem ou um mapa estilizado. O cabeçalho usa um layout inteligente para permitir que elementos dele sejam removidos e o restante se adapte. As ações vêm com substituições para diferentes conteúdos e alinhamentos. Essencialmente, é apenas uma pilha vertical de áreas específicas respondendo, por exemplo, ao conteúdo do parágrafo ser desnecessário para um determinado cenário. Ao escondê-lo, todo o resto se adaptará e o cartão mudará de tamanho.

Em conclusão, Sketch tem um poder incomparável. E essa é a possibilidade de estabelecer uma base sólida de cores, tipografias, bem como alguns componentes básicos e, em seguida, aninhá-los em organizações de layout mais complexas, tanto quanto necessário. Dessa forma, você pode obter os resultados desejados enquanto qualquer modo e configuração estão a apenas alguns cliques de distância no painel de substituições de símbolos.

Com componentes mais complexos, é provável que você também selecione o mestre e gerencie suas substituições, use restrições com sabedoria mais uma vez e torne certos cenários impossíveis para os usuários do seu sistema de design Sketch.