Component-based design… good for everyone
Component-based design is not new. Developers and designers alike have been building websites for years utilizing this methodology, although maybe unaware. It’s a concept that has gained recent notoriety and formalization thanks to the evolution of website development technologies and a desire for design and content consistency. Especially across many screen sizes.
What is component-based design?
Component-based design, or atomic design,1 is breaking down the elements that make up a website into their smallest iterations—for example, a button or a headline—and then reassembling those elements back into components like a search block or a news item. The components are then used in various configurations to standardize templates which are then iterated as pages to the end user.
The benefits of component-based design
With collaborative, up-front planning, a clear pathway is laid out for designers, developers and content creators. Making clear the goals and deliverables of the website build. Patterns and templates are established to remove the guesswork during the development process. Much of the back and forth conversation that may have happened previously is greatly reduced or eliminated. Now all parties have a toolkit to work with to make the process more agile and make changes efficiently. No need to go back to the drawing board. New ideas can be quickly iterated and deployed. Modifications can be made to existing components without having to redesign from scratch. Early testing of layout and user interactions benefits from this methodology, as it allows the entire team to discover problem areas early on and address them well before anything is deployed.
How do I implement component-based design into our web process?
Most likely, you’re already doing it and may not realize it. But if you’re not, start small. Don’t try to overhaul your web development process overnight. Take a smaller website build and use it as a launch pad to start incorporating component-based design into your process. Take the pieces of the website and write them down on sticky notes so you can move them around to mix and match them as components are fleshed out. As you get more comfortable with this approach, you can start to investigate tools like Pattern Lab or Style Prototype, which help formalize the process and move you beyond sticky notes. Although, I still enjoy the sticky note approach.
Going through this exercise will get everyone seeing the larger picture sooner and keep everyone on the same page. If all goes well, your development to launch process will be more streamlined and efficient—which in turn is good for everyone.
1 Frost, Brad. “Atomic Design” bradfrost.com. Web. 13 June. 2013.
