We have a new thing we’d like to try! We’re going to round up some websites that we like and share them with you. We’ll take a look at the weird and peculiar, the shocking and downright odd; websites that spark our interest and make us double-take. We might choose a website for a number of reasons, such as in the use of a particular technical feature, or it might be a website that stands out from the crowd because of its typography.
This is entirely subjective and not a competition. Let’s begin!
What I find interesting here is the contrast between type and layout. Unlike a great number of websites, the layout compliments the background illustration and vice versa; the eye is naturally drawn from one eye-popping graphic to the next. It would be so very easy here for the illustration to conflict with the text and yet thankfully everything works on mobile sizes just as effectively as large desktop displays, too. That’s no mean feat.
In the rebranding of Charlie Rose’s talk show, the typeface really steals the show again. Instead of going with a safe and popular webfont, the designers at Pentagram decided to digitize a type family called Schmalfette, I think it works perfectly.
It’s bold and dashing and it certainly doesn’t look like any other talk show website.
The website uses a Flash of Invisible Text method to deliver the web fonts. Sometimes, if a designer picks a typeface that is more condensed than the fallback system fonts you’ll get a horrible judder to the screen as the thin web font replaces the much wider system font. So perhaps in testing the designers believed that reducing this flash between fonts was more important than showing the text as quickly as possible.
Finally, I wanted to take a quick look at Persona, a publishing platform from the team at Cargo. This is because it uses scroll events and interactive image effects in a really interesting way. Take the homepage of the project:
It’s difficult to describe what’s going on, so you’ll have to experiment yourself, but effectively as you scroll down the background image stretches at the same time. It’s like you’re manipulating a surface beneath the text and it’s quite surprising just how smooth that effect is in practice.
Another really interesting effect is made on this demo template where an image is broken up like a shattered mirror and as you move the mouse the fragments realign themselves:
Feel free to drop links to excellent websites you’ve stumbled across recently in the comments, we’d love to see!