Tudo parece desalinhado, fontes, bordas, espaçamentos. Você não sabe porque ficou tão diferente do protótipo, porque os clientes não usam a nova funcionalidade que você fez com tanto esforço. Talvez a interface seja apenas o reflexo de um processo confuso e um código igualmente sem padrão e desorganizado. Nesta pequena palestra eu conto como enfrentamos este desafio na SocialBase, como o desenvolvimento de UI agregou na UX e nas estratégias do negócio.

1. User Interface Challenge

2. DEFINIÇÃO EXECUÇÃO

3. UI
DEVELOP
UX
UI
DESIGN
FRONT
END
DEVELOP

4. Despadronização de [pastas]
[arquivos]
[estrutura]
[cores]
[formas] ...

5. 5 px
10 px
4 px
8 px
2 px

15. Excesso de “complexidade”

20. .
Classes
.button
.btn
.sb-btn
.bt
.v3 button

21. .
Classes
.button >>>
.btn
.sb-btn
.bt
.v3 button
Modificadores de classes
.button--primary
.button--secondary
.button--green
.button--invert
.button--tiny
.button--danger
.button--success
.button--gray
.button--medium
.button--small
.button--form
.button--notice

22. .
Classes
.button >>>
.btn
.sb-btn
.bt
.v3 button
Modificadores de classes
.button--primary
.button--secondary
.button--green
.button--invert
.button--tiny
.button--danger
.button--success
.button--gray
.button--medium
.button--small
.button--form
.button--notice

23. .
Classes
.button >>>
.btn
.sb-btn
.bt
.v3 button
Modificadores de classes
.button--primary
.button--secondary
.button--green
.button--invert
.button--tiny
.button--danger
.button--success
.button--gray
.button--medium
.button--small
.button--form
.button--notice
+ 700 linhas de SCSS

24. Outros problemas...
Além da despadronização e do excesso de complexidade:
➔ Cross-browsing
➔ Não acessível e sem mobilidade
➔ Interações pobres
➔ Manutenção lenta
➔ Bugs reincidentes
➔ Programadores dependentes
➔ Custos de retrabalho e produtividade

25. Principais causas
➔ Falta de definição de conceitos da
arquitetura
➔ Falta de definição de padrões de
desenvolvimento
➔ Resíduos de desenvolvimento e
refatorações

26. UI Projetada UI Adaptada

27. Usar um framework é a solução?

28. Frameworks de HTML e CSS
PORQUE USAR
➔ Componentes pré-fabricados
➔ Padrões avançados de HTML e CSS
➔ Estrutura de arquivos organizada e documentação detalhada
➔ Desenvolvido e testado em comunidade
PORQUE NÃO USAR
➔ Maior complexidade para implementar, modificar e manter
➔ Limitam a inventividade do design
➔ Nenhum controle sobre roadmap, atualizações, melhorias, correções

29. UIkit
960 Grid System
Skeleton
99lime HTML KickStart
Kube
Less Framework
Flaminwork
G5 Framework
Easy Framework
Blueprint
YAML
BlueTrip
YUI CSS
Elements
52framework
Pure
elastiCSS
Boilerplate
Emastic
Malo
The Golden Grid
1kb grid
Fluid 960 Grid System
Baseline
Lovely CSS Framework
xCSS
FEM CSS Framework
Helium
Knacss
Groundwork CSS
Gumby
Bootstrap 4
Foundation
Semantic U
Materialize
Principais Frameworks
Unsemantic
Seelva
Tuktuk
Maple
Fluidable
Ink
Kickoff
Cascade Framework
Cascade Framework
Light
Metro UI CSS 2.0
Jeet
Responsive Boilerplate
Susy
Inuit.css
Topcoat

30. Comparando as comunidades

31. Comparando atributos
Comparação na íntegra.

32. Qual é o melhor?
➔ Bootstrap é o popstar. Mais simples para “sair usando” mas bastante verboso. Possui elementos e
componentes básicos. Será necessário estender e modificar bastante código para criar diversas partes da
nossa UI. Está em transição, rumo a o lançamento da Beta 4.
➔ Foundation é um projeto robusto e muito semelhante ao bootstrap. Possui um poderoso grid flexível e
uma comunidade grande. Apesar de ter aperfeiçoado algumas questões do bootstrap não podemos
considerá-lo superior, são apenas apenas concorrentes. Foundation está em sua 6 versão.
➔ Semantic UI ...

33. Browser suporte
➔ Bootstrap, Foundation e Semantic possuem
grids baseados na propriedade Flexbox. Esta
propriedade é suportada em todos os
navegadores modernos e no IE a partir da
versão 11.
➔ Oficial, a Microsoft anunciou em 12 de janeiro
de 2016, que as versões do Internet Explorer
que antecedem a versão 11 não receberão
suporte técnico e atualizações de segurança.

34. Pegue apenas o que precisar

35. Definir o UI KIT
Ao projetar e construir
as soluções, produto e
engenharia utilizarão a
mesma caixa de peças.

36. Diferença de custos
LEGOPLAYMOBIL

37. Design Atômico
Os componentes de uma página da internet se comportam de
maneira muito parecida com a de átomos, moléculas e organismos.
Páginas na internet são basicamente compostas por um grupo finito
de elementos (tags HTML) que podem se agrupar de diferentes
maneiras para criar sistemas complexos.

38. Conclusão
ORGANIZAR, PADRONIZAR E TESTAR
➔ Framework não é ponto central, UI-KIT é.
➔ Documentar conceitos de UI (o que é módulo,
componente, elemento, design atômico?)
➔ Definir questões estruturais como o grid (o que é
mobilidade? acessibilidade? )
➔ Definir um sistema rigoroso de escrita de HTML e CSS
(nomenclatura, indentação, estrutura de arquivos...)
➔ Manter componentes visuais modularizados (prontos
serem usados pelos programadores de forma fácil)
➔ Criar processos de testes de UI
➔ Evoluir tecnologia
➔

39. RSC
REFATORAÇÃO
➔ Realizar refatorações pequenas, de
dentro para fora, ou seja, dos elementos
menores/isolados, aos
componentes/módulos e só depois as
estruturas layout/grid.

40. RSC
REFATORAÇÃO
➔ Realizar refatorações pequenas, de
dentro para fora, ou seja, dos elementos
menores/isolados, aos
componentes/módulos e só depois as
estruturas layout/grid.

41. RSC
REFATORAÇÃO
➔ Realizar refatorações pequenas, de
dentro para fora, ou seja, dos elementos
menores/isolados, aos
componentes/módulos e só depois as
estruturas layout/grid.

42. Fim.

44. Fontes
➔ Crie seu próprio frameworks
➔ Frameworks: usar ou não usar - Blog da locaweb
➔ Motivos para não usar o bootstrap
➔ Último release do bootstrap Alpha antes do Beta
➔ Comparativo entre CSS frameworks
➔ Referência para documentação de conceitos - Glossário do Semantic UI
➔ Best CSS frameworks 2017
➔ Sass vs. Less - CSS Tricks
➔ Bootstrap vc. Semantic UI - UPwork
➔ Bootstrap, ame ou odeie - Tableless
➔ Bootstrap - Oficial
➔ Foundation - Oficial
➔ Semantic UI - Oficial
➔ Materialize - Oficial
➔ Estatísticas IE
➔ O suporte a versões mais antigas do Internet Explorer termina
➔ Responsive CSS Framework Comparison

45. Victor Hugo Magalhães
victorhugo.www@gmail.com
48 99808-5506
Linkedin
https://www.linkedin.com/in/victor-hugo-magalh%C3%A3es-b-t-polli-25300590/