Well? What are you waiting for?

The “What Should I Design?” Generator

Chantal Jandard
2 min readFeb 1, 2015

--

Meet WhatShouldIDesign.com, a random design prompt generator to practice your prototyping and stretch your brain muscles.

“Creativity is just connecting things.” –Steve Jobs

What it is

Basically, a pre-filled Mad Libs. You’re given a purpose or function, a target audience and some user information. From there, you’re free! Sketch it, ponder it, write a seventeen page specification document—whatever gets your brain going. I can almost promise what you’ll be asked to create is either something tailor-made for the likes of Lady Gaga or the recipe for a hot mess. Either way, it’ll be a good time.

What it isn’t

No strives for a realistic problem-definition experience were made. With the generator, you begin with a defined solution instead of a problem. You’ll have to speculate all on your own what sort of situation demanded a “Starbucks-locating tablet app for rap artists with streaks of narcissism” as its solution.

Some useful applications

  • Team building, with everyone designing the same silliness and sharing their monstrosities afterwards
  • Wake-up exercise. Coffee is unnecessary when there’s nonsense on hand.
  • Start-up inspiration. Consider giving me a cut if it works out?
  • Subject matter for a Design-a-Day blog or the like.

Method

I built arrays with lists of options for each category of word.

var theThing = [ "website", "tablet app", "website", ... ];

Next, I added a random number generator and snuck the results into my <span>’s, with considerations for grammatical things such as “an” vs. “a”.

$('span#1theThing').html(theThing[Math.floor(Math.random() * theThing.length)]);

I also used an array and random generator to determine the colour scheme of the page upon load. I didn’t want to restrict the page to any particular scheme, since colour has such a strong effect to our interpretations of words and connection-making.

var colourPicker = rainbow[Math.floor(Math.random() * rainbow.length)];
$('a:link').css('color', colourPicker);

Then played with FlowType.JS and some media queries to quickly add some semblance of mobile support, although more love is needed in that area.

That’s it!

Enjoy, and maybe throw some feedback over the fence?

--

--

Chantal Jandard

Product designer at PlanGrid. The pixel is mightier than the sword.