January 18, 2022

Parametric Design

edit

This will be short and to the point. Yesterday, I tweaked the button styles on my blog. At the time I’m writing this, the buttons have multiple box shadows to create what I hope is an interesting effect. In the process of getting the shadows “correct”, I employed “parametric design”. I believe parametric design is a valuable concept for developers to know and apply, and I want to make sure it’s a part of your vocabulary.

Parametric design is the process of using adjustable parameters to modify and influence a design. In other words, we turn the values and relationships between values into functions. Then, we wire up inputs to pass new arguments to them to get immediate feedback on the outcome.

It can be very simple, like choosing a color:

Or perhaps the width and height of an item:

To something more complex, like generative art:

Parametric design is the foundation of so many dev and design tools that it’s incredibly likely you’ve encountered it without even knowing it. Wiring up inputs to provide immediate feedback can be a very satisfying way to experiment and solve problems.

It’s also a wonderful tool for non-coders. Good inputs can be a way of empowering them to solve their own problems.

Parametric design is fundamentally about exploring. Next time you’re building something and you’re not quite sure what it should be, consider wiring up some inputs and see what happens.


Liked the post?
Give the author a dopamine boost with a few "beard strokes". Click the beard up to 50 times to show your appreciation.
Need help with your software problems?

My team and I are ready to help you. Hire Agathist to build your next great project or to improve one of your existing ones.

Get in touch
Kyle Shevlin's face, which is mostly a beard with eyes

Kyle Shevlin is the founder & lead software engineer of Agathist, a software development firm with a mission to build good software with good people.

Agathist
Good software by good people.
Visit https://agath.ist to learn more
Sign up for my newsletter
Let's chat some more about TypeScript, React, and frontend web development. Unsubscribe at any time.
Logo for Array.reduce()
Array.reduce()
Check out my courses!
If you enjoy my posts, you might enjoy my courses, too. Click the button to view the course or go to Courses for more information.