Como criar um guia de estilo de esboço, biblioteca e kit de interface do usuário

Publicados: 2022-03-11

Todo projeto de design pode se beneficiar de um guia de estilo bem pensado. Use este tutorial para criar um kit de interface do usuário e criar simultaneamente uma biblioteca personalizada (e reutilizável) para prototipagem rápida.

Seja um especialista em Sketch ou novo no Sketch, os designers descobrirão que criar guias de estilo no Sketch pode ser um recurso valioso para sua caixa de ferramentas de design que pode economizar muito tempo.

Um guia de estilo não apenas ajuda a manter as coisas consistentes, mas também permite atualizações de elementos como cores e ícones em vários documentos com muito menos problemas. Este tutorial percorre o processo passo a passo de criação de um guia de estilo e kit de interface do usuário e dará aos designers uma melhor compreensão dos símbolos do Sketch, referenciando uma biblioteca do Sketch para seus designs e confiança na organização de seus ativos de design.

Criando seu guia de estilo de esboço

“Um guia de estilo é um 'documento vivo' abrangente que acompanha todos os elementos repetidos de um projeto, desde regras de marca até a quantidade de chanfros para botões de chamada para ação”, de acordo com UXPin. Um guia de estilo pode incluir desde elementos visuais simples até vocabulário e imagens aprovadas. Este tutorial abrange organização, cores, ícones, fontes, estilos de texto e ativos.

Primeiro Passo: Organização

Crie uma pasta mestre para armazenar arquivos de esboço, plug-ins e outros recursos necessários, como fontes e iconografia. (Plugins serão discutidos no final do tutorial.)
Inicie um novo arquivo Sketch e nomeie-o como “Biblioteca de nomes de clientes ”. Por exemplo, se o seu cliente é Toptal, seu arquivo deve ser chamado de “Biblioteca Toptal”.

Segundo passo: Cores

Se as cores já foram selecionadas, o próximo passo é converter suas cores em símbolos.

Para fazer isso, faça quadrados do mesmo tamanho e altere suas cores de acordo. Clique em “Create Symbol” e salve esses elementos usando o sistema de rotulagem color/ @color-name . Color/@pink , color/@background-gray ou color/@FFFFF são exemplos de rótulos apropriados. As convenções de nomenclatura são importantes para manter um guia de estilo organizado, portanto, um formato para tudo deve ser estabelecido e seguido desde o início.
Depois de concluído, adicione-os à página do guia de estilo.
Salve a amostra de cor na seção de documentos da sua paleta de cores.

Convertendo blocos de cores em símbolos do Sketch

Atalhos úteis: R - ferramenta retângulo, T - ferramenta de texto, alt - medir distância.

As cores dos símbolos de esboço também devem ser adicionadas à paleta de cores do documento — Salve a amostra de cor na paleta de cores dos documentos.

Terceiro Passo: Ícones

Transformar ícones em símbolos dinâmicos permite que suas cores sejam facilmente alteradas para qualquer uma das cores salvas na Etapa Dois acima. Isso significa que depois que um ícone é colocado em um design, a cor pode ser alterada por meio de um menu suspenso simples, chamado 'substituir', usando o 'Inspetor' à direita da tela.

Salve o ícone como um símbolo (se possível, use .svg para o tipo de ativo).
Vá para a página do símbolo, encontre o ícone e mascare-o com uma cor padrão das cores salvas anteriormente. Para fazer isso, sobreponha o símbolo de cor no topo do ícone e clique em “Máscara” na barra de ferramentas (ou clique com o botão direito e selecione “Máscara” no menu pop-up).
Depois que o ícone for mascarado, remova o preenchimento desmarcando a caixa de seleção na seção "Preenchimentos" no Inspetor.
Organize os ícones na página do guia de estilo. Na mesma seção, é útil especificar a cor dos ícones ativos e inativos, além de outras especificações de cores importantes.

Salvar ícones como símbolos do Sketch os torna mais fáceis de manipular — Primeiro, faça do ícone um símbolo.

Alterando as cores dos símbolos do Sketch mascarados — Em seguida, crie uma máscara com os símbolos de cores anteriores.

As cores podem ser alteradas com o menu suspenso Substituições — Quando necessário, altere a cor de qualquer ícone com o menu suspenso Substituições.

Etapa quatro: estilos de texto

Uma vez escolhidas as fontes, é hora de especificar os estilos de texto: H1, H2, H3, H4, H5, corpo, links, legendas, rótulos, etc. Uma boa referência para tipografia web é este post do Typecast.

Escolha o tamanho, peso, caractere e espaçamento entre linhas para quantos estilos forem necessários.
Escreva uma palavra (“Digite algo” aparece automaticamente quando você pressiona T, a ferramenta de texto) e formate-a para refletir os detalhes do estilo escolhido.
Clique em “Criar novo estilo de texto”.
Organize os estilos de texto na página do guia de estilo.

Especificar estilos de tipo em seu guia de estilo do Sketch mantém tudo consistente — A criação de estilos de texto mantém seu guia de estilo de interface do usuário consistente.

Procuravam-se designers de UI freelancers em tempo integral nos EUA

Quinto Passo: Ativos

Agora a parte divertida. É hora de combinar todas as etapas anteriores para criar alguns ativos. Se os ativos já tiverem sido criados, para manter a consistência, é melhor recriá-los usando os estilos de texto, ícones e cores que você já escolheu. Por exemplo, pode haver muitas cores diferentes de cinza no documento de design de trabalho que um design não levou em conta, portanto, recriar o ativo garantirá a consistência da cor escolhida. Não se esqueça de manter a nomenclatura consistente e certifique-se de adicionar recursos à página do guia de estilo à medida que são criados.

Aqui estão alguns recursos sugeridos para trabalhar:

Botões

Faça esses símbolos dinâmicos, assim como os ícones, mascarando o botão na cor padrão e removendo o preenchimento.
Para manter o texto sempre centralizado, espalhe a largura da caixa de texto para ser igual à do botão e centralize o texto.
Para garantir a consistência, certifique-se de usar os estilos de texto salvos.
Salve esses elementos como símbolos usando o sistema de nomenclatura botão/ nome do botão .
Use o recurso de substituição para alterar rótulos e cores.

Barras de pesquisa

Aplique restrições de redimensionamento ao campo de pesquisa e ícones e texto usados no próprio campo.
Não se esqueça de aplicar estilos de texto e cores salvos anteriormente na paleta de cores do documento.
Salve este elemento como um símbolo usando search como título ou, se você tiver diferentes tipos de pesquisa, siga o sistema de rotulagem, como search/standard e search/no-icon .

Botões de opção e caixas de seleção

É possível ter um símbolo dentro de um símbolo, e uma boa maneira de testá-lo é criar ativos inteligentes de botão de opção e caixa de seleção.
Primeiro, crie o próprio ativo do botão. Salve este elemento como um símbolo usando a caixa de seleção/selecionada e a caixa de seleção/desmarcada como um exemplo de rotulagem.
Agora crie a entrada. Adicione um texto de espaço reservado ao lado do símbolo da caixa de seleção e converta todo o ativo em um símbolo. Como isso agora é uma entrada, sugere-se salvar o ativo como tal, portanto, um bom rótulo seria input/checkbox/selected e input/checkbox/deselected .

Passo Seis: Use o Guia de Estilo!

Fazer todo esse trabalho para criar um guia de estilo só é útil se realmente tornar o projeto mais suave. Depois que todos os ativos forem criados, é hora de aplicar a biblioteca ao documento que está sendo projetado. No Sketch, vá em “Preferences ‐> Add Library…” e adicione o documento da biblioteca.

Aplicando um guia de estilo do Sketch a documentos futuros

Depois de adicionar uma biblioteca ao arquivo de design do projeto, você pode acessar a biblioteca e seus símbolos na seção de símbolos. Você notará a biblioteca iOS UI Design que vem com o Sketch como uma opção de biblioteca, bem como a biblioteca que foi importada recentemente.

Os recursos do guia de estilo podem ser acessados como símbolos do Sketch — Você pode encontrar todas as suas bibliotecas na seção de símbolos do seu documento de design. Você pode adicionar e remover quantas bibliotecas desejar.

Se você deseja atualizar um símbolo, clique duas vezes no próprio símbolo e seu documento de biblioteca deve aparecer. Depois de fazer as alterações, volte ao documento de design e clique no botão atualizar no canto superior direito.

Os símbolos de esboço podem ser facilmente atualizados em documentos sempre que a biblioteca é atualizada — “Atualização da biblioteca disponível” aparecerá no canto superior direito do Sketch.

O Sketch mostrará um alerta quando os símbolos puderem ser atualizados — Quando as atualizações da Biblioteca estiverem disponíveis, um modal exibirá os símbolos que foram alterados na Biblioteca. Clicar em “Atualizar Símbolos” aprovará as alterações.

Bônus: Importando/Exportando Estilos de Texto

Estilos de texto não são salvos com uma biblioteca, mas o plugin Shared Text Styles para Sketch resolve isso. Depois de baixar o plugin, vá para o documento da biblioteca e depois para o menu: “Plugins ‐> Estilos de texto compartilhado ‐> Exportar…” Salve este arquivo na mesma pasta do seu documento de biblioteca. Em seguida, no seu documento de design, vá para o menu novamente: “Plugins ‐> Shared Text Styles ‐> Import Text Styles…” e importe o arquivo que você acabou de salvar. Seus estilos de texto aparecerão.

Salvar estilos de texto requer um plugin extra

Bônus: Importando/Exportando Paletas de Cores

Semelhante aos estilos de texto, as cores do documento não são salvas com uma biblioteca do Sketch, mas o plug-in Sketch Palettes resolve isso. Da mesma forma que acima, exporte a paleta usando “Plugins ‐> Sketch Palette ‐> Document Colors ‐> Save Palette” e importe-a com “Plugins ‐> Sketch Palette ‐> Document Colors ‐> Load Palette”. Lembre-se de salvá-lo na mesma pasta dos outros documentos da biblioteca.

Bônus: Fontes

Craft by InVision é um conjunto de plugins que levam o software Sketch para o próximo nível. O Craft permite substituir imagens por fotos, protótipos e sincronização com o InVision, criar bibliotecas e muito mais. Se o Craft for baixado, pressione “cmd-shift-c” no documento e uma folha de estilo será gerada. As fontes serão listadas aqui.

O Craft da InVision traz uma série de recursos adicionais para o Sketch

Seguir as seis etapas descritas acima fará com que projetos de design grandes e pequenos sejam executados com mais facilidade e o resultado final seja mais polido. Se forem únicos ou muito específicos, o guia de estilo, a biblioteca e o kit de interface do usuário podem ser usados para um cliente ou para muitos projetos se os elementos de interface do usuário padrão estiverem sendo criados constantemente, como wireframes e protótipos. Dedicar tempo, no início, para criar esses componentes de interface do usuário do Sketch corretamente economizará muito tempo no futuro e, potencialmente, em muitos projetos.

• • •