Future 52’s design process was a direct response to the flaws and missteps of its predecessor, Raygun 52.
Raygun 52 was hacked together using an unholy array of limited HTML/CSS knowledge, Squarespace’s customization options, and pre-built templates. The end result is, at best, serviceable. The top navigation is cluttered with five links; The Armory, Initiative Information, Contributors, Gallery, FAQ, and a link to my portfolio. Aside from unclear names like The Armory (instead of Blog) and Initiative Information (instead of About), the FAQ should have been lumped with the About section, and, looking back, including an external link to my website is just tacky. The project was about the 52 artists and putting my website at the top made it about me. Additionally, why the hell are the illustrations so small? Why are there two taglines? And why does every post have weird links underneath?
Recognizing that most of the elements on Raygun 52 were noise, I decided this time around the illustrations were going to be the most important element and everything else would serve that guiding principle. Nothing should distract viewers from the work these 52 artists are so generously donating their time to create. With that in mind, the entire process became one of reduction.
The starting point was having each illustration span the entire width of the page, scaling appropriately. This would ensure that, at any time, a majority of the visitor’s browser window would be occupied by an illustration. However, large illustrations can still be undermined by smaller, visually dense surrounding elements. To combat this, I scrapped the heavy black treatment of Raygun 52’s logo in favor of a lightweight Future 52 wordmark that is free of ornamentation.
Beneath the header logo sits three links: Blog, Contributors, and About. There was originally a fourth link, Gallery, but I decided to fold this into the contributors page. This helped simplify the navigation and, on the page itself, create a direct link between the illustrator and their piece. The artist’s name links to their portfolio, while the thumbnail links to their Future 52 post.
The text accompanying each post is equally restrained. The left column is devoted to the post number, item category, and artist info. The right displays the object’s name (provided by the illustrator) and a blurb from Bishop (provided by Bishop in 2297).
Beneath the post’s information is the information pertinent to tumblr, which Rogie and I were happy to utilize in building Future 52. While Raygun 52 was built on Squarespace, I went on to host my own blog with tumblr, which I have grown to love. Tumblr features a solid social layer, but follower counts are hidden and notes don’t need to be attached to posts. After discussing it for a bit, Rogie and I decided to omit tumblr’s note count from each post as, again, the primary focus is the work, and we didn’t want people being distracted by superficial numbers.
Of course, Future 52 would not exist in its current state without the help of Rogie King. Rogie took my static design mock ups and made them come alive, and for that, Future 52, Bishop, and I are very much in his debt. Throughout the development, his questioning challenged me to consider the decisions I had made and the site is better for it.
I’m very proud of the framework we’ve built for Future 52 and hope you all enjoy it over the next year and for many years after.
By Alex Griendling / Blog / Twitter