Designing Systems: An Approach to Responsive Web Design (Portuguese)

  • View
    624

  • Download
    3

Embed Size (px)

DESCRIPTION

Video: http://vimeo.com/81200786 An approach to Responsive Web Design by thinking in systems of components and bringing Visual Design and Front-end Development together. In the same way that front-end developers use modular CSS methodologies (such as OOCSS, BEM, or SMACSS), visual designers should also “componentize” their deliverables (with Style Tiles and Style Guides). Furthermore, a truly efficient Responsive Web Design workflow (or just Web Design for that matter) places developers and designers side by side, working in tandem. The presentation explores some of the possibilities that we have to accomplish this today, like Pattern Lab (http://pattern-lab.info). — Slide deck presented at “Industry Sessions by EDIT. #1: Responsive Design” (http://www.edit.com.pt/#noticias/edit-industry-sessions-responsive-design.html), November 29th 2013, in Lisbon, Portugal.

Text of Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

2. 25 de Maio2010 3. http://alistapart.com/article/responsive-web-design 4. Pepper designed by Terri Toombs from The Noun ProjectGrelhas udas Imagens exveis Media queries3 5. ems rems RESSConditional loading Progressive enhancementFeature detection Vdeos O-canvas layouts exveis Mobile rst Imagens retina 6. Deliverables Prossionais Workows Equipas Clientes 7. ELEMENTOS DE UM PROJECTO WEBDeliverables Prossionais Workows Equipas Clientes 5 PRINCPIOS DA FLEXIBILIDADEEcinciaConsistncia ComunicaoEducaoColaborao 8. Solar System designed by Benjamin Orlovski from The Noun ProjectSistemas 9. Um sistema um conjunto de componentes que interagem ou so interdependentes, formando um todo integrado. 10. CSSDESIGN VISUALOOCSSStyle TilesSMACSSStyle GuidesBEM 11. Style Tiles 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 @ Twitterhttp://styletil.es/ 13. An interior designer doesn't design three dierent rooms for a client at the rst kick-o meeting, so why do Web designers design three dierent webpage mockups? Samantha Warren, Designer @ Twitter http://styletil.es/ 14. http://styletil.es/ 15. Style Guides 16. http://bbybrandidentity.com 17. http://bbybrandidentity.com 18. http://bbybrandidentity.com 19. Were not designing pages. Were designing systems of components. Stephen Hay, Principal at Zero Interfacehttp://vimeo.com/47171001 20. Frame designed by Paul Stevens from The Noun ProjectNo estamos na indstria da pintura. 21. REDESIGN DRI WEBSITEA pain in the arse. 22. NO PROJECTO SEGUINTEComponentize that shit. 23. Design VisualFront-end 24. Design VisualFront-end 25. Tiny Bootstraps, for Every Client. Dave Rupert, Lead Developer @ Paravelhttp://daverupert.com/2013/04/responsive-deliverables/ 26. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients needs. Dave Rupert, Lead Developer @ Paravelhttp://daverupert.com/2013/04/responsive-deliverables/ 27. PODAMOS PERSONALIZAR UMA FRAMEWORKhttp://getbootstrap.com 28. PODAMOS PERSONALIZAR UMA FRAMEWORKhttp://foundation.zurb.com 29. FRAMEWORKS/DESVANTAGENS Subscrevemos o estilo/estrutura/ nomenclatura de outro developer Podem ter elementos desnecessrios Podem no fazer tudo aquilo que precisamos 30. CRIAR UM FRONT-END STYLE GUIDEhttp://pea.rs 31. CRIAR UM FRONT-END STYLE GUIDEhttps://github.com/kneath/kss 32. CRIAR UM FRONT-END STYLE GUIDEhttp://patternprimer.adactio.com 33. FRONT-END STYLE GUIDES/DESVANTAGENS No rpido desenvolv-los Tratados como um projecto parte Normalmente criados aps o projecto Geralmente demasiado abstractos teis apenas para designers/developers Muitas vezes incompletos ou desactualizados Falta-lhes sentido de estrutura 34. PRECISAMOS DE UM MTODOSustentvel Integrado Colaborativo Actualizado Estruturado 35. http://www.ickr.com/photos/blambar/8895445410http://pattern-lab.info 36. http://pattern-lab.info a collection of tools to help you create [and maintain] atomic design systems. 37. http://pattern-lab.info a collection of tools to help you create [and maintain] atomic design systems. 38. PATTERN LAB/ESSENCIAL Gerador de sites estticos orientado a sistemas Ferramenta de anotao e documentao 39. http://pattern-lab.info a collection of tools to help you create [and maintain] atomic design systems. 40. Slide retirado da apresentao Atomic Design de Brad Frost 41. http://demo.pattern-lab.info 42. ABSTRACTCONCRETECREATORSCLIENTSSlide retirado da apresentao Atomic Design de Brad Frost 43. PORQU O PATTERN LABServe como hub para todo o projectoFerramenta til para todosFacilmente passamos do abstracto ao concretoHTML/CSS/JS nossa maneiraPromove consistncia e coernciaEstimula exibilidade e pensar em sistemasDocumentao sempre actualizada 44. THIS IS AWESOME 45. Sistemas exveis so o futuro do Web Design. http://betterwrappedinbacon.wordpress.com/2012/03/31/lego-blocks-are-killing-our-future/ 46. Temos que mudar. 47. Trying to make sense of change itself will become our basic industry. Victor Papanek, Designer 48. Obrigado! @pmoreirasilva