Exemplary Examples: Long Scroll Websites
With the web supported on more devices than ever, and the not-so-surprising prediction that more devices of varying screen sizes and levels of interactivity are still to come, certain design trends have developed anew, while others have come back with a vengeance. What many attribute to the ubiquity of mobile web browsing, the long scroll site is one such trend whose grownup self we welcome back with open arms. Not so long ago, long scroll sites were common, but they were often overloaded with grids of content that had little to no organizational logic. Today, the breath of fresh air that is the modern long scroll website, has led to new navigational structures, greater web-based storytelling, and never before anticipated multi-device interactions. While there is no shortage of long scroll websites that do it right, here are some of the sites that have caught my eye and why:
A Luxury Travel Agency
A Legible Typeface
Graphic Designer Julia Krysanova has done a beautiful job of using a simple, but elegant long scroll site to promote and showcase her first retail type family, Flandria. With a sort of nasally mouthfeel, Flandria is actually quite an elegant typeface, designed for improved readability in print applications. The site does a fantastic job of leveraging the web, a digital medium, to showcase a typeface designed for different print applications as the user scrolls down the site. It even allows users to sample the typeface for themselves in an elegant in-browser text editor, giving users the ability to change type size and tracing. The initial loading screen is really disjointed from the actual site experience, so it would be great to see it either integrated more into the look and feel or removed altogether.
A Smart Cup
Long scroll has become a popular design trend for introducing new products to market, as it affords a linear narrative that keeps the users attention and doesn’t force a call to action until the user is fully informed and ready to act. Vessyl is a great example of this, informing users through video and subtle animations as a user scrolls down the site. The products functionality is presented in an eye-catching and easy to digest manner, with each content block focusing on a specific feature of the product. I experienced some delay as I moved through some of the more animation-heavy parts of the scroll, which should really be mended as it gets in the way of what is otherwise a seamless sales pitch.
The Apple of Prefab Homes
One of my favorite sites for showcasing long scroll done right, Bluhomes, or what Forbes called “The Apple of homes,” has done a phenomenal job of using long scroll in a dynamic and refreshing way. Beautiful imagery, digestible infographics, and subtle GIFs blend together seamlessly in a way that really complements the content rather than diluting or overpowering it. The homepage provides a wonderful summation of what BluHomes does, and serves as a more organic navigation alternative than the primary dropdown nav in the sites header. I found the ‘Our Homes’ carousel display on the homepage a bit glitchy, and definitely think it should be revisited, but the home detail pages are a site to be seen (no pun intended).
Dude, Can I Tell You My Dream?
Long scroll sites can sometimes feel like a never ending plunge into the abyss, especially when content appears generic, irrelevant, or just plain boring. The Shadow app site, an iOS app built to help people remember their dreams, has done a great job of adding a hybrid sidebar navigation/progress bar that you can click on to navigate to different sections of the scroll, while letting the user know how far they’ve come along their journey. A clean request invite form is presented above the fold for users who may already know about the app and just want an early invite to try it out, and just the right amount of information about the app and the team behind it is presented as a user scrolls down the site. I would definitely advise a more consistent photography style for the team portraits section, but I can’t say that prevented me from signing up.
Wow, Fracking Sucks.
The Dangers of Fracking
I H8 That I Don't Have A Pair
H8 Wireless Headset
While I can’t speak for the headphones themselves, the site built to promote them is really well done. The multi-sensory approach they’ve taken, integrating sound and video with the visual design, gives the user a sense of what to expect from these headphones. The experience combines moments of silence with moments of energetic sound, communicating both the superior sound quality and noise-canceling ability of B&O newest wireless headset. But my favorite part is the six-up video display triggered by hovering which shows off the touch gestures used to control these headphones. I must say, I’ve never been a big fan of B&O, but now they’ve got my attention.
I ♡ Spotify #2014
One of my favorite sites of the year, Spotify’s 2014 year in review is certainly something worth spending hours exploring. I sure did. The content is really well curated, leveraging the data they’ve collect from their users to categorize this year’s listening trends, from 2014’s songs of the seasons, to the most popular throwbacks of the year. I was particularly drawn to the top tracks by country section, which shows the most popular track in every country where Spotify is currently available. The one thing I hope they’ll explore in next year’s review, is integrating sound more seamlessly into the mix, because after all, it’s kind of what they do.
Can You Nod Me That?
Okay, so the product itself looks really cool, but I have to applaud how they’ve chosen to showcase what I hope will be a revolutionary product in the realm of interaction design. The use of seamlessly integrated video and subtle animation, gives the user a sense of the interactions this futuristic product supports with existing products, while encouraging users to imagine what’s possible once they gain greater adoption from future technologies. Soon enough we’ll be nodding through their site.
My Big Fat Data Lesson
A Day in Big Data
We all know Big Data’s a hot topic, has been for a few years now, but many still don’t really know what it is. Ogilvy One, O&M’s CX arm, took it upon themselves to sum it up in their award-winning, single page deep scroll site. Using bold typography, iconography, and statistics, they’ve managed to break down a complex topic into small, digestible nuggets, showing who’s using Big Data and to what end. It’s a real testament to the increased potential for using the web as a relatively lightweight presentation platform, particularly as websites become easier to create and manage. While your at it, I’d also recommend taking a look at the the day in the life of big data video at the top of the page. It’s a bit cheesy, but a pretty realistic showcase of where big data could take us.