News | January 17th 2020

Communication Arts Names Input Webpick of the Week


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.

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

Says a Lot —


News — 

Code and Theory, a Stagwell (STGW) Network Company, Named Ad Age Business Transformation Agency of the Year

News — 

CampaignLive | Behavior as a prompt: Why AI’s ability to anticipate will change business forever

News — 

Code and Theory Wins Three Drum Awards For AI, Creativity, and UX with YETI and Tipico

News — 

Under Armour Launches UA Rewards with Masterclass-style Video Series, in Partnership with Code and Theory

News — 

Figma Names Code and Theory as Launch Partner in New Service Partner Program

News — 

Scout by Sutter Health™ Launches an App Focused on Resilience Building for Youth and their ‘Champions’, Built by Code and Theory

News — 

Code and Theory Network Wins Six W3 Awards

News — 

Facing the Future: A Guide to AI and Design Transformation

We Are a Technology-First Creative Agency

What We Do

Code and Theory is a strategically driven, digital-first agency that lives at the intersection of creativity and technology. We solve consumer and business problems with end-to-end solutions that flex to meet the needs of today’s ever-changing digital landscape.

Our Services

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

  • Data, Analytics and Research

    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 & Organizational Consulting

    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.

Our Offices

We have locations around the world.

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

Careers at

Code and Theory

All of our roles are open to remote applicants. We're not typical, and neither are you. We're always seeking smart, interesting, and forward-thinking people.