Kyle Shevlin

Software Engineer
January 18, 2022
0 strokes bestowed

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.


Finished reading?

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

Newer Post: The Wrapped State Setter Pattern
Tags
JavaScriptReact

Are you, or the company you work for, struggling with something mentioned in this article?
Would you benefit from a live training session?
Let's Talk
Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, TypeScript, React and frontend web development.

Let's talk some more about JavaScript, TypeScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Data Structures and Algorithms Logo
Data Structures and Algorithms

Check out my courses!

Liked the post? You might like my courses, too. Click the button to view this course or go to Courses for more information.
View on egghead.io
I would like give thanks to those who have contributed fixes and updates to this blog. If you see something that needs some love, you can join them. This blog is open sourced at https://github.com/kyleshevlin/blog
alexloudenjacobwsmithbryndymentJacobMGEvanseclectic-codingjhsukgcreativeerikvorhesHaroenvmarktnoonandependabotmarcuslyonsbrentmclarkfederico-fiorinimedayzTowardsDeathFanchGadjonoahmateenbrandonpittmanmattridley
©2023 Kyle Shevlin. All Rights Reserved.