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

Continue toSays a LotNews

Says a Lot —

Latest

DECODE Square Logo 4 nocode
News — 

Digiday | C&T Launches Thought Leadership Publication, Decode

Codehealth pressasset
News — 

MM&M | Corporate Siblings C&T and Scout Health Join Forces

Healthfeature
Press — 

C&T Accelerates Innovation with Code and Theory Health

Mailchimp BTB Instagram 05
News — 

Adweek | A Literary Festival for Diverse Voices Finds a Home

Floating NYLON Orange
News — 

Communication Arts Names Nylon Webpick of the Week

Amy Carvajal hed 2020 0
News — 

Muse by Clio | 2 Minutes with Amy Carvajal, CCO at C&T

Campaign2
News — 

Campaign US | Pillow Talk with Xerox and Code and Theory

35674u 2 1
News — 

MediaPost | Theodore Roosevelt Presidential Library

Get in Touch

  • Find Us

    One World Trade Center,
    62nd Floor

    New York, NY 10007

    More Offices
  • Work With Us

  • Press

  • Careers

    See All Open Positions

Continue toAbout UsSays a Lot

We Are a Digital-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 The Stagwell Group, a private equity firm that manages investments in new media and digital marketing services. Its portfolio includes dozens of collaborative, digital-first agencies and over 9,000 employees around the world. Led by a group of agency and industry professionals, Stagwell is a group of leading companies that are insights-based, practitioner-led and collaborative by design. Learn more about Stagwell at www.stagwellgroup.com

Get in Touch

  • Find Us

    One World Trade Center,
    62nd Floor

    New York, NY 10007

    More Offices
  • Work With Us

  • Press

  • Careers

    See All Open Positions