An updated illustration style for Document Cloud

Untying the trefoil knot icon to create a visual language of continuous motion

All illustrations by Joslyn Reid

By Joslyn Reid, Senior Experience Designer, Brand & Experience

When Acrobat’s modern viewer launched last year, it set in motion a holistic rethinking of the illustrative assets used across Document Cloud products (Adobe Acrobat, Adobe Acrobat Sign, Adobe Scan) for in-app, marketing, and help content.

For years, in-app communications, tutorial content, and product marketing each had their own distinct illustrative approach. The visual inconsistencies made it difficult for customers to see the disparate content as connected in any way. A unified visual language would help people make better connections between our products and our messaging platforms. We launched a three-teams project partnership-between the Brand & Experience, Learn & Help, and Document Cloud teams-to create a new visual language that will make its way to desktop, web, and mobile in 2024.

We found our inspiration, for the visible throughline between the apps and the platforms where they’re supported, in the looping lines of Document Cloud’s trefoil knot icon

Three elements supply the necessary visual throughline

Our illustrative approach relies on three basic elements: a continuous line and loop, a hand, and Acrobat’s workflow icons.

The three elements of Document Cloud’s new visual language: a continuous line and loop, a hand, and Acrobat’s workflow icons.

The versatility of the elements-the ability to change the shapes and lengths of the lines, the positions of the hands, and the placement of the icons-creates possibilities for us to illustrate a range of topics across in-product, marketing, and learn content.

To create a consistent thread between Document Cloud and Adobe’s other product families, a simple linear style was borrowed from that used in Creative Cloud products. Also implemented, in response to the need to satisfy multiple uses across multiple platforms, was a loud and quiet duality carried out by filling and outlining.

Impact and subtlety play out in the system with filled and outlined versions of the elements. A high impact color like red can be tamed by using it only for an outline.

Bold colors and filled illustrations live out loud for banner ads and key in-app notifications while much quieter outline representations are used for tutorials, marketing, and anywhere else that the illustrations need to be silent supporters to other copy and content.

Expressive, color-filled illustrations are the perfect balance to headline copy.

The hero of the visual story: the continuous line and loop

The continuous line-the basic part of all composition-supplies balance to layouts, visible threads between workflow icons and the hand, and background support that doesn’t distract from important copy. And, when used between and across touchpoints (product sections and features, Document Cloud products, and marketing and help content) it provides an identifiable and literal throughline for this well-known product group.

Deriving its essence from Document Cloud’s trefoil knot, the line and loop create motion, movement, and help build a narrative and a visual throughline for compositions.

With weights that are always balanced and proportional, the line is the leader on a journey through horizontal and vertical layouts, backgrounds and foregrounds, and instructional and expressive content. More importantly, it’s the thread connecting Document Cloud’s story and history, its products and features, and its presence on multiple platforms.

The line and loop can be shortened and lengthened as needed to connect elements and weave through assets.

The line works in tandem with a loop inspired by Document Cloud’s trefoil knot. Never overpowering or replacing the familiar icon, it’s used judiciously to capture the icon’s essence and to create space, dimension, and direction in the composition.

The line and loop changes in weight, direction, and dimension to support horizontal and vertical content.

Loops can be precise and formal (for small linear illustrations) or more casual and organic (for backgrounds). They can fit both horizontal and vertical space. They can be cropped to create foundation and balance at the base of a composition, or float above it as if the wind is taking them. Loops always follow a circular form, are never without the continuous line, and are defined by an overlapping cutout-a negative space that’s always the exact width of the stroke.

On the left, connecting and aligning with a more formal line and loop and, on the right, building a narrative with a more expressive line and loop.

From basic shapes and lines… a hand

A human element was so removed from Document Cloud’s illustration language that the software felt perfunctory and unexpressive. The hand is at once a guide, a helper, and the human part in this visual story, and sits on the baseline of compositions to supply the weight and stability of a flat base.

Hands-made up of 27 bones, 27 joints, 34 muscles, more than 100 tendons and ligaments-have complex anatomy and complex movement and those intricacies required a crash course in study and experimentation. The familiar form was created by combining simple lines and geometric shapes. Later, more defined features were created by subtracting unnecessary elements from the composition while being careful to maintain proper proportions. The illustration was completed by connecting the lines and adding solid filled elements for support.

The hand is composed of simple lines and geometric shapes, and the subtraction of superfluous elements.

Changing the hand position and swapping workflow icons makes it possible to illustrate a range of topics and propositions despite there being only four hand styles-tapping, releasing, pointing, holding. The plan is to eventually create a library of hands, each useful in multiple narratives, and being exacting with how we build hand styles will help us scale the language without making it overly complicated or cumbersome.

The versatility of the system is based on the modularity of the elements — the hand, the workflow icons, the changing line and loop — and the ability to switch and swap them as needed.

Using familiar workflow icons to build compositions

If the line is the thread, and the hand is the guide, the familiarity of the workflow icons (the checkmark, exclamation point, and settings gear) supply the visual connection to the products. Pulled from across Document Cloud, and used in both outline and filled styles, they are uniform and intentional at any size and in any location and can communicate multiple messages.

The modifiers, selected from the more than 100 icons in Acrobat, create a new visual throughline between in-product, marketing, and tutorial content.

In large sizes (for uses like banners) the workflow icons are prominent and expressive and, since intent is communicated through the elements in each composition, they are never without the line and loop creating a connection between the hand and icon. When used at a small scale (on download pages), they’re accompanied only by the continuous line and loop.

A sample library of narratives created from the four hand styles — tapping, releasing, pointing, holding.

The goal is for our illustration system to evolve so we end up with a library of elements that can be consistently scaled and expanded so it will always feel fresh and current.

Adding color to compositions

Colors were pulled from the Document Cloud product palette and broadened by tints from the new Spectrum color system. Leading with the vibrant red of Document Cloud-and the icon colors of Adobe Acrobat, Adobe Sign, and Adobe Scan-they can be mixed and matched to bring the brand to life while tethering information and visuals across product and marketing.

The color system consists of primary colors pulled from Document Cloud products — Acrobat, Acrobat Scan, and Acrobat Sign — and secondary and tertiary colors (from Spectrum’s new palette) to keep the system fresh and versatile.

Intended to be paired with the primary colors, secondary tints are derived from each app’s primary color and the light secondary red. Tertiary colors are a blend of the Adobe Acrobat, Adobe Sign, and Adobe Scan primary colors with Document Cloud red. Primary colors are used for brand app icons and other brand-specific assets; secondary colors can be paired with any of the three products; tertiary colors should only be used with their associated products.

On the left, a linear illustration formed of a line and loop, and a workflow icon for use at small sizes. In the middle, an unfilled illustration for compositions where the focus needs to be on written content. And, on the right, a more expressive filled style that draws people into a narrative.

While the execution of Acrobat’s new illustration style is designed to vary in the app, on help pages, and in product marketing, all will be tethered by a unified system that relies on the flexibility of three simple components: a line and loop, hands, and workflow icons. It’s a graceful, versatile solution all made possible by an untying of Document Cloud’s iconic trefoil knot.

This project would not have been possible without the collaboration of Kyeung sub Yeom (senior experience designer, Document Cloud) whose extensive product knowledge and first draft of the concept identified the design problem and how it might be solved, and Julia Vaca (senior visual content designer, Learn & Help, Document Cloud) who helped design the foundation, and build out the details, of this unified system.

Originally published at https://adobe.design.