News | January 17th 2020

Communication Arts Names Input Webpick of the Week

Input

For this technology magazine’s site, Code and Theory created a toolkit of design permutations to encapsulate hundreds of article cases.

Originally published on Communication Arts

Responses by Julie Xie, Senior Experience Strategist; and Chenta Yu, Group Design Director, Code and Theory.

Background: Bustle Digital Group (BDG)’s Input is a consumer technology lifestyle publication that will focus on the intersection of tech, design, style and culture. The site serves as an insider’s guide to the industry, sharing a diverse perspective on the devices, creators, trends and ideas that are changing our world. Stories are told in new, creative ways that engage the reader to question, think and act. Input writers are continuously experimenting with smarter and more efficient ways to convey information. The target audiences are tech junkies and gadget aficionados but also readers in this new decade trying to better understand how technology connects us and moves us forward.

Design core: Besides its tone and design aesthetic, what makes this site unique from other publishing sites is the new storytelling modalities it offers to authors for expression and readers for consumption. While cards are a widely used concept around the web, the design approach we took to them is distinct. We started with a basic toolkit of different typographies, color schemes and image treatments. Multiply that by five card types—and two layout variations within each card type—and now there are hundreds of permutations of how a single card can look. Each card can effectively look art directed and unique, all without a designer. The card is the foundation of every story on the site and is highly flexible depending on the story it needs to tell.

Favorite details: We are most proud of how we were able to cultivate a new visual identity and brand for the new site, working closely with Input’s editor-in-chief Josh Topolsky to create a look and feel. We started from the old-school Risograph idea with vibrant and colorful, paint-like vibes, then introduced modern CSS image effects and chose big, bold typography that you probably haven’t seen in any other editorial context. We worked with the very talented product and engineering team at BDG to make this all come to life!

Challenges: One of the challenging—but fun—aspects of creating a brand new publication is designing for content and editorial cases that don’t exist yet. We worked closely with Topolsky and the team to understand their vision for the new kinds of storytelling they wanted to accomplish on the site. The design process was a two-way street, where content has to inform the design and the design would also shape the future content strategy.

Navigation structure: The foundational navigational paradigm on the site is the stream, an endless scroll of stories that gives users quick hits and why it matters. There is no traditional homepage here; the stream is the primary throughway of exploring content on the site. Users have the choice to dive deeper into a story by expanding it directly in the stream or continue scrolling to the next one. If users land on a story directly, they seamlessly scroll right back into the stream at the end.

inputmag.com

1107229 0 992 LT Iw M Tc2 Mj Ew Nzct M Tc1 Nj Ix Mzc4 Ng

Says a Lot —

Latest

News — 

Ad Age | Top 5 Diversity, Equality, and Inclusion Efforts To Know About Right Now

News — 

PRNewswire | Stagwell (STGW) Digital-First Creative Agency Code and Theory Launches Industry's First Holistic Inclusive Design and Marketing Strategy Discipline

News — 

Ad Age | Marketing In The Metaverse —What Science Fiction Can Teach Brands About Web3

News — 

Code and Theory’s Dan Gardner named Campaign US 40 Over 40 honoree

News — 

Muse by Clio | Don't Talk to Me About NFTs and the Metaverse

News — 

AIGA Eye on Design | The Era of Rebellious Web Design Is Here

News — 

Webby Awards | Code and Theory Named Webby Winner in 26th Annual Webby Awards

News — 

The Drum | Adland's reaction to Musk's $44bn Twitter deal: 'a major disruption to its ad business'

We Are a Digital-First Creative Agency

What We Do

Born in 2001, Code and Theory is a digital-first creative agency that sits at the center of creativity and technology. With a global client roster of Fortune 100s and start-ups alike, we crave the hardest problems to solve and create end-to-end solutions that flex to meet the needs of today’s ever-changing business landscape.

Our Services

We provide a range of offerings built to support the entire ecosystem.

  • Data, Research & Testing

    Our data-driven approach enables us to understand every aspect of end-to-end consumer journeys, and powers our work from start to finish.

  • Business, Consulting & Design Transformation

    We work with our clients not only to define and deliver products, services and communications, but also to design the business itself.

  • Transformational Technology

    We help our clients reinvent their technical infrastructure and roadmap in order to deliver for the needs of today and tomorrow.

  • Services, Platforms & Products

    We create best-in-class platforms built around both the user and the business goals, often extending into connected physical expressions.

  • Integrated Marketing

    We deliver the right messages to new and existing customers across the entire ecosystem.

Join Our Team

We're not typical, and neither are you. We're always looking to hire smart, interesting and forward-thinking people.
See All Open Positions

Code and Theory is a proud member of Stagwell Group. Stagwell is the challenger network built to transform marketing. We deliver scaled creative performance for the world’s most ambitious brands, connecting culture-moving creativity with leading-edge technology to harmonize the art and science of marketing. Led by entrepreneurs, our 13,000+ specialists in 34+ countries are unified under a single purpose: to drive effectiveness and improve business results for their clients. Join us at www.stagwellglobal.com