Atomic design in responsive design

65cca193bf4f6ad183d1a86c71159206?s=47 Marija Zaric
August 25, 2016

Atomic design in responsive design

I was talking on 24 August in Impact hub at my meetup about the concept of Atomic Design in Responsive Web Design and its elements: atoms, molecules, organisms, templates and pages with real examples, useful tips and my working process.

65cca193bf4f6ad183d1a86c71159206?s=128

Marija Zaric

August 25, 2016
Tweet

Transcript

  1. ATOMIC DESIGN designing systems in web design

  2. until 2010 FIXED WEBSITES The only issue: IE

  3. FROM 2010 RESPONSIVE DESIGN Standard/New challenges

  4. We are not designing pages, we are designing SYSTEMS OF

    COMPONENTS. - Stephen Hay -
  5. ATOMIC DESIGN ELEMENTS Atoms Molecules Organisms Templates Pages

  6. ATOMS The smallest elements on page/pages. Buttons, Headings, Texts, Images,

    Fonts, Colors
  7. EXAMPLE:

  8. MOLECULES Atoms are connecting and creating molecules. Navigation, Logo link,

    Hero Block, Images with the text/One column grid
  9. EXAMPLE:

  10. ORGANISMS Molecules are creating complex organisms. Header, Footer, About us

    section, Services section, Different sections of the page/s
  11. EXAMPLE:

  12. TEMPLATES Templates are consisting of the group of organisms to

    create the page/pages.
  13. PAGE/PAGES Container filled with all the elements that client requires.

  14. EXAMPLE:

  15. WHAT? Atoms? Molecules? Organisms?

  16. ALTERNATIVES MOLECULES COMPONENTS ATOMS Smallest ELEMENTS ORGANISMS MODULES PAGE/PAGES FINISHED

    WEBSITE TEMPLATES STRUCTURE SIMPLE ISN’T IT?
  17. FORGET MOCKUPS How to start?

  18. DESIGNING IN THE BROWSER </> {} HTML,CSS

  19. DESIGN IS GOING TO BE ACCURATE. CLIENTS WILL HAVE A

    BETTER UNDESTANDING OF THE DESIGN.
  20. Using Responsive Frameworks ---------------- great design systems Designing in the

    browser ---------------- HTML,CSS Testing from Molecules ---------------- In browsers/devices Sending tested Template/s ---------------- as HTML demo to the client Finished website ---------------- PAGES RECYCLING the projects as the templates for the future project. My ATOMIC DESIGN process
  21. ATOMIC DESIGN conclusion Creating the systems of fragments that will

    connect to create the COMPONENTS & TEMPLATES that we can use all over again.
  22. Thank you! marijazaric.com The world belongs to the ENTHUSIASTS !