Todo projeto de design pode se beneficiar de um guia de estilo bem elaborado. Use este tutorial para construir um kit de IU e, simultaneamente, criar uma biblioteca customizada (e reutilizável) para prototipagem rápida.

Se um Especialista em esboço ou novo no Sketch , os designers descobrirão que a criação de 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 complicações. Este tutorial percorre o processo passo a passo de criação de um guia de estilo e kit de IU e dará aos designers uma melhor compreensão dos símbolos Sketch, referenciando uma biblioteca 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 mantém o controle de todos os elementos repetidos de um projeto, desde as regras de branding até a quantidade de chanfros para os botões de call to action,” de acordo com UXPin . Um guia de estilo pode incluir desde elementos visuais simples até vocabulário e imagens aprovadas. Este tutorial cobre organização, cores, ícones, fontes, estilos de texto e ativos.

Etapa Um: Organização

1. Crie uma pasta mestre para armazenar arquivos de esboço, plug-ins e outros recursos necessários, como fontes e iconografia. (Os plug-ins serão discutidos no final do tutorial.)
2. Inicie um novo arquivo de Sketch e nomeie-o “ Nome do cliente Biblioteca.' Por exemplo, se seu cliente for ApeeScape, seu arquivo deve se chamar “Biblioteca ApeeScape”.

Etapa dois: cores

Se as cores já foram selecionadas, a próxima etapa é converter suas cores em símbolos.

1. Para fazer isso, faça quadrados do mesmo tamanho e mude suas cores de acordo. Clique em “Criar símbolo” e salve esses elementos usando a cor / @ color-name sistema de rotulagem.Cor / @ rosa,color / @ background-gray, oucolor / @ FFFFFsão exemplos de rótulos adequados. 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.
2. Depois de concluído, adicione-os à página do guia de estilo.
3. Salve a amostra de cor na seção de documentos de sua paleta de cores.

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

Etapa três: ícones

Transformar os í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 de 'substituição', usando o 'Inspetor' à direita da tela.

1. Salve o ícone como um símbolo (se possível, use .svg para o tipo de ativo).
2. Vá para a página de símbolos, encontre o ícone e mascare-o com uma cor padrão das cores salvas anteriormente. Para fazer isso, sobreponha o símbolo da cor na parte superior 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).
3. Depois que o ícone for mascarado, remova o preenchimento desmarcando a caixa de seleção na seção “Preenchimentos” do Inspetor.
4. 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 quaisquer outras especificações de cor importantes.

Etapa quatro: estilos de texto

Uma vez fontes foram escolhidos, é hora de especificar estilos de texto: H1, H2, H3, H4, H5, corpo, links, legendas, rótulos, etc. Uma boa referência para tipografia da web é esta postagem do blog por Typecast.

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

Etapa Cinco: Ativos

Agora a parte divertida. É hora de combinar todas as etapas anteriores para criar alguns ativos. Se os ativos já foram criados, para 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 consideração, portanto, recriar o ativo garantirá a consistência da cor escolhida. Não se esqueça de manter os nomes consistentes 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

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

Barras de busca

1. Aplique restrições de redimensionamento para o campo de pesquisa e ícones e texto usados ​​dentro do próprio campo.
2. Não se esqueça de aplicar estilos de texto e cores salvos anteriormente na paleta de cores do documento.
3. Salve este elemento como um símbolo usandopesquisacomo o título, ou se você tiver diferentes tipos de pesquisa, adira ao sistema de rotulagem, comopesquisa / padrãoepesquisar / sem ícone.

Botões de rádio e caixas de seleção

1. É possível ter um símbolo dentro de um símbolo e uma boa maneira de testá-lo é criar botões de opção inteligentes e recursos de caixa de seleção.
2. Primeiro, torne o botão ativo. Salve este elemento como um símbolo usando ocaixa de seleção / selecionadaecaixa de seleção / desmarcadacomo um exemplo de rotulagem.
3. Agora crie a entrada. Adicione um texto de espaço reservado próximo ao símbolo da caixa de seleção e, a seguir, converta todo o recurso em um símbolo. Como isso agora é uma entrada, sugere-se salvar o ativo como tal, portanto, um bom rótulo seriaentrada / caixa de seleção / selecionadoeentrada / caixa de seleção / desmarcada.

Etapa seis: use o guia de estilo!

Fazer todo esse trabalho para criar um guia de estilo só será útil se realmente fizer com que o projeto seja executado com mais facilidade. Depois que todos os ativos foram criados, é hora de aplicar a biblioteca ao documento que está sendo projetado. No Sketch, vá para “Preferences -> Add Library…” e adicione o documento da biblioteca.

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 de design de IU do iOS que vem com Sketch como uma opção de biblioteca, bem como a biblioteca que foi importada recentemente.

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 para o documento de design e clique no botão atualizar no canto superior direito.

Bônus: importando / exportando estilos de texto

Estilos de texto não são salvos com uma biblioteca, mas o Estilos de texto compartilhados plugin para Sketch resolve isso. Depois de fazer o download do plug-in, vá para o documento da biblioteca e, em seguida, para o menu: “Plug-ins -> Estilos de texto compartilhados -> Exportar…” Salve este arquivo na mesma pasta do documento da biblioteca. Então, em seu documento de design, vá para o menu novamente: “Plugins -> Estilos de texto compartilhados -> Importar estilos de texto ...” e importe o arquivo que você acabou de salvar. Seus estilos de texto serão exibidos.

Bônus: importando / exportando paletas de cores

Semelhante aos estilos de texto, as cores do documento não economizam com uma biblioteca Sketch, mas o Plugin 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

Construir da InVision é um conjunto de plug-ins que leva o software Sketch para o próximo nível. O Craft permite que você substitua imagens por fotos de estoque, protótipo e sincronize com o InVision, crie 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.

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

• • •

Leituras adicionais no ApeeScape Design Blog:

• Por que as startups precisam de um guia de estilo
• Coisas que você talvez não saiba sobre tipografia no Sketch
• The Ultimate List of 50 the Best Sketch Plugins
• Adobe XD vs. Sketch - Qual ferramenta de experiência do usuário é a certa para você?
• Como construir uma estrutura de design eficaz (inclui uma estrutura de UI gratuita para Sketch)

Compreender o básico

Como você constrói uma identidade de marca?

Uma identidade de marca é construída em torno dos valores de uma marca, traduzidos em forma visual por meio da escolha de cores, iconografia, imagens, tipografia e outros elementos.

O que significa ser um documento vivo?

Um documento dinâmico é iterativo e continuamente editado e atualizado, com ou sem um processo formal para fazer alterações.

O que é um guia de estilo de branding?

Um guia de estilo de marca serve como referência para quaisquer ativos de design criados para uma determinada marca em termos de elementos de design visual (fontes, cores, logotipos, ícones etc.) para manter as coisas consistentes entre os designs.

Por que é importante ter um guia de estilo?

Um guia de estilo tem dois objetivos principais: servir como uma referência rápida para designers que criam ativos para uma marca e para garantir consistência em designs em diferentes ativos (sites, anúncios, brochuras, etc.) e diferentes designers e equipes de design.