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?

Here are a few options for what to do next.

Like
Liked the post? Click the beard up to 50 times to show it
Share
Sharing this post on Twitter & elsewhere is a great way to help me out

Newer Post: The Wrapped State Setter Pattern
Tags
JavaScriptReact

Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, React and front end web development.

Let's talk some more about JavaScript, 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.

Array.reduce() Logo
Array.reduce()

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.
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-fiorinimedayzDoNormalFanchGadjonoahmateenbrandonpittman
©2022 Kyle Shevlin. All Rights Reserved.