Example of Generative Element

Generative Design for Software Elements

I had a slightly convoluted educational pathway into UX/Interaction/Product design. Computer Eng > Mechanical Eng+Tech Comm > Masters in Architecture > F*** that field lets try UX > Love!

But throughout those different jumps I coded. Java, Matlab, C++ for CpE and ME, Python/Processing art-code for Architecture, and then proper web programming (HTML/SCSS/Javascript etc.) for UX.

The thing I kept throughout these was the potential that you can get from code for artistic purposes. Add in some basic randomness (which is its own fun trail to look down, the myriad of ways something can be random), or have visual/spatial elements that change based on various input parameters (what time it is, where the sun is, the temperature, people in the room, whatever you want) and suddenly you’re getting art pieces that are unique every single time.

Most of the time these things end up in ‘art’, visual pieces that while interesting don’t serve an interactive purpose (definitely still a good thing but I’m trying to compare ‘art’ to ‘interactive visuals’.

Example, the above image is fun/interesting and basically randomly generates an animated svg based on some inputs from Jade and SCSS. But its generally not useful. As artwork or something to hang on the wall yes, but you’d never use it as a background on a site.

https://codepen.io/mhsenkow/pen/GNBjzE
https://codepen.io/mhsenkow/pen/GNBjzE

The principals behind it though can work into actually useful UI elements. The above rectangles were proposals for SVG header elements in cards on some product I was working on at IBM.

The visual designers created static versions of the images in illustrator and made 4–5 variations that would be used over and over again.

BUT they’re svg’s. What your’e looking at is:

doctype html
div(
 class=’container’
 )
 svg( 
 class=’stripes’)
 — var size = 21
 — for (var a = 1; a < size; a++)
 — for (var b = 1; b < size / 3; b++)
 rect(id=’rect’ + (a * b) x=a * 20–20 y=20 * b -20 width=20 height=20)

(If I use JADE instead of the base svg to generate the final result.)

And through the classes/structure you’re creating in the svg you can apply SCSS elements:

@for $i from 0 through 1000 {
 #rect#{$i} {
 $filler:random(255);
 @if $filler < 100 {
 fill: rgba(random(255),$i,$i,0);
 } @else {
 fill: rgba(random(255),$i,$i,1);
 animation: change-size 1s cubic-bezier(0.95, 0.05, 0.795, 0.035) calc(#{$i}s*0.01) infinite alternate;
 }
 }
}

So …rather than 5 header elements that are static each time you load the page, you could just as readily have 100 or 1000 variations, randomly generated each time you load the page (and also I believe being a smaller file size since its just a few lines of text instead of any stored image.

Why would you do this? 
A. Its simply just more visually stimulating
B. UX wise it leaves the user feeling like the page is alive and dynamic. Sure they’re coming here to look at a file set. But as long as your randomness isn’t SO different as to confuse the user, but just subtle and not too chaotic, it will leave them feeling like the page is active, something that is being looked after. 
C. And a little bit, because you can. Why not create a dynamic, interactive page instead of a static dead one?

(Draft version, going to flesh this out more in the future).

Like what you read? Give Michael Senkow a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.