Once in a while, I’m shown a design work that is so mind blowing, it reminds me exactly why I LOVE what I do so much. The website for a Toronto-based digital creative agency, Playground — with its clean minimalistic, geometric style, and little flourishes of personality — did exactly that to me earlier this week. Not only is the design beautiful, but the interactive elements on the home page and in the case studies section (they include their CODE trials on these pages — that makes so much sense, why haven’t I seen that before?!) pushed it from “nice” to “really impressive” to “OH MY GOD THATS SO FUCKING COOL!” <— I really said that.
I REALLY appreciate the attention to detail, such as on the home page’s .svg animations. Slight wiggles on some elements were wonderful :) and they even consider hair movements in relation to physical character movement.
My FAVORITE part of the experience, however, is the color change on reload of the web page. Playground’s website color scheme is greyscale with one accent chosen from 5 possible brand colors (blue, cyan, red, green, or orange). This color becomes the link color, is used in hover animations, and even changes the colors incorporated in the animated illustrations that I just mentioned.
Basically: you create an array of colors (you can use any kind of color method — rgba, hex codes, whatever) and then generate a random number with a math function and use that number to correspond to an item in the array. That item in the array of colors is your actual selected color, which you can set to a variable (I called it chosenColor). Once you have the chosenColor variable, you can use it to edit the style properties of any element (or you can add an attribute using it, such as a fill attribute for .svg images). Make sure to call the functions AFTER the page loads so you can find the elements you’ll be referencing.
Reload the page (or click on the u.krave logo fish) and see what color combinations you get!
TL;DR : Playground's website rocks & a demo on how to make yours rock too
P.S. Playground, I LOVE your style and work and website, ANDDD I’m graduating University next year :D (just saying… PLEASEHIREME… )