Guia de estilo

Guia de estilo

Introdução a guia de estilos, para que serve, quais os benefícios de usar, exemplos, quando usar, links, etc...

5716ab9479c715eecc6a9a7f2139da75?s=128

Glauber Ramos

December 09, 2015
Tweet

Transcript

  1. Guias de estilo Glauber Ramos

  2. O que é Guia de estilos são uma série de

    padrões para assegurar design e identidade. São guias da estrutura de um produto ou software. Eles podem conter diversos elementos como cores, identidade, elementos de interface, etc…
  3. Tipos de guia de estilo Conteúdo / vóz e tom

    - http://voiceandtone.com/ Código - https://github.com/styleguide Design - http://www.material-ui.com/ Branding / Marca Interface
  4. O que vai num guia de estilo de interface Cores

    Icones Fontes Botões Forms Listas Notificações Tabelas Componentes Templates Grid
  5. Exemplos Legais • http://mirebalaisstyleguide.herokuapp.com/ • https://www.lightningdesignsystem.com/ • https://buffer.com/style-guide • http://devtest01.openmrs.org:8080/openmrs/uicommons/styleGuide.

    page • http://hugeinc.github.io/styleguide/demo/index.html • https://www.homify.de/assets/styleguide.html • https://styleguide.barricade.io/index.html • http://rizzo.lonelyplanet.com/styleguide/design-elements/colours • http://govuk-elements.herokuapp.com/
  6. Consistência

  7. Linguagem única O guia de estilo acaba se tornando uma

    linguagem unica para membros do time se comunicarem e produzirem juntos. Ele contém, em um unico lugar, tudo sobre a aplicação e suas melhores práticas. Ele pode servir para ajudar novos membros, comunicação com o cliente e acelerar o desenvolvimento.
  8. Organização Ao construir o guia de estilo você estará organizando

    o estilo da sua aplicação em componentes e isso ajudará você a no final ter um CSS bem mais organizado e modularizado.
  9. Prototipação Como você agora possui um CSS mais organizado com

    diferentes componentes, fica muito mais fácil de prototipar e criar novas funcionalidades seguindo o guia de estilo.
  10. Frameworks

  11. Quando fazer um guia de estilo? A resposta curta é

    sempre. Mas tem casos que o beneficio é maior como: empresas grandes com diferentes produtos feitos por diferentes times são os que mais se beneficiam com um guia de estilo
  12. Guia de estilo como produto do processo de design O

    guia de estilo não é feito separadamente depois que você terminou sua aplicação, o ideal é construir junto durante o desenvolvimento
  13. Processo

  14. Guia de estilo vivo É um guia de estilo conectado

    com o código da sua aplicação. Um dos grandes problemas de guia de estilos é que com o tempo ele fica desatualizado. Criando um guia de estilo vivo esse problema some.
  15. Como fazer? SASS Variáveis Mixins Funções

  16. Organizando seu SASS

  17. KSS

  18. Como organizar? Atomic design

  19. None
  20. Boilerplate • http://sassyseeds.org/ • https://github.com/bjankord/Style-Guide-Boilerplate Mais informações • http://glauberramos.com/guia-de-estilo-vivo.html •

    http://stylifyme.com/ • https://frontify.com/ • http://styleguides.io/ Links
  21. None