Evaluation icon Evaluate
← Back to Schedule
DPA1
Room 307

Putting Atomic Design to Work

Presented by Jenny Slaughter and Donald St. Martin

Atomic design is a web development philosophy employing a system of elements that combine with one another to create larger components, templates, and ultimately, web pages. As a concept, atomic design can transform the way you think about website design. And in practice, it offers tremendous benefits to efficiency, consistency, communication, and collaboration.

What atomic design looks like in practice varies by team and organization, but the approach can benefit all disciplines. Developing a pattern library using the atomic design methodology often involves user experience architects, developers, and designers working together to ideate and build components. Working together with a shared approach helps keep things consistent, assuring that the functionality and naming of components is clear to everyone.

For a college or university system, a pattern library can be used to bring a brand guide into the digital realm, where it can be easily updated, extended, shared, and used to create a family of websites.

Using a pattern library helps designers and developers create a functional, visually unified system that can be recombined to build new pages while maintaining quality and consistency. It creates efficiency, as elements combine to create new styles and components that you can leverage throughout your entire site.

This allows you to quickly and easily create working digital prototypes rather than designing with static visuals. A scaled-down page design printed on a piece of paper can’t capture interactive elements and functionality, and gives an incomplete picture of the final product. Rapidly prototyping concepts makes it easier to get effective buy-in from stakeholders, who can interact with a living, breathing demo site.

Even better, quick, global changes are easy to make. There’s no need to keep re-typing code to modify components or spend hours in a design program modifying individual elements for each template or page design.

We’ll share some tools you can use for managing and creating pattern libraries and design-focused tools that support an atomic design approach.

Learn how atomic design can help you:
– Control the conversation and gain buy-in through rapid prototyping
– Establish naming conventions and improve collaboration and communication
– Create technical documentation and build shared libraries of code

Slides

About

Jenny Slaughter

Developer/Designer

Maker of things and fixer of problems, Designer/Developer Jenny Slaughter made her first website in sixth grade. She started freelancing in high school, and by college she was building her own CMS (though she didn’t say whether that ended up being a good idea). Slaughter studied web design at Radford University, where she designed, developed, and directed the student-run online magazine. And before she came to NewCity, she worked as the sole web designer/developer at Ferrum College during a site redesign and implementation. For us, she puts that same crazy-awesome drive to good use taking ideas and making them go. Tell her something is impossible, or difficult, or maybe even just questionable, and she will find a way to do it — better. She’s conquered custom JavaScript pieces, flexible filters, complex polygon and parallax templates, and other things that started out with “Hey, I wonder if…?”

Donald St. Martin

Software Applications Developer

Donald St. Martin is a software applications developer for the Texas A&M University Division of Student Affairs. He has more than 17 years of experience building applications in HTML, CSS, JavaScript, PHP, and various JavaScript and PHP frameworks. He focuses on responsive web design, usability, accessibility, making data-driven decisions, and automation. He stays at the forefront of the latest technologies to provide the best service strategy for our customers.