Este documento discute os princípios do design responsivo e sistemas flexíveis na web. Ele descreve como grids fluidas, imagens flexíveis e media queries permitem que sites se adaptem a diferentes dispositivos. Também discute a importância de criar sistemas de componentes reutilizáveis ao invés de páginas individuais.

1. Designing
Systems
Pedro Moreira da Silva
@pmoreirasilva
Industry Sessions by EDIT. #1: Responsive Design • 29/11/2013 • Lisbon, Portugal

2. 25 de Maio
2010

3. http://alistapart.com/article/responsive-web-design

4. Pepper designed by Terri Toombs from The Noun Project
Grelhas fluídas
Imagens flexíveis
Media queries
3

5. ems
rems RESS
Conditional loading
Progressive enhancement
Feature detection Vídeos
Off-canvas layouts flexíveis
Mobile first Imagens retina

7. Deliverables
Profissionais
Workflows
Equipas
Clientes
…

8. ELEMENTOS DE UM PROJECTO WEB
Deliverables Profissionais
Workflows Equipas Clientes
5 PRINCÍPIOS DA FLEXIBILIDADE
Eficiência
Consistência Comunicação
Educação
Colaboração

9. Solar System designed by Benjamin Orlovski from The Noun Project
Sistemas

10. Um sistema é um conjunto de
componentes que interagem
ou são interdependentes,
formando um todo integrado.

11. CSS
DESIGN VISUAL
OOCSS
Style Tiles
SMACSS
Style Guides
BEM

12. Style
Tiles

13. Style Tiles are similar to the
paint chips and fabric
swatches an interior
designer gets approval on
before designing a room.
— Samantha Warren, Designer @ Twitter
http://styletil.es/

14. An interior designer doesn't
design three different rooms
for a client at the first kick-off
meeting, so why do Web
designers design three
different webpage mockups?
— Samantha Warren, Designer @ Twitter
http://styletil.es/

15. http://styletil.es/

20. Style Guides

21. http://bbybrandidentity.com

22. http://bbybrandidentity.com

23. http://bbybrandidentity.com

24. We’re not designing pages.
We’re designing systems
of components.
— Stephen Hay, Principal at Zero Interface
http://vimeo.com/47171001

25. Frame designed by Paul Stevens from The Noun Project
Não estamos
na indústria
da pintura.

26. REDESIGN DRI WEBSITE
A pain in the arse.

31. NO PROJECTO SEGUINTE
Componentize
that shit.

39. Design Visual
Front-end

40. Design Visual
Front-end

41. Tiny Bootstraps,
for Every Client.
— Dave Rupert, Lead Developer @ Paravel
http://daverupert.com/2013/04/responsive-deliverables/

42. Responsive deliverables should
look a lot like fully-functioning
Twitter Bootstrap-style
systems custom tailored for
your clients’ needs.
— Dave Rupert, Lead Developer @ Paravel
http://daverupert.com/2013/04/responsive-deliverables/

43. PODÍAMOS PERSONALIZAR UMA FRAMEWORK…
http://getbootstrap.com

44. PODÍAMOS PERSONALIZAR UMA FRAMEWORK…
http://foundation.zurb.com

45. FRAMEWORKS/DESVANTAGENS
• Subscrevemos o estilo/estrutura/
nomenclatura de outro developer
• Podem ter elementos desnecessários
• Podem não fazer tudo aquilo
que precisamos

46. CRIAR UM FRONT-END STYLE GUIDE…
http://pea.rs

47. CRIAR UM FRONT-END STYLE GUIDE…
https://github.com/kneath/kss

48. CRIAR UM FRONT-END STYLE GUIDE…
http://patternprimer.adactio.com

49. FRONT-END STYLE GUIDES/DESVANTAGENS
•
•
•
•
•
•
•
Não é rápido desenvolvê-los
Tratados como um projecto à parte
Normalmente criados após o projecto
Geralmente demasiado abstractos
Úteis apenas para designers/developers
Muitas vezes incompletos ou desactualizados
Falta-lhes sentido de estrutura

50. PRECISAMOS DE UM MÉTODO
Sustentável
Integrado
Colaborativo
Actualizado
Estruturado

51. http://www.flickr.com/photos/blambar/8895445410
http://pattern-lab.info

52. http://pattern-lab.info
… a collection of tools
to help you create
[and maintain] atomic
design systems.

53. http://pattern-lab.info
… a collection of tools
to help you create
[and maintain] atomic
design systems.

54. PATTERN LAB/ESSENCIAL
• Gerador de sites estáticos
orientado a sistemas
• Ferramenta de anotação
e documentação

55. http://pattern-lab.info
… a collection of tools
to help you create
[and maintain] atomic
design systems.

56. Slide retirado da apresentação “Atomic Design” de Brad Frost

57. http://demo.pattern-lab.info

71. ABSTRACT
CONCRETE
CREATORS
CLIENTS
Slide retirado da apresentação “Atomic Design” de Brad Frost

78. PORQUÊ O PATTERN LAB
•
Serve como hub para todo o projecto
•
Ferramenta útil para todos
•
Facilmente passamos do abstracto ao concreto
•
HTML/CSS/JS à nossa maneira
•
Promove consistência e coerência
•
Estimula flexibilidade e pensar em sistemas
•
Documentação sempre actualizada

79. THIS IS
AWESOME

80. Sistemas flexíveis
são o futuro do
Web Design.
http://betterwrappedinbacon.wordpress.com/2012/03/31/lego-blocks-are-killing-our-future/

81. Temos que
mudar.

82. Trying to ‘make sense’ of
change itself will become
our basic industry.
— Victor Papanek, Designer

83. Obrigado!
@pmoreirasilva