Social Media Design: Inspiring Tumblr Designs

By Janine Warner, David LaFontaine

The typical Tumblr blog used to be just a long, centered stream of photos with a few snippets of text sprinkled throughout — and many Tumblr blogs still retain that basic look. However, the trend in the last few years has been to try to break out of that rigid vertical format, taking advantage of HTML5 and CSS3 features being built into modern web browsers.

Some web designers are creating eye-pleasing designs that invite you to click content; others seem to have gone a little overboard with all the freedom.

Cory Doctorow

Quirky science fiction author Cory Doctorow (perhaps better known as one of the founding bloggers of BoingBoing) uses his “Mostly Signs, Some Portents” Tumblr blog as a place to post “Things Cory Doctorow saw.”

The banner for the site gives you a pretty clear idea of what you’re in for: elaborately decorated tennis shoes, funky space aliens, snack cakes, and a photo of the author seemingly being attacked by a hideous green monster hand. Doctorow uses a diverse collage of images to reflect the eclectic nature of his postings, and to reveal his somewhat absurdist sense of humor in his Tumblr design.

[Credit: Cory Doctorow]

Credit: Cory Doctorow

Coca-Cola

Coca-Cola brings eye-catching action to its Tumblr with animated gifs, running contests inviting people to send in their own short animated sequences. Running contests on social sites, like Tumblr, is a great way to engage site visitors and can help you populate your Tumblr blog with content while rewarding your most loyal customers and turning them into fans.

image1.jpg

The responsive web design techniques used here allow the Tumblr blog to fit the width of the user’s screen, whether a standard display or an ultra-wide display.

image2.jpg

Wolfram|Alpha

The scientific “answer engine” Wolfram|Alpha uses subtle pastel graphics on its Tumblr blog. The sprockets, gears and connecting belts are all echoes of the company’s logo. The understated graphics work well as a design cue for the delicate and intricate calculations that you can do using Wolfram|Alpha.

image3.jpg

The company’s posts are illustrations of how you can use Wolfram|Alpha’s combination of search and scientific computational abilities to figure out things, like how far from Earth the Rosetta spacecraft has traveled while on its way to land on comet 67P/Churyumov-Gerasimenko … or how long it would take to travel from Los Angeles to New York if you were riding a cheetah at full sprint the entire way.

Answers: 499 million miles and 33 hours, respectively, although the poor cheetah would be pretty tuckered out by the time you got there.

Red Bull

This energy drink company has become a leader in digital media. Red Bull’s Tumblr page is a place for the company to promote the extreme sports, aggressive, can-do type of content that fits with its corporate image of being the drink of choice for people who do crazy-cool stuff.

image4.jpg

Red Bull has created a page with four big navigation tabs — Play, Fly, Create, and Inspire — each leading to a subpage of its Tumblr site. The gritty black-and-white design fits with this page; it looks like it’s been banged around a bit but is still standing. The simple design doesn’t take away from the colorful animated GIFs that are the main content on this page.

Using an infinite scroll the way Red Bull does in its design can provide a great, seemingly never-ending experience to some users, but older web browsers can sometimes freeze or crash when trying to load the additional content.

RadioLab

The stories that come out of Radiolab are broadcast on NPR stations around the world, but sometimes there is an aspect to the story that is best told with images.

The clean, stripped-down design on New York City’s RadioLab Tumblr blog puts the emphasis on the images. Radiolab, hosted by Jad Abumrad and Robert Krulwich, also produces a popular podcast.

image5.jpg

Their well-designed Tumblr blog mixes short posts, quotes, and images that illustrate many of the same topics that the two cover in their podcast and radio show. The two have attracted a strong following by asking provocative questions and exploring quirky science and technology.

Today’s Document

Each day at the Today’s Document Tumblr, you’ll find an image, a video, or an animated GIF featuring some notable event that took place on the same day in history. According to the About page on the site, Today’s Document started as a small feature on the Archives.gov website several years ago as a way to highlight interesting documents from the National Archives.

image6.jpg

The use of Tumblr to showcase and share the most popular or most frequently requested documents demonstrates how well Tumblr can serve as a complement to a much larger website, such as the one at Archives.org.