O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Back-end & Front-end em Harmonia com Atomic Design

68 visualizações

Publicada em

Como uma metodologia tão simples pode resolver problemas na organização dos componentes de um produto?

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Back-end & Front-end em Harmonia com Atomic Design

  1. 1. FRONT ENDBACK harmonia Atomic Design em com &
  2. 2. SOU @matheusagcosta EU?QUEM @fintechdev #comunidade <3
  3. 3. DESIGN OI?ATOMIC metodologia
  4. 4. átomos BOTÃO Parágrafo Título LINK #8ABE5E
  5. 5. moléculas TítuloEstilizado AÇÃO 2AÇÃO 1 Item 1 Item 2 Item 3 Item 4
  6. 6. organismos Alerta AÇÃO 2 Mensagem de confirmação AÇÃO 1 LOGO Link AtivoLinkLink Link Link Texto de rodapéLink
  7. 7. Modelos LOGO Link AtivoLinkLink Link Link texto de rodapéLink IMAGEM
  8. 8. páginas DevTalks ContactAboutBlog Home Sitemap copyright © 2017Terms
  9. 9. Bootstrapstiny
  10. 10. organizando químicatoda a
  11. 11. http://patternlab.io/
  12. 12. http://demo.patternlab.io/
  13. 13. MAS…
  14. 14. https://www.sitepoint.com/setting-up-a-living-styleguide-in-jekyll/
  15. 15. case fintechdev
  16. 16. navegação detalhes código demonstração
  17. 17. demo time
  18. 18. atomic design CSS?no
  19. 19. “…atomic design has nothing to do with CSS or JavaScript architecture.” http://bradfrost.com/blog/post/atomic-design-is-for-user-interfaces/ - Brad Frost
  20. 20. arquitetura CSS
  21. 21. http://www.creativebloq.com/web-design/manage-large-css- projects-itcss-101517528
  22. 22. metodologia CSS
  23. 23. BLOCK ELEMENT MODIFIER - .header - .header__title - .header__title--dark
  24. 24. ! atomicdesign.bradfrost.com tableless.com.br/o-que-é- design-atomic "

×