It has been a while since we’ve taken stock of all the beautiful websites out there. Here’s our favorites from the past couple of weeks!
Fuzzco
Who says the web should scroll in one direction? Not the creative agency Fuzzco which on their homepage lets you navigate the page in a very interesting way and this compliments the visual design, too:
Tuna
Tuna is a specimen for the typeface of the same name by Felix Braden and Alex Rütten. This serif is designed specifically for on-screen reading and so it looks beautiful even at small sizes:
Web Field Manual
The Web Field Manual is a collection of articles about UX, UI and all-round general web design advice:
But one of my favorite parts of this site is all the teeny tiny and subtle animations that you might miss if you happen to rush through it. Here’s one example where the title will animate upwards on load (I especially like the background triangles that animate in, too):
New Acton
I’m not entirely sure what this website for New Acton is advertising (is it like a mall? Or an art space or something?) but either way the website is undeniably beautiful with illustrations that break up and shiver as you hover the cursor over them:
Bumpers
Bumpers is an app that lets you record audio and the website is pretty darn snazzy; there’s lots of inline SVG and peculiar full-screen illustrations to look at here.
MailChimp’s 2016 Annual Report
A while back MailChimp made a beautiful annual report with statistics about what the company has been up to over the past twelve months. What really stands out here are the animations and illustrations which perfectly compliment the humour and wit in the writing:
OK, so that’s it until next time! Oh and make sure to add a comment below if there’s any delightful websites that you think we should take a look at.
I really enjoy these websites we like section. It’s a great place to keep up with recent trends and get some inspiration.
Very inspirational just loved it
A great selection again.
New Acton is a newly developed swanky area of Canberra, Australia. Lots of restaurants and boutique shopping, I believe.
My comment? Show me how to do the svg thing like on https://bumpers.fm/ Remember, CSS-Tricks used to have such jagged edge svg layer at the header and footer before? Could you walk us through how to make such responsive svg backgrounds, even animating them? Thanks.
I don’t really understand the concept of fuzzco (i cannot scroll by myself), anyway.
I suggest the case of http://www.calendar.live
I like the material effect when you click on 2018, there is a little explosion in css i guess. can someone explain how it works (::before ::after or javascript) ?
It seems to be the HTML element with id “fxNovak” (almost at the end of the DOM, just before the footer). Mostly it is CSS – JS adjusts the positioning and adds/removes the class with the CSS animation.
Click on the blue monster that runs across the page on the Fuzzco for a fun time. Really cool easter egg!