Your SlideShare is downloading. ×
0
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Designing Systems
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Systems

367

Published on

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

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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
367
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 6. Deliverables Profissionais Workflows Equipas Clientes …
  • 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. Solar System designed by Benjamin Orlovski from The Noun Project Sistemas
  • 9. Um sistema é um conjunto de componentes que interagem ou são interdependentes, formando um todo integrado.
  • 10. CSS DESIGN VISUAL OOCSS Style Tiles SMACSS Style Guides BEM
  • 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 @ Twitter http://styletil.es/
  • 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. http://styletil.es/
  • 15. Style Guides
  • 16. http://bbybrandidentity.com
  • 17. http://bbybrandidentity.com
  • 18. http://bbybrandidentity.com
  • 19. We’re not designing pages. We’re designing systems of components. — Stephen Hay, Principal at Zero Interface http://vimeo.com/47171001
  • 20. Frame designed by Paul Stevens from The Noun Project Não estamos na indústria da pintura.
  • 21. REDESIGN DRI WEBSITE A pain in the arse.
  • 22. NO PROJECTO SEGUINTE Componentize that shit.
  • 23. Design Visual Front-end
  • 24. Design Visual Front-end
  • 25. Tiny Bootstraps, for Every Client. — Dave Rupert, Lead Developer @ Paravel http://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 @ Paravel http://daverupert.com/2013/04/responsive-deliverables/
  • 27. PODÍAMOS PERSONALIZAR UMA FRAMEWORK… http://getbootstrap.com
  • 28. PODÍAMOS PERSONALIZAR UMA FRAMEWORK… http://foundation.zurb.com
  • 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. CRIAR UM FRONT-END STYLE GUIDE… http://pea.rs
  • 31. CRIAR UM FRONT-END STYLE GUIDE… https://github.com/kneath/kss
  • 32. CRIAR UM FRONT-END STYLE GUIDE… http://patternprimer.adactio.com
  • 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. PRECISAMOS DE UM MÉTODO Sustentável Integrado Colaborativo Actualizado Estruturado
  • 35. http://www.flickr.com/photos/blambar/8895445410 http://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 estáticos orientado a sistemas • Ferramenta de anotação e documentação
  • 39. http://pattern-lab.info … a collection of tools to help you create [and maintain] atomic design systems.
  • 40. Slide retirado da apresentação “Atomic Design” de Brad Frost
  • 41. http://demo.pattern-lab.info
  • 42. ABSTRACT CONCRETE CREATORS CLIENTS Slide retirado da apresentação “Atomic Design” de Brad Frost
  • 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. THIS IS AWESOME
  • 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. Temos que mudar.
  • 47. Trying to ‘make sense’ of change itself will become our basic industry. — Victor Papanek, Designer
  • 48. Obrigado! @pmoreirasilva

×