Open Design Tools

Brief

Inspired by the popular graphic by @XdanielArt on Twitter, I wanted to take what they had made and make it into something even more helpful.

When I wanted to check out some new tool, I would find myself looking through my phone to find the image of the graphic I saved, reading through it, and finally opening a browser to search the names of the apps. So, why not just convert this into a web page with search functionality?

Process

I started by getting the basic html and css framework in place and looking how I wanted. Then I went through every item on the original graphic to make sure they were still available and if anything had changed. Turns out a lot of the tools had switched to subscription models, go figure. To make this step easier, I created an html form I could fill out and that would output a json formatted object.I included things like tags to hopefully make the search better down the road.

After going through all the items I compiled all the json objects into one large array. Then I created a javascript "factory" to go through each item, sort them into their respective buckets, and generate the appropriate html. Since I plan on updating this manually as I go, or with the help of user submissions (not functional yet), this seemed fine for now.

Getting the search to work was fairly straightforward. I thought about using something like fuse.js but opted just to write vanilla js. I also created a function to parse down the information for each item for only those that would be applicable to search. That way the file to download/search through was as small as could be.

Last was finishing up all the responsive aspects and making sure it all worked! I'm pretty happy with how it turned out but as I mentioned earlier, I want to set up a system where people can submit edits/new alternatives that I can review and then update myself. But unfortunately that has to wait for now!