Atomic Design (#565 Responsive Blocks)

When teaching responsive design in UXUI, I also like to introduce students to Atomic Design, a beautiful concept that takes inspiration from chemistry to explain how smaller components come together to form a complete interface.

So, here’s a little learning interaction I’ve been working on! Click the link below to browse! (I really wanted to try the Code block in Rise because it looked straightforward, but I couldn’t use it with my trial account. Hopefully, I’ll get to try it someday!)

https://learn.allaresd.com/atomic-design-demo/

As you resize your browser window, the width indicator at the top updates along with it. Below and including 834 px, the page switches from showing the Atomic Design structure to explanations and examples of each concept. Try shrinking and widening your window to see it in action. Learners can switch back and forth as many times as they like!

My work buddies for this project: Figma for the layouts and visual assets (see attachment), and Codex for bringing the page to life (super quick to build an MVP, but it took another two hours to fix the responsive issues (╥﹏╥))

Hope you enjoy exploring it! I’d love to hear what you think! :)