Sundance TV web development
Works
- 2014
- Brand, identity, etc.
- AMC Networks
- SundanceTV web re-skin
A longtime haven on the cable matrix for thoughtful film and other independent-minded programming, Sundance Channel has in recent years quietly begun to create content of its own. In late 2013, emboldened by two seasons of well-received original series, they hired Johnson & Wolverton to rebrand them as Sundance TV. J&W hired us to look at the online component of the brand.
This is a re-skin rather than a redesign, as the underlying use patterns and content groups of the site’s previous incarnation remain: AMC Networks, which owns Sundance TV, runs all of their sites (AMC, IFC, etc.) on the same platform and with the same basic architecture, and the site uses standard internet ad units. So we couldn’t change much beyond the master CSS file.
But sometimes that’s okay. A little discipline can work wonders: merely rationalizing and setting clear hierarchies for the typography did a good deal, as did the use of web fonts—several weights of Benton Sans, the anchor of the brand language, had been recently made available for licensing from Font Bureau, and we used them. We also stripped away the presentational cruft from in-line video players and social media icons, and set strong rules for presenting sub-brands (e.g., show packaging), pushing the Sundance TV brand and its content to the fore.
Illustrations
1.
Main index
J&W’s campaign language for Sundance is about content and quality: it focuses on the shows themselves and what other people say about them. The selling is left to the reviewers, in the form of real blurbs writ large. Here, the anchor video carries one such blurb on its poster frame. In contrast, the network’s voice is friendly and informal, and is mainly used to describe, not hype.
Shows often have rich brand languages of their own; we counseled to use those sparingly on the site, opting instead to use stills or dramatic keyframes to keep the content in the fore.
2.
Series aggregator
Page gathering the various series on Sundance in one place. The “blurb” strategy described above also works for the network; here, and on subsequent pages, the top part of the page features a channel-specific blurb drawn at random from a growing database.
This page gathers the various series on Sundance in one place. The “blurb” strategy described above also works for the network; here and on subsequent pages, the top part of the page features a channel-specific blurb drawn at random from a growing database.
Although we’re not huge fans of slideshows, they were part of the existing architecture. We worked hard to simplify and integrate them with the rest of the page, presenting each image as a content frame, with title, caption, and links included on the same surface.
3.
Individual series index
Although there is some show packaging here, it’s restricted to an area on the main video poster frame. Successful shows can own their networks, a lesson we learned with The Daily Show when we were working for Comedy Central. In this context, the program must always be seen as part of the network’s brand. We could reference the show’s packaging in subtler ways, as in the small red keyframes below the main viewer.
4.
Films aggregator
Aggregator pages (series, films, festival, etc.) behave in consistent ways throughout the site, though the content they carry helps make them unique. Sundance’s interactive wing pushes a lot of content to the site weekly; we paid particular attention to defining rules for content types, so that the user’s experience would be coherent from visit to visit.
5.
Schedule
Here, the visual language is applied to denser list-type information. As the site is responsive, hierarchy had to be controlled by color and value rather than scale.
6.
Blog aggregator
The site contains many blogs: most of the series have their own blogs, as do each of the major categories and the Sundance Film Festival, which keeps a room here. This is the aggregator for them all, showing the visual coherence of each post—clear hierarchies and chunking of different types of information: comment count, tags, and so on—which would carry over no matter where the post was rendered. We corralled the social/sharing buttons into a cluster using a picture web font (Symbolset’s Social Circle), which kept the buttons from overpowering the post, as can so easily happen.
Colophon
Composed in Benton Sans, various weights; and Symbol Circle
- Agency
- Johnson+Wolverton
- Creative directors
- Alicia Johnson
- Hal Wolverton
- Designer
- Adam McIsaac
- Development
- AMC Networks