Aug 1, 2021
Using boilerplates to speed up product UI development (with open sourced templates)
UI design and front-end development is to product design what building engineering and architectural design is to houses & buildings.
One focuses on the nut and bolts of executing a solution the other focuses on the human problem to be solved and how best to solve it.
As a designer and developer, working across the various parts of early stage products, I have to wear different hats with different priorities, methods and tools. It can be challenging because it requires significant mental energy, but also rewarding when you launch new products to customers.
After completing several projects, I’ve discovered ways to optimise my workflow, a favourites is using boilerplates at the beginning of projects.
Creating a boilerplate requires some extra effort, but the advantages easily outweighs the effort. With a boilerplate you get:
- Time savings: you won’t spend precious time doing repetitive work. Instead you begin solving the unique problem quicker.
- Quality: because the boilerplate acts as a foundation and scaffold that you build upon, it creates standards for the output. Ideally, your boilerplate should be battle tested and have best practices baked in which you can efficiently port between projects.
A few things to bear in mind:
Different projects come with their own constraints, so a boilerplate that’s excellent for one project might not work well for another or can even create a few problems in another.
One way I’ve solved this is to create the boilerplates to be flexible, so that I can easily remove things I don’t need or add others as I need them on a project by project basis. If the changes occur often enough, I create a new boilerplate!
Bonus (personal boilerplates)
The Notion file will be updated as I add to it, so you can bookmark it and check back regularly. The contents are:
- React (SPA): packages react-router for routing, chakra UI for themeable UI components, redux, create-react-app.
- React (Static website): next.js, server side rendering, chakra UI for themeable UI.
- UI design (Figma): accessibility, information architecture, component library, common web & mobile pages.
