Inspiration is so important in the world of design. To be able to see what someone has done and for it to get your juices flowing is a great feeling. For both designers and developers in the studio, we all come across fresh pieces of work on a daily basis which can not only influence our future work, but also make us strive to push the boundaries of digital design and development in order to be at the top of our field.
Anything that I come across which excites me, I always bookmark for future reference. But why keep these gems for myself?!
So below are a few projects I have come across this month which have really me tick.
Reinventing the navigation wheel is pretty tough these days, but Wove have done just that, quite literally!
Taking inspiration possibly from the endless loop design of their product, the navigation of this site works by rotating a wheel-of-fortune-esque structure. This works well on desktop via relating the rotation of the nav to the ‘y’ position of the mouse. Where this nav comes into its own though is on mobile. The flow and direction of scrolling through this menu fits perfectly to the reach of your thumb across the screen.
Another cheeky feature on this site is the illusion of the next slide fading in from the circle that appears when you click on the screen.
Boootiful type across the site too if I do say so myself!
Anyone that knows me will know I’m the awkward one that always asks for a G&T when everyone else is getting a pint. So this site intrigued me simply by its content alone. But then when actually viewing it, the combination of the traditional illustrations and the clean type took this project to the next level. It may seem to be ‘just another App Promotion site’, but the animations that transition between each slide, and the fixed step-by-step in-situ guide make this a winner for me.
I’m never usually a fan of sites which feature sound - pretty sure I’m not alone on this one, but this unique 3D canvas equaliser that reacts to Ben Lukas Boysens make it worth while.
The subtle glitches of the headers are a great touch too, creating a relationship between themselves and the digital music art which he produces. As a developer I was intrigued as to how they did this, and was pleased to see it was being done solely in CSS. Kudos to them and their use of :before’s and :afters’s!
Another thing I'm a sucker for is rich, experimental visuals, and the site to promote the Cryptaris Mission is just that. With strong use of canvas, webgl and video material, they have created an environment which reacts to the users perspective, giving a 3D illusion, and similarly to the Ben Lukas Boysen project, they have created glitchy, imperfect typography and hover states which add to the dramatic experience that is created for the user.
A final shoutout for this month goes to Acme and their crazy-awesome strict grid use and typography masking animations. I am a sucker for designs that keep the grid lines in, just so you can see how perfectly positioned the content is, and this site falls right into this category.
The animation of the headings transitioning between the page slides is something I’ve never seen before too. The hover-states across all buttons and links are fantastic, especially the ‘Learn More’ call-to-actions. Mmmmm, nice!
I'm Tom, a Web Developer at Shape - when I'm not making slick Craft CMS websites, I'm usually eating Peanut Butter or riding my bike.