Atomic Design By Pattern Lab Delaney Metzger Goal

+ Atomic Design By Pattern Lab Delaney Metzger

+ Goal of Atomic Design n Atomic Design is an idea that can be used to translate the creative side into what the client wants n Starts with basic ideas and builds up to working prototypes n These building blocks go from abstract ideas to concrete interfaces

+ What is Atomic Design? n “Atomic Design is a methodology used to construct web design systems” n In other words Atomic Design is a way to create your own effective, web based templates n Atomic Design is the idea that all sites, no matter how complex can be broken down into five distinct stages: n Atoms, Molecules, Organisms, Templates, and Pages

+ Atoms n The building blocks of a website n Basic tags n These items cannot be broken down any further n Not very useful on their own n Examples n Form labels n Buttons n Fonts

+ Atoms - Example n <button type=“button” onclick=“alert(“Hello World!”)”>Click!</button> Click!

+ Molecules n Molecules refer to groups of atoms bonded together n In Atomic Design this translates to “groups of elements (atoms) that function together as a unit” n The idea of do one thing well n Example n Three form labels (one for name, one for email, and one for message), three input boxes, and a button combine together to form a contact form molecule

+ Molecules - Example n Labels n Inputs n Submit Button Name Email Message Submit

+ Organisms n Organisms are “groups of molecules joined together to form distinct sections of an interface” n Building molecules with atoms, and in turn organisms leads to creating portable and reusable components n Can have similar and dissimilar molecules types n Example n Footer organism may include a search form, secondary navigation, and paragraph atom of contact information

+ Organisms - Example n Paragraph Element n Secondary Navigation n Search Form Our Company Address Line 2 Email Phone Home About Services Contact Us Search Site Enter Keyword Search

+ Templates n Templates are made up of “mostly organisms combined together to form page-level objects” n This is where HTML and wireframes come into play n Focuses on structure alone, not content n Eventually yields deliverable/production code

+ Templates - Example

+ Pages n Pages are specific illustrations of a particular template n They are used to test the effectiveness of the design n n Are there changes to be made? In this stage real content is substituted for placeholder content for the client to see

+ Conclusions n No matter how complex a site build is, it can be broken down into simple components n Breaking down a build into smaller parts makes for easier changes and additions n Easier to go from abstract ides to concrete interfaces with smaller building blocks

+ Exam Questions n 1) What are the five basic components of Atomic Design? n 2) Which component takes into account user testing and input from the client? n 3) What advantages are there to utilizing Atomic Design?

+ Exam Question Answers n 1) Atoms, Molecules, Organisms, Templates, and Pages n 2) The Pages component is when real content is placed into the interface and testing should occur here as well as any changes should be made at this stage n 3) In utilizing Atomic Design, smaller components can be built first and then assembled into the interface. This makes for easily repeatable sections and faster building of web site templates. In addition Atomic Design allows for easier changes and additions by slowly building up from small ideas to the finished piece.

+ Works Cited n Pattern Lab n n http: //pattern-lab. info/about. html Atomic Design n http: //www. slideshare. net/bradfrostweb/atomic-design