{"id":242391,"date":"2016-06-05T08:25:50","date_gmt":"2016-06-05T15:25:50","guid":{"rendered":"http:\/\/css-tricks.com\/?p=242391"},"modified":"2016-06-05T08:26:25","modified_gmt":"2016-06-05T15:26:25","slug":"websites-we-like-june-2016","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/websites-we-like-june-2016\/","title":{"rendered":"Websites We Like: June 2016"},"content":{"rendered":"

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\u2019ll 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.<\/p>\n

This is entirely subjective and not a competition. Let\u2019s begin!<\/p>\n

<\/p>\n

An Interesting Day<\/h3>\n

An Interesting Day<\/a> is a one-day conference held in Norway later this year, and the marketing website for the event was designed and developed by Bakken & B\u00e6ck<\/a>.<\/p>\n

\"\"<\/a><\/figure>\n

What I find interesting here is the contrast between type and layout. Unlike a great number of websites<\/a>, 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\u2019s no mean feat.<\/p>\n

I’m also attracted to the design because of the unfamiliar mix between Atlas Grotesk<\/a> and Larish Neue<\/a>.<\/p>\n

Charlie Rose<\/h3>\n

In the rebranding of Charlie Rose\u2019s talk show<\/a>, the typeface really steals the show again. Instead of going with a safe and popular webfont, the designers at Pentagram<\/a> decided to digitize a type family called Schmalfette, I think it works perfectly.<\/p>\n

\"\"<\/a><\/figure>\n

It\u2019s bold and dashing and it certainly doesn\u2019t look like any other talk show website.<\/p>\n

The website uses a Flash of Invisible Text<\/a> method to deliver the web fonts. Sometimes, if a designer picks a typeface that is more condensed than the fallback system fonts you\u2019ll 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.<\/p>\n

\"\"<\/figure>\n

You can read more about this project on Jessica Svendsen\u2019s website<\/a> or see more examples of the typeface Schmalfette in the wild<\/a>.<\/p>\n

Persona<\/h3>\n

Finally, I wanted to take a quick look at Persona<\/a>, a publishing platform from the team at Cargo<\/a>. This is because it uses scroll events and interactive image effects in a really interesting way. Take the homepage of the project:<\/p>\n

\"\"<\/a><\/figure>\n

It\u2019s difficult to describe what\u2019s going on, so you\u2019ll have to experiment yourself, but effectively as you scroll down the background image stretches at the same time. It\u2019s like you\u2019re manipulating a surface beneath the text and it\u2019s quite surprising just how smooth that effect is in practice. <\/p>\n

Another really interesting effect is made on this demo<\/a> template where an image is broken up like a shattered mirror and as you move the mouse the fragments realign themselves:<\/p>\n

\"\"<\/figure>\n

What\u2019s your pick?<\/h3>\n

Feel free to drop links to excellent websites you’ve stumbled across recently in the comments, we’d love to see!<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2019ll 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 […]<\/p>\n","protected":false},"author":223806,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[752],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242391"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=242391"}],"version-history":[{"count":25,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242391\/revisions"}],"predecessor-version":[{"id":242505,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242391\/revisions\/242505"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=242391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=242391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=242391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}