With locations in New York City and Chicago, design firm The Charles has become known for its clean, refined design aesthetic. That’s why the design of its new online editorial Charlie breaks away from that reputation by mixing static and animated visual media, sound, video content, and experimental layouts into the fold of a minimal, yet individualistic platform. With the incorporation of crop marks and registration points into the design, Charlie playfully references print production elements throughout its site, even going so far to have the “About” page mimic the copyright page of a printed book. The homepage’s hero section features a real-time video that changes with the time of day, and several page layouts can be altered as visitors activate rollovers; a vertical menu that features links to different articles utilizes GIFs as a rollover element. These features all come together to create a visual experience that shatters preconceptions about how online editorials should look.
But that’s not where the rebellious design stops—all of the first issue of Charlie’s articles look and feel different from each other. “Each article is unique within itself with independent style and behaviors while still fitting under the larger Charlie digital experience,” says Ian Micallef, designer at The Charles. “With each article being bespoke, the imagery and animations for each were implemented to further communicate the theme and tone of each piece of content.” Jarring movie clips from Psycho and The Exorcist enhance the tension behind the article “What Are We Afraid Of?” that explores the correlation between horror films and social anxiety. An animated text message conversation hits the nail on the head in “Headline-Trading and the TL;DR Generation,” which takes a look at how sensational headlines and a deficit in attention have contributed to misinformation. A powerful photo gallery of black women and girls drives “Year of the #BlackGirl,” an article that examines what it’s like to grow up as a black woman in a country with Eurocentric beauty standards. The distinct content and design of each page goes hand in hand with the copy to further draw readers in.
Of course, displaying all this content without bogging down load times required careful planning on behalf of Charlie’s design team. “Several steps [were] taken towards maximizing the site's performance including prioritizing “above the fold” content, lazy loading images and utilizing Canvas for interactivity,” Micallef explains. This seamless experience with bespoke content has won Charlie accolades from many design sites, including Awwwards, CSS Awards, CSS Design Awards, Designer News, High Snobiety, Muzli and Web Designer News.