2 min read
Best Sites of June
A new month can mean one thing…best sites time! And boy do I have some stonkers in the bag this month. So lets get down to business.
We start with a new personal favourite of mine. The typography, layout and particle animations on Trivalent make me wish I designed this. This design is right up my street. Stand out design features have to be the big bold use of Avenir - by far one of the nicest typefaces out there, the a-symetrical tiled navigation and the layout of the content that follows this same a-symmetrical theme. I really wish I had designed this!
A talking point keeps cropping up in the studio around headings and overlapping them over other bits of content. We all agree that it looks great, helping join / relate body content with its heading, and also gives a sense of depth and layering. Clients however seem to think its a mistake! Every time we have included it in a design, it has been shot down. So because of this reason I feel the need to show you all that is it NOT a mistake our designs but is intentionally positioned like that, and we are not the only ones making this ‘mistake’.
Another similar example of overlapping headings in recent designs is on Native Swinson. The introductory animation of the logo creates a looping effect so when the text pushes partially off canvas, it loops back on the left hand side - allowing for a negative space to showcase their beautiful illustrations. This typographic theme is carried out across the whole site. I love the transition between pages on this site too.
Now for something a bit experimental - Printed By Somerset is a one of a kind! This site is basically one big interactive paper-based gif. Everything you click reveals a cheeky stop-motion animation to reveal further information. The highlight being the ‘tear-off’ mobile site at the very bottom of the page. This thing is too cool for school.
We are always on the lookout for fresh and unusual animations to ‘borrow inspiration from’ whether it’s ways of animations the burger icon, the hover and active states of inputs amongst other things. The personal portfolio of Xavier Bourdil caught my eye a few days ago with its fixed side nav. Hovering on a link reveals a snippet of the visual content related to that page. Works a treat. There’s also a rather unusual animation across sections of the text creating an imperfect, glitchy effect. Not for everyone, but definitely for me. He has some lovely work too so go check it out!
Lastly for this month is Plane Site. Please please please go and view this site. It is a beautiful example of parallax animation. They have utilised some serious SVG animations using the CSS Transform tool for all its worth.
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.
