Apresentação no UX Conf 2015 sobre como mudar o processo de design para a geração de guias de estilo de interface

1. Styleguide para projetos
web: o que muda no
processo do projeto
Daniel Ranzi Werle
@danielrw
Patrocínio: Organização:

2. Eu!

3. Exemplos de style guides retirados de styleguides.io

4. SAP Fiori Design Guideline - https://experience.sap.com/fiori-design/

5. Styleguides
"Um style guide é uma biblioteca de padrões amplamente aceita
que codifica os elementos interativos, visuais e de linguagem de
uma interface de usuário e sistema. Style guides (também
conhecidos como biblioteca de padrões) são uma coleção viva
de todos os componentes do seu produto que estão em contato
com os usuários. Se é feito de pixels, vai pro style guide."
(GOTHELF, 2013. Lean UX, p. 41. tradução e grifos nossos)

6. Styleguides
"Pra mim, um style guide é um documento vivo de código, que
detalha os vários elementos e módulos codificados do seu site ou
aplicação. Além do seu uso em consolidar o código front-end, ele
também documenta a linguagem visual, como os estilos de
cabeçalho e paletas de cores usadas pra criar o site."
(ROBERTSON, S. Creating Style Guides, 2014. Disponível em <http:
//alistapart.com/article/creating-style-guides>. Tradução e grifos
nossos)

7. Tech vs UX
Como geralmente é o cenário de um projeto de redesign de produto

8. (FROST, Brad. Atomic Design, 2013. Disponível em http://bradfrost.
com/blog/post/atomic-web-design/. Tradução do Tableless)

9. O que muda no processo de design?
(COOPER, 2014. About Face, p. 23.)

10. O QUE MUDOU NA PESQUISA?
● Fazer inventário
de componentes
de interface;
● Entender
bibliotecas e
componentes
utilizados;

11. O QUE MUDOU NA ARQUITETURA?
● Padronização dos
componentes;
● Documentação
automatizada;
● Utilização de
funcionalides
específicas de
componentização;

12. O QUE MUDOU NA CRIAÇÃO?
● Padronização dos
componentes;
● Arquivo separado
compartilhado para
componentes;
● Usar ferramentas de
controle de estilos;

13. O QUE MUDOU NO FRONT-END?
● Cada componente de
interface vira um
arquivo de código
separado;
● Utilização de bibliotecas
de compilação pra
montar os códigos;
● Reutilização de valores,
parâmetros e
componentes;

14. O QUE MUDOU NA DISTRIBUIÇÃO?
● Todos trabalhando no
mesmo repositório de
código, utilizando
ferramentas de
versionamento;
● Automatização da
publicação do styleguide
e dos assets para
produção;

17. Obrigado!
Deixe seu feedback aqui:
bit.ly/uxconf-feed
Styleguide para projetos web
@danielrw
Conferência sobre User Experience
em Porto Alegre, set/2015.
Patrocínio: Organização: