Whiteboard

Whiteboard.is!

Best Visual Design - Aesthetic / Nominee

Whiteboard

Best Visual Design - Aesthetic

Nominee

"We spent a lot of dev hours on little things; nowadays we’re used to scrolling through sites super fast, but we wanted to reward slowing down and exploring." Whiteboard

Watch

Q: Can you describe your project and the concept behind it? A: Our project is the latest iteration of our agency's website, whiteboard.is. We're constantly inspired by beautiful editorial experiences, the blurry line between cinema, game design and web design — and the work our clients and partners do in the world. We wanted to create a web experience that expressed a little bit of all of that.

Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process? A: Our brand is very type-driven — Cambon is a gorgeous serif and Good Sans is quirky. They pair beautifully and there’s always some interesting tension when they’re combined. So, when we were establishing our creative direction, we really wanted to push into more editorial concepts, highlight beautiful media and reference some of the compositional cues of the work of David Hockney and the broader world of photographic collage.

Q: What influenced your chosen technical approach, and how did it go beyond past methods? A: We spent a lot of dev hours on little things; nowadays we’re used to scrolling through sites super fast, but we wanted to reward slowing down and exploring. That required more attention to detail, a break from a more typical design system-forward approach — and a more section-specific effort towards interaction design, especially in the easter eggs in the first few sections. It’s okay if you miss them, but it’s magic if you don’t.

When did you experience a breakthrough or an "a-ha" moment during this project?

The emphasis of a slower, more exploratory design language was a significant “a-ha” moment for us; previous iterations heavily emphasized action-oriented language and clear, direct calls to action, which didn’t connect well with our perspective and culture. Along the way, we also landed on the “for a brighter future” language that’s used to frame our featured work; a constant reminder that design and copywriting are always connected.

Q: What web technologies, tools, and resources did you use to develop this? A: For design we principally used Figma — as we do on every project. A little bit of vector work was done with Illustrator, and we did detailed animation work with After Effects, integrated with the site using the Lottie toolset. While we’re also a fluent Wordpress shop, due to our desire to iterate frequently and experiment quickly, we relied heavily on Webflow for interaction design and the development of this site.

Q: How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand? A: We’re big believers in serving the client’s vision at every turn on a project; a privilege of working with deeply value-aligned partners. We see that collaboration as an opportunity to carry their vision and work in the world a little bit further forward, and our creative ideas and technical capabilities are at their best when we’re working wholeheartedly in pursuit of that vision, not in tension against it.

Q: How did the final product meet or exceed your expectations? A: Honestly, we would hesitate to call it final! It’s always a bit of a work in progress or, to quote one of our designers, in “perpetual beta.” What it did most successfully is help us to rally around a concise way to talk about our work — and continues to serve as a compass for our broader brand as it continues to evolve.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this? A: It’s an exciting time to create digital experiences because the industry, tools and access are only growing more diverse and vibrant — making digital experiences more accessible than ever, and more and more people are able to access those tools every day. This has also allowed us to train new Whiteboarders who don’t have prior engineering experience to build beautiful, production-ready internet more quickly than we ever thought possible.

Explore

MediaMonks

Netflix DARK

TBWAChiatDay LA

Behind The Record

Wild Forest

François Audouy

Zuleika Arroyo

Black Women Too

Sid Lee / DIgital Kitchen

The Joker’s Escape

NBC News

Trans, imprisoned — and trapped

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

AKARU

Avoriaz

GSD&M

U.S. Air Force ECHO

Animal

Life At Spotify

Center for Architecture

Visualize NYC 2021

HAUS

Tillamook

360 Design

Zoonomia

Wonderland

Gigarama

Sing, My District

Nightjar

Discovered Wildfoods eComm Experience

Dogstudio

ZOOX

MediaMonks

Maserati MC20

Cheil Worldwide, Inc

Samsung Galaxy S21 5G series

NYC & Company

The Black Experience in NYC

ESPN

ESPN College Football Tracker

Paradowski Creative

The Sheldon Website

Active Theory

CHILE20

Active Theory

Secret Sky 2020

Hook

YouTube Culture & Trends Report

Hook

Local Guides

Hello Design

The Marvelous Mrs. Maisel

Studio Airport

Emergence Magazine

Athletics

New York Review of Books

R/GA

ESPN House of 98

ThoughtMatter

CENTER Photography 2020 Compendium

Turbulent

Turbulent.ca

IntraCollaborative

Newest Americans

Rotate°

Big Green Egg

Wide Eye

WhiteHouse.gov

Swell Creative Group

Everyone In LA: 2020 Homeless Count

firstborn

Exo

GIPHY

Content Pilot LLC

Chambliss. Bahner & Stophel

Hello Monday

Bartlett Summer Show

Work & Co

Vistaprint Masks

Hello Monday

Virgin Hyperloop

Forbes

Forbes 30 Under 30 2021

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

Jam3

ComplexLand

Spring/Summer

Stykka

firstborn

The Leary Firefighters Foundation

Elephant

Elephant Website