Styleguide o jeitinho fácil
Um Styleguide é um documento que define e orienta o estilo digital do seu produto. O que um bom styleguide pode incluir: fontes, logos, cores e seu uso, guia de uso da tipografia, icones, grids, imagens, tratamentos, botões e seus usos, exemplo principais de animações, formulario e todas interações descritivas.
Como assim tem que incluir tudo isso dai? Mas tem tudo isso no meio dos meus designs, é so o desenvolvedor ve la na — pagina 4 copia 16 versão final.
Poisé, sejamos honestos você gostaria de receber um arquivo bagunçado? Com as layers tudo mal nomeada? NÃO! Então respeite o trabalho do time de desenvolvimento e faça sua parte com um styleguide bem feito. Vamos as dicas.
Qual a importância de um Styleguide?
Consistência é a principal razão, mas temos outras razões que podem te ajudar a entender melhor a necessidade de fazer um styleguide bem feito.
Outras razões: estabelecer regras da marca, cria um guia digital para a empresa e agências que por algum motivo criem algo para o ambiente digital, diminuir gastos e tempo na criação de novos produtos, auxilia no crescimento da empresa/produto (escalabilidade), e por fim ajuda seu time de desenvolvimento a acelerar a construção dos produtos digitais.
Como um Styleguide ajuda o desenvolvimento?
O entendimento do seu design precisa ser facil pra que seja construido da forma correta, eu sei que sua criatividade e suas idéias estão na sua cabeça e tudo funciona bunitinho, mas o time de desenvolvimento não consegue ler mentes, então o styleguide é sua chance de se comunicar com o desenvolvimento e mostrar todas as suas idéias em volta da marca e do produto. Isso ajuda os desenvolvedores a entender o que será necessário em codigo para a criação das suas telinhas coloridas. Em um ambiente de agência o styleguide ajuda até mesmo nas estimativas de tempo do time de desenvolvimento, porque ali eles tem uma referencia simplificada e atomizada dos designs.
Qual melhor estrutura para um Styleguide?
Isso depende de cada designer e lembrando sempre — Quem é o usuário que vai usar o styleguide? Desenvolvedores.
Resumindo a estrutura deve ser definida em conjunto com seu time de desenvolvimento, pode ser um workshop ou uma ligação no skype, vocês precisam se comunicar pra entender os requerimentos desse styleguide.
Uma estrutura padrão que vem sendo usada consiste em: Grid, tipografia, cores, icones, botões….e o resto vai de cada time os items necessários, esses que citei são O MÍNIMO!
Exemplos de styleguide que valem a pena se inspirar
Segue aqui uma lista que eu mesmo filtrei durante uma pesquisa pra desenvolver o meu padrão de styleguide.
Vale lembrar que essa lista serve de inspiração, não copie nunca trabalho de alguem. Você como um bom profissional deve no minimo entender o tempo e esforço que foi colocado nesses trabalhos.
https://www.carbondesignsystem.com/
https://atlassian.design/guidelines/product/foundations/color
https://ant.design/docs/spec/introduce
https://design.firefox.com/photon/welcome.html
https://vmware.github.io/clarity/documentation/v0.13/
https://buffer.com/style-guide
Resposta ideal: em alguns casos, SIM! Eu ja fiz um com 119 paginas durante 3 meses, depende do tamanho do produto e do cliente.
Resposta amigão: não né fera existem atalhos pra isso e segue o arquivo de exemplo que eu fiz ai pra você e que a construção dele vai fazer parte do meu curso de design. Se você não tem Sketch segue aqui o arquivo em PDF pra te ajudar no seu software de preferência.
👏 Like se você gostou do artigo
💬 Comenta se você tiver uma pergunta ou quiser adicionar algo que não estava no artigo
👾 Follow pra ver mais artigos como esse
📩 Sign up receba no seu email: Sketch files, ebooks e conteúdo gratuito. Link: https://goo.gl/jQha7k
