Disney+ Web Design System & UI Kit
Categories:
UI/UX, Web Design, Art Direction, Product Design
Cannonball 2.0 DS
Meet Cannonball 2.0 DS (“CNBL-DS” for short), a nimble atomic responsive website design system inspired by science, nature, and imagination. We’ve streamlined design and made it fun to edit the web. Hand built in Figma for Disney Streaming Services, CNBL-DS lets your work stand out and runs like a dream on any device.
⚛️ Atomic Elements
Atoms are the tiny building blocks of your website – buttons, logos, icons, and all that jazz. They may be small, but they pack a punch when it comes time to scale, redesign and deploy elements.
🧬 Molecular Components
When atomic elements team up, they form bigger, more powerful responsive components we call Molecules. These are fitted to live on various devices and keep things consistent across viewports.
Even bigger groupings of elements start to look “alive.” We’re now in the realm of the Cell, each with its own job to do. They work together to create the lock-ups, accordions, and form fields on your pages — making sure everything is humming along for the user.
🧫 Cellular Makeup
🦸🏻 Super Sections
Finally, we have our Sections – the superheroes of our design system. They morph, adapt, have special abilities and is always just a click away. From headers to footers and everything in between, each sections’ Variant Properties allows for the page to fit any design across all viewports dynamically. See their powers in action.
🖱️ Make-It-Mobile
Viewport properties on components turn “1-Click, Make-It-Mobile” into a reality. Edited content persist between variants, increasing efficiency and ease-of-use.
Make-It-Mobile Button — No longer a fantasy.
🛡️ A Hero Leads the Way
A Hero module that can sell, promote, amuse and inform is a valuable thing. Our module comes with half a dozen content presets and can be hot-swapped to create a new custom design.
MLP Hero Module — Cycling through lockup variants.
🥋 3-Hit Combo
Three styles in the Side Align module allow for multiple image and text combinations to display. Variant properties allows for further customization, no matter the content.
Side-Aligned Module — Responsive image and text combination module with three presets and layout customization.
🖼️ Tile Art
Show and hide labels, pick portrait or landscape, and add or remove rows as needed. No pixel-pushing, configure with a few clicks then add your content.
Tile Grid Module — Portrait or landscape tile options, show or hide labels and add or remove rows with this dynamic section.
♠️ Responsive Set
Responsive design isn’t just about fitting content into different-sized screens; it’s also about preserving the artistic integrity of your website. That’s why CNBL-DS works no matter which viewport you are designing — creating a consistent, cohesive experience for both designers and the user.
📱 Mobile First
A responsive page has three breakpoints to design for — by prioritizing the mobile experience, we provide a smooth and enjoyable browsing experience for users on the go. We optimize the extra real estate in larger viewports to create a more engaging, informative and helpful user experience.
🎨 Artistic Sensibilities
Content is king — CNBL-DS lets us focus on what users see, read and feel. Easily and consistently fill in imagery, text, and charts.
From selecting the right color palettes to optimizing text and graphics, every aspect of your website is carefully considered to maintain its artistic appeal while remaining fully responsive.
🔍 Seeing Is Believing
Watch CNBL-DS in action as we spend five minutes creating a base working template of a responsive webpage. Smart component innovations and pre-designed instances allow us to quickly ideate, revise and prep a site structure before requiring any actual content. This grants us efficiency and accuracy while also remaining editable for future refinements. And it’s also just really fun.
MLP in 5 Minutes — Demo of a base design template from “Start” to “Content-Ready.”
Gallery
Take a closer look at Atoms, Molecules, Cells, and Sections of the Cannonball 2.0 Design System and UI Kit. We hope to relay a thoughtful, intuitive and easy-to-use approach for responsive web design that is also fun, inspiring and aesthetically pleasing.
Client
Disney Streaming Services
Year
Summer 2022
Disney+ Web Design System & UI Kit
-
Revamp the Disney+ responsive website design system using our in-house content management system, "Cannonball 2.0."
This page strategically engages users, guiding them through the acquisition funnel to become subscribers. Our aim is to create a system that is user-friendly yet versatile, accommodating various use cases seamlessly.
-
Cannonball serves as the foundation for global landing page designs for Disney+ worldwide. It enables us to efficiently proof, preview, refine, and approve webpage designs before they are launched live on the internet.
-
Thanh Le — UI Designer, UX Designer, Art Director, Web Designer, Content Strategy
Jenny Fine — Illustrator
Anwar Boyce — Designer