Atomic design in responsive design

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 !