Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Systems

562 views

Published on

Talk - Pedro Moreira da Silva - Industry Sessions #1 - Responsive Design - Powered By EDIT.

Published in: Education
  • Be the first to comment

Designing Systems

  1. 1. Designing Systems Pedro Moreira da Silva @pmoreirasilva Industry Sessions by EDIT. #1: Responsive Design • 29/11/2013 • Lisbon, Portugal
  2. 2. 25 de Maio 2010
  3. 3. http://alistapart.com/article/responsive-web-design
  4. 4. Pepper designed by Terri Toombs from The Noun Project Grelhas fluídas Imagens flexíveis Media queries 3
  5. 5. ems rems RESS Conditional loading Progressive enhancement Feature detection Vídeos Off-canvas layouts flexíveis Mobile first Imagens retina
  6. 6. Deliverables Profissionais Workflows Equipas Clientes …
  7. 7. 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
  8. 8. Solar System designed by Benjamin Orlovski from The Noun Project Sistemas
  9. 9. Um sistema é um conjunto de componentes que interagem ou são interdependentes, formando um todo integrado.
  10. 10. CSS DESIGN VISUAL OOCSS Style Tiles SMACSS Style Guides BEM
  11. 11. Style Tiles
  12. 12. 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/
  13. 13. 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/
  14. 14. http://styletil.es/
  15. 15. Style Guides
  16. 16. http://bbybrandidentity.com
  17. 17. http://bbybrandidentity.com
  18. 18. http://bbybrandidentity.com
  19. 19. We’re not designing pages. We’re designing systems of components. — Stephen Hay, Principal at Zero Interface http://vimeo.com/47171001
  20. 20. Frame designed by Paul Stevens from The Noun Project Não estamos na indústria da pintura.
  21. 21. REDESIGN DRI WEBSITE A pain in the arse.
  22. 22. NO PROJECTO SEGUINTE Componentize that shit.
  23. 23. Design Visual Front-end
  24. 24. Design Visual Front-end
  25. 25. Tiny Bootstraps, for Every Client. — Dave Rupert, Lead Developer @ Paravel http://daverupert.com/2013/04/responsive-deliverables/
  26. 26. 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/
  27. 27. PODÍAMOS PERSONALIZAR UMA FRAMEWORK… http://getbootstrap.com
  28. 28. PODÍAMOS PERSONALIZAR UMA FRAMEWORK… http://foundation.zurb.com
  29. 29. FRAMEWORKS/DESVANTAGENS • Subscrevemos o estilo/estrutura/ nomenclatura de outro developer • Podem ter elementos desnecessários • Podem não fazer tudo aquilo que precisamos
  30. 30. CRIAR UM FRONT-END STYLE GUIDE… http://pea.rs
  31. 31. CRIAR UM FRONT-END STYLE GUIDE… https://github.com/kneath/kss
  32. 32. CRIAR UM FRONT-END STYLE GUIDE… http://patternprimer.adactio.com
  33. 33. 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
  34. 34. PRECISAMOS DE UM MÉTODO Sustentável Integrado Colaborativo Actualizado Estruturado
  35. 35. http://www.flickr.com/photos/blambar/8895445410 http://pattern-lab.info
  36. 36. http://pattern-lab.info … a collection of tools to help you create [and maintain] atomic design systems.
  37. 37. http://pattern-lab.info … a collection of tools to help you create [and maintain] atomic design systems.
  38. 38. PATTERN LAB/ESSENCIAL • Gerador de sites estáticos orientado a sistemas • Ferramenta de anotação e documentação
  39. 39. http://pattern-lab.info … a collection of tools to help you create [and maintain] atomic design systems.
  40. 40. Slide retirado da apresentação “Atomic Design” de Brad Frost
  41. 41. http://demo.pattern-lab.info
  42. 42. ABSTRACT CONCRETE CREATORS CLIENTS Slide retirado da apresentação “Atomic Design” de Brad Frost
  43. 43. 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
  44. 44. THIS IS AWESOME
  45. 45. Sistemas flexíveis são o futuro do Web Design. http://betterwrappedinbacon.wordpress.com/2012/03/31/lego-blocks-are-killing-our-future/
  46. 46. Temos que mudar.
  47. 47. Trying to ‘make sense’ of change itself will become our basic industry. — Victor Papanek, Designer
  48. 48. Obrigado! @pmoreirasilva

×