Guia de estilo

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

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
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