Using boilerplates to speed up product UI development (with open sourced templates)

Product UI/UX Design Boilerplate

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:

  1. Time savings: you won’t spend precious time doing repetitive work. Instead you begin solving the unique problem quicker.

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:

  1. React (SPA): packages react-router for routing, chakra UI for themeable UI components, redux, create-react-app.

References

--

--

Product design freestyles and commentary on being a creator. odafe41.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store