Nineties

A random sketch generator inspired by the 90's

No Employees
Founders Code
Solo Founder
Design

In the past year I have been sketching on a daily basis. I love the 90's cartoons! I wanted an archive of all the characters that I know or don't know. This was a fun way to put it all together.

January 2021 Uninspired by 2020, travel back to the Nineties

I’ve been spending a lot of time getting back into sketching! During 2020 it was a nice way to get some quiet time to myself. I started drawing popular characters for my kids and of course they started to show interest. So we started to do it together! I couldn’t help myself but focus most of my sketches on 90’s cartoons. Something about them I love - let’s say nostalgia! I would do a simple image search for cartoons like Darkwing Duck , Space Jam or Rugrats.

We would spend 4-5 hours on a Saturday morning drawing and it became the highlight of my week. I later joined Inktober, a sketch prompt held in October. This was a fun challenge to keep me drawing everyday with Ink - something I never had experience with!

I loved this idea of a random prompt to challenge yourself.

This then became the idea! There are dozens of randomizers, I thought building this in nocode should be easier!

Nineties.io - A simple random sketch prompt giving up 90’s cartoon characters!

Design

If you're going to build something about the 90’s you gotta make it feel like the 90’s. 😉 I love the vibe it gives off - fun, playful, nostalgic! The colours aren’t going to pass any accessible colour contrast grades but man it’s a blast!

Main inspiration was the Saved by the Bell intro obviously

Added a wicked background, then riding the 90’s colour palette with the cyan, magenta and yellow! Selected Bungee for a heavy type-set and then added Kalum for a lighter handwritten font!

With very little work, we have a solid style guide that screams 90’s with those few elements!

A key piece with the 90’s was the abstract and skewed shapes. Webflow makes it super easy to create this effect. It’s coloured divs with borders and drop-shadows skewed! The effect is subtle but makes a big impact on the design.

Data

The next step was to find a decent data source, there are many online animation databases. Within an hour I found a good candidate from Fiverr that could get it done for $50. As expected, the data was messy but had over 5000 characters.

I then filtered between 1990-1999, which gave me around 1000. The data set was a good amount of characters, the only problem was the image URL’s were broken. 👎 I went back to Fiverr to see if we could use the character name and find an image database to get a URL dump of images. There didn’t seem to be an easy way of doing this. The folks on Fiverr said they could do this for $100+ - assuming they would go and grab them. I figured I could spend a few hours and do this myself.

You have to grind a little bit! So that’s what I did!

I went line by line and grabbed images online this actually allowed me to add a little more quality control. I explored some animated gifs and some better profile images. I was able to comb through the data and ended up deleting a few hundred line items.

Within two hours I had 500 characters with images, gifs, and google search urls!

I added a formula to create a dynamic URL

Google image search url + character name + cartoon

The data was now sitting in a google sheet as clean as a whistle! I started exploring possible integrations with Zapier and Integromat. I played around with some tutorials but I reminded myself I didn't need to update again. Since I already have the dump in my sheet I had to export the CSV.

Randomizing

I started with a handful of characters and added them to a CMS collection. I built a character template page with profile image, name and google search url.

The actions were simple - one to get a new character and the other to share on twitter!

A quick search online led me to Ben Parkers Random Generator in Webflow. This helped me understand the bones of how to create a randomizer. In less than 35 minutes I had the CMS items randomly display on trigger! Perfecto!

I thought about stopping here and validating the idea. Then I remembered the purpose was to continue progressing the knowledge of nocode.

Once I had the site working with the 5 test items, I dumped in the csv and mapped to the appropriate fields.

Quick Tip: If you want to map an image in webflow - the URL must end in an image extension i.e. .jpg, .gif etc.

Same goes for URL’s the url has to be somewhat readable for webflow to see it as a link type.

Testing

I sat down with my kids and went through prompts to check for any bugs or errors. We tested on a Chromebook, tablet and my MacBook Pro. This was fun and I was able to introduce the kids to web design and development. My 6 year old loved it when he found an image that was broken!

Share

Quick shout out to the webflow forums for creating a simple way of sharing content.

Like I said at the top, this isn’t a trivial product whatsoever but again another step into learning nocode. I will get to more serious products but for now I'm gonna spend some time sketching!

January 27, 2020 Nineties.io Launched

Officially launched a mini project. Built on webflow using cms collections and some nifty javascript. The site is as simple as it gets, it features 500+ 90's cartoon characters!

Currently it's fully random but looking to create a daily standard - then automate to a social page.

In the past year I have been sketching on a daily basis. I love the 90's cartoons! I wanted an archive of all the characters that I know or don't know. This was a fun way to put it all together.