Designing from the pixel up — A quick intro to atomic design
When asked, I’d wager that most designers pine for a blank slate working environment — the opportunity to define their own processes, style-guides and grid systems.
Why? As companies scale, legacy practices have a habit of bogging down the creative process, leaving inspiration at the front door. This is especially the case in a startup environment, where end product can often be prioritised over scaling the building blocks of designs and engineering architecture.
With Upgrade Pack hiring a designer from day one, it was a fantastic opportunity for us to prevent this from happening, defining scalable practices that should help onboard new designers quickly, enable developers to rapidly prototype, and allow the wider team to work with a defined guide on their presentations or external design work.
Enter Atomic Design.
Put simply, Atomic Design is the process of splitting up your design interfaces into the smallest possible component or module. With this mindset, you can break down then entirety of your application into smaller blocks; in a similar manner to Lego blocks.
With a modular approach to interface and application design, we can rapidly build out our new pages or components by utilising a bank of already existing work; similar to how you can build myriad objects from a single box of Lego blocks.
Practically, this means that our visual designer can pull together new templates in minutes using signed off modules, our UX designer can flesh out her wireframes using pixel perfect, real design components that have been established in the Upgrade Pack design system, whilst our developers access the system in the browser and can be sure that their code is as close to our design files as possible.
With the back and forth of design sign-off kept to a minimum, everyone’s a winner!
As well as speed, and given the independent nature of each design element, we’re not tied to device dimensions (a mobile phone or laptop screen) or platform (mobile app, or website dashboard) — the work we produce is cross functional and responsive from the outset. As the Upgrade Pack design system scales, we will be building on these simple principles to enable a rapid, but reliable, build process to occur for any new features that we roll out. This will enable a quick to market build process, making both us and our customers happy.
Here’s to modular!
Thank you, and see you next time,
Luis from the UP Design team.
• A beginner’s guide to black on white colour accessibility
• Redesigning the Upgrade Pack Website and Extending Our Brand
• Introducing .pixel — Our behind the scenes look at product and technology at Upgrade Pack
Originally published at https://www.upgradepack.com.
