Uninspired by 2020, travel back to the Nineties
The nineties brought some positive vibes during the pandemic.
The biggest value that the Projekt19 vision is bringing is the amount of learning and people I’m meeting.
Since launching the vision, it’s been great reconnecting with old and new twitter friends. One thing I have noticed is how helpful everyone seems to be! Content and sharing is so transparent and everyone is truly trying to build together.
The internet is huge but the sense of community is everywhere! Indiehackers, sub stack and the webflow community.
Twitter, a platform that industry experts said would fail. It couldn’t be further from the truth - Twitter is alive! No different then it was when I used it 8 years ago! It’s been a great source of content and connection!
Riding the noCode bandwagon
Building Projekt19 on webflow was a quick intro into the nocode platform. Let’s be honest - the site isn’t anything special, it’s a simple landing page with a fun design!
I wanted to continue learning webflow and it's CMS. Introduce myself to automations and integrations.
Projekt19 2/19
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!
I swear I won’t make everything look like it’s from an episode of Saved By the Bell!
My goal with this site was to use nocode, a simple data source and an automation integration.
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!