Creating the Flickr Blog: A Case Study

Putting Photography First

The old Flickr blog design.

We had a fabulous time redesigning the Flickr blog. The old blog was in dire need of a facelift and the fabulous team at Flickr needed an agency well versed in the WordPress.com VIP platform that also had a talent for branding. With our ability to craft a fabulous creative direction and our status as a VIP Service Partner, Range was just the right fit for the job.

With an overall strategy of simplicity, ease of use, and engaging content, we set out to redesign the blog. We kept in mind overall load performance enhancements and language support, but most importantly: photography.

Information Architecture

We collaborated with Flickr on a new information architecture for the site. We developed a new sitemap and wireframes with an overall strategy of surfacing past content and increasing user engagement.

In order to surface content, we created a categorical drop down as well as a yearly archive. We crafted beautiful image after-post callouts for timeline-posts as well as a “related” post.

One goal was to emphasize photographer relations, so we designed the photographer’s spotlight page a bit differently than the regular post. We also added a photographer’s spotlight into the footer to draw more attention to the photographers.

Design

Flickr is all about photos! We wanted to show off the incredible photos while sticking with the new enhanced flickr branding. We designed layouts that have large photos with elegant captioning. The single pages blur the feature image into the background, setting the mood for the post and complimenting the photos.

The typography begged to be fresh and open. We used Proxima light for the heading and Proxima regular for the body.

Photographer’s SpotlightAfter-Post Callouts

Technology

To create an ambient background based upon the featured image, we generate a blurred image using PHP ImageMagick during the first preview. We made an api on our Range servers to grab, blur, then upload the background to VIP serving from our API endpoint. We previously tested this feature with CSS blur using canvas, but based upon speed metrics, the above solution proved to be the best.

Like this project?

Authored By

Sara loves design, typography, user experience, and art. She gives talks around the globe on web design, user experience, typography, and more. A seasoned designer, Sara has done work for clients such as Disney Publishing and Flickr. She loves open source, her pets, traveling, and WordPress.