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.

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 !