Generative UI Prototype #2

Teisanu Tudor
2 min readApr 10, 2020

As stated in my initial goal, I focused on buttons first. The simplest, most basic functionality was to generate a bunch buttons by feeding the software a few basic parameters. I started with: paddings and background shape. I picked background shape for the sake of curiosity.

Now, before diving into tools, I wanted to make sure I got the algorithm right. Initial questions:

  • What’s the input type ? Would people enter a range ? Would they select from a given range ?
  • Do I go for padding left,right, top bottom, or horizontal and vertical?
  • How would the programme go through all combinations ?

I decided to start with padding horizontal and vertical-this fits with the standard used by most buttons out there. Then, these would be entered as min and max values, forming a range. This way I’d maximize the amount of alternatives. Now, each value in the range must be linked to a value in the other range to form all possible combinations. I do want to avoid duplicate ones though.

User input fields on the left for mix and max values, ranges formed by those in the middle and btn combinations in the right
User input on the left, ranges and combos formed by computer on right and middle

To make sure the number of alternatives is mathematically correct, I went back to middle school math; permutations, combinations and factorial numbers. Having those in place, it was time to build something.

Three pieces of paper filled with notes and digits forming padding combinations

--

--