Websites We Like: August 2016
Here are some of the websites we’ve stumbled upon lately that have made us all collectively Oooo and Aaaah with delight. Sometimes we literally type “oooooo” into the Slack channel where we save and discuss these. It’s a fairly new thing we’ve started doing. Enjoy!
The Fine Line
The Fine Line series of articles by the New York Times explores the journey of four Olympic athletes and their extraordinary abilities.
A while back I moaned about the various problems of scrolljacking and now I want to apologize to the scrolljacking community. These articles prove that taking control of the scrolling momentum can feel incredibly intuitive if given the right amount of time and attention.
But what’s most fascinating with these articles, to me at least, is the combination of motion, visuals and sound. Each article has several recordings that are played over the text with accompanying background music and sound effects. This couldn’t have been an easy series of posts to create, as the time it took to plan, design and develop them must’ve been quite considerable.
FiveThirtyEight’s 2016 Election Forecast
FiveThirtyEight is well known for their visualizations and use of data in their coverage, but the latest charts that they’ve begun to use for their election forecast are more subtle and beautiful than ever before:
What impresses me about FiveThirtyEight is the restraint in the design, as there’s a very faint use of color to attract the eye to the important information and the use of the bold weights in their typographic palette encourages quick scanning of the information.
But jumping back to this chart specifically: if you want to learn more information about the data from one state in particular then you can click on the map to shift into a different view for closer analysis:
A Visual Introduction to Machine Learning
This is an essay, designed and written by Stephanie Yee and Tony Chu, which contains a number of beautiful animations and visualizations which are certainly worth scrolling through:
As you scroll further down the page you’ll find the data morph and bend to better work together with the content.
Figma’s 404 page
Figma is a design tool in the browser that lets designers collaborate better with one another and earlier this week I typed the wrong URL and found this lovely gem:
CSS Conf
Over on the new CSS Conf website there’s an interesting use of graphic shapes which I can only describe as “splotches” — SVG elements that overlap content like a transparent PNG might:
I think it’s neat because it’s visually striking and breaks up the monotony of seeing rectangles in every web page all the time.
Michael Ngo
Front-end developer Michael Ngo has a personal site that’s interesting for its use of animation, video and layout.
Each section of his portfolio looks like a custom layout, but taking a closer look under the hood each is made of tiny modules that can be used again and again.
Ohio Certifieds
Ohio Certifieds is a website designed to attract industrial investment in the state. Developers can select a plot of land or search for a plot based on a number of factors: what’s interesting here isn’t necessarily the data but the representation of it however.
Clicking around is really fun. If you select a plot then you’ll find a bevy of animations that direct your eye and give you a better idea of the space that you’re currently navigating.
Meet Graham
Meet Graham is a project, and a real-life model, of what a human being might look like if they were best shaped to survive car crashes. The site showcases the research experiment in order to bring to our attention the risks of driving and in order for us to learn more about the human body:
By viewing Graham in 3D it’s possible to look under the surface of the skin and pinpoint specific areas of the body that would need to be changed.
Try Typography
try.typography.com is a new project by Hoefler & Co. that lets you explore their range of typefaces. Ligatures, capitals, small-caps and stylistic alternates are among some of the options you can toggle and discover in more detail.
Did we miss any of your recent favorites, or what is so interesting about the sites we did show? Do you have a favorite website that we might’ve overlooked? Be sure to add a note in the comments below!
Websites We Like: August 2016 is a post from CSS-Tricks
