style guide ui
0 gostou417 visualizações
O documento discute o que é um guia de estilo de interface do usuário (UI Style Guide), o que ele inclui, quando é necessário ter um e seus benefícios. Um guia de estilo define os elementos visuais e comportamentos de uma interface para manter a consistência e facilitar o desenvolvimento futuro. Ele deve ser criado quando vários times trabalham em um projeto ou quando há necessidade de consultar elementos visuais com frequência.
style guide ui
- 1. UI STYLE GUIDE Marconi Pacheco - Designer Digital .
- 2. O QUE É STYLE GUIDE? É um Guia visual, uma documentação com elementos visuais e suas definições, que compõe a interface de produto do usuário e comunica a linguagem visual à equipe. Explica a compreensão de seus comportamentos mostrados em exemplos reais, como: elemento selecionado, dimensão, cor, formas etc.).
- 3. O QUE É STYLE GUIDE? Cores Tipografia Botões Formulários Formas ícones ✓ Breadcrumbs ✓ Tabelas ✓ Calendário e time ✓ Checkboxes ✓ Radio buttons ✓ Drop-down ✓ Modal de alerta ✓ Tooltips ...entre outros elemento de acordo com a interface desenvolvida. O QUE COMPÕE
- 4. O QUE É STYLE GUIDE? EXEMPLO https://codepen.io/oliviale/pen/mgWjpq (2020)
- 5. STYLE GUIDE ✓ Em projetos que terão bastante telas ✓ Quando equipes trabalham remotamente ✓ Quando projetos precisam parar e dar continuidade futuramente ✓ Sempre que o projeto precisar mudar de equipes desenvolvedoras ✓ Em produtos digitais que produzem versões de desenvolvimento ✓ Sempre quando elementos ou dados precisam ser consultados frequentemente QUANDO E NECESSÁRIO TER UM?
- 6. STYLE GUIDE ✓ Estabelece um padrões visual ✓ Previne erros contra inconsistências visuais ✓ Ganho de tempo em futuros desenvolvimentos ✓ Gera documentação para futuras continuidades ✓ Exibe todos os componentes visuais do projeto ✓ Ajuda na integração de novos membros ao projeto BENEFÍCIOS
- 7. STYLE GUIDE Geralmente é feito em qualquer um dos momentos a seguir: ✓ Assim que o layout é aprovado ✓ Quando o desenvolvimento do front-end está finalizado ✓ Antes de ser enviado aos desenvolvedores back-end QUANDO INICIA A PRODUÇÃO DE UM STYLE GUIDE?
- 8. STYLE GUIDE Definição Style Guide: Documentação com todos os elementos visuais e suas definições. Quanto ao uso: Sempre que houver a necessidade de dar continuidade em uma interface ou consultar os elementos visuais. Benefícios: Manter um design visual consistente e facilitar a aplicação em todo o produto. Quando fazer: Quando percebe-se necessidade futura de fazer consultas do mesmo. CONCLUSÃO
- 9. É importante saber que existem outros dois processos de padronização parecidos, são eles: ✓ Guideline ✓ Design system Precisamos citar rapidamente esses conceitos para não haver confusões futuras. OUTROS PROCESSOS DE PADRONIZAÇÃO
- 10. É um conjunto de instruções para o desenvolvimento. Define o que pode e o que não pode ser usados, tanto para produção quanto para exportação (impressão e distribuição), podendo ou não incluir elementos visuais na documentação. GUIDELINE OUTROS PROCESSOS DE PADRONIZAÇÃO
- 11. GUIDELINE - EXEMPLOS OUTROS PROCESSOS DE PADRONIZAÇÃO https://br.pinterest.com/pin/389983648973955255/ (2020)https://br.pinterest.com/pin/46443439892303009/ (2020) Botões iPhone X
- 12. É uma biblioteca de componentes e padrões de comportamentos pré-estabelecidos e documentados para ajudar a desenvolver com mais eficiência e consistência. Códigos de programação pré-prontas para serem usados no desenvolvimentos de interfaces. DESIGN SYSTEM OUTROS PROCESSOS DE PADRONIZAÇÃO
- 13. DESIGN SYSTEM - EXEMPLO OUTROS PROCESSOS DE PADRONIZAÇÃO https://blog.prototypr.io/how-to-implement-atomic-design-in-your-current-project-368005f5c044 (2020) Atomic design ilustrando um design system
- 14. GUIDELINE DESIGN SYSTEM STYLE GUIDE Define regras Documentação escrita e/ou visual Instruções para desenvolvimento Padrão visual Guia de referências visuais Exibi todos os componentes existentes Biblioteca de componentes Códigos prontos para serem usados Programação pré-pronta para uso OUTROS PROCESSOS DE PADRONIZAÇÃO
- 15. Conhecer UI style guide é algo de extrema importância para designer que desenvolvem interfaces digitais. A utilização além de representar um bom ganho de produtividade para os desenvolvedores, também contribui para a organização e manutenção de projetos, fazendo do style guide uma boa ferramenta de uso. CONSIDERAÇÕES FINAIS