Tagged “inspiration”

Two lovely new websites (or website updates) appeared on my radar this last week that I wanted to note here for future front-end inspiration.

Vitaly Friedman’s Smart Interface Patterns has had some lovely animation and component work from Clearleft alumni Cassie Evans and Trys Mudford. Given Vitaly’s obsession with creating accessible, user-friendly components and the collaborators he has on board, I expect this site to be choc-full of well crafted nuggets for reference! It looks ace, too.

I noted a while ago that the W3C had a new Design System, and now the W3C has a new website in beta too. I imagine it might use components from that Design System alongside other carefully-considered patterns of markup, style and behaviour.

Nice job on these sites, to all concerned!

Here’s a nice demo page for Source Serif 4 which illustrates its versatility.

Source Serif is an open-source typeface for setting text in many sizes, weights, and languages. The design of Source Serif represents a contemporary interpretation of the transitional typefaces of Pierre-Simon Fournier. Additionally, Source Serif has been conceived as a friendly companion to Paul D. Hunt’s Source Sans.

Back when I first started using Source Sans Pro for text for my personal website, I tried pairing it with Source Serif for headings. It didn’t quite work for me then but the typeface seems to have undergone some changes in the interim and also now comes with a variable font option. I might give it another spin.

Definite “personal website goals” here in Robb’s beautiful online portfolio and blog.

From interaction design to scaleable design systems, single-page apps to something more experimental with WebGL. I help awesome people to build ambitious yet accessible web projects - the wilder, the better.

Robb combines beautiful typography and colours with fun and smooth animation… and the words ain’t half bad, either.

Inspirational work!

A fantastic so-called “Scroll Story” from Robin Rendle. In his own words it’s “an elaborate blog post where I rant about a thing” however given the beautiful typography, layout and illustrations on show I think he’s selling it a little short!

The content of this “story” is pretty interesting – Robin laments the fact that web authors often need newsletters, or to “spam social media” in order to publicise articles on their websites, because most people don’t use RSS (awareness is too low and barriers to entry too great).

However it’s the story’s design and technical implementation which really caught my eye.

Robin does some really cool stuff with the CSS scroll-snap-type property and also explains some steps he had to take to tame differing implementations of height:100vh across browsers.

I’m Jack McDade and I’m tired of boring websites.

So many fun touches in the design for Jack’s personal website! It gave me plenty of chuckles while browsing over the weekend.

My favourite bits were the “Email Deposit Box” on the Radical Design Course section (make sure to have sound turned on) and the entire Design Work page (keep scrolling)!

Here’s a beautiful, magazine style website design for digital publication Bustle. The typography, use of whitespace, responsive layout, menu pattern, colour palette and imagery are all on point!

I love Cassie Evans’s new website design! It’s so full of personality while loaded with technical goodies too. Amazing work!

(via @stugoo)

Some simple but inspiring work here from Seattle-based web developer Katherine Kato. I really like the use of space, the typography, the colour palette and the use of CSS grid for layout.

Over 8,400 NASA Apollo moon mission photos, online, in high-resolution.

Bram Stein, a software architect at Adobe, wrote the book on Webfonts, so it’s no surprise that his own website showcases some pretty beautiful typography.

Type is set in Expo Serif Pro, Expo Sans Pro and Source Code Pro.

I was introduced to this smile-inducing website by Val Head’s An Event Apart Talk “Building more expressive projects”.

TunnelBear describes itself as “A more secure way to browse the web” and it does this by encrypting your internet connection to keep your online activity private on any network.

More interestingly to me, it succeeds at making a techy subject friendly by the use of illustrated and animated bears. And who doesn’t like bears?