As often as possible, I’ll go for a run super early in the morning. In fact, there’s periods where running accounts for 100% of my exercise.
When the cold weather hits—and boy, does it hit—I’m typically relegated to indoor workouts. In these moments, what becomes quite evident is that I’m developing some relatively strong legs, increased lung capacity… and some incredibly weak arms. There’s seasons where I can run for miles but can’t manage a few push-ups.
Balance plays a crucial role in fitness, and for that matter, any system. The trouble is, it’s often difficult to have a well-rounded view of how everything works together when you’re laser-focused on a particular detail.
An orchestra without a conductor is a group of disparate instruments in the same room. It’s the conductor who harmonizes, balances and helps make the symphony.Jon Aizlewood, Clearleft Design Systems Don’t Start With Components
Art Directors Make Connections
A strategist or editor may provide the right content hierarchy on a page. A designer may employ the best components to present various sections and pieces of the content. But who is responsible for connecting the dots visually, allowing individual pieces of content to read as a cohesive sequence?
While it’s entirely possible for a designer to be in the weeds of component design and have a plan for creating visually impactful pages, these two tasks aren’t always easy to bundle together. This is where art direction, and more specifically, an art director, becomes critical.
In the traditional sense, art direction is seen as a front-loaded role, something done at the genesis of a site design. Through the lens of a component-driven process, however, we’ll need art direction to extend into multiple stages, especially ones where page assembly happens. More than the “what”, page assembly should be about the “how”. While front-end designers and developers are mired in component-level details, an art director can provide the necessary vision and approaches for connecting content blocks in ways that align to the high-level design goals of a site.
Assigning someone the task of identifying areas of visual disconnect—or opportunity for seamlessness—can be a crucial part of a component-driven design process. Their approaches can guide—nay, persuade—someone from one section to another. This person’s role is to make a page, a page.
Connecting Our Components
To succeed at the page level, our components need to do more than share the same basic styles. They need to push, pull, and balance each other in compelling ways. These are things we were doing more naturally in page-driven workflows, but can be tricky to reverse-engineer in component-driven ones.
This idea of connecting components is something we refer to at Adjacent as “stitching”; bridging components and content sections together through a visual element such as a shared background or an illustration. Here’s some examples—some of our own and others from around the web—of stitching that have widely different presentations:
Lines & Shapes
Let’s start with a simple approach, and if you were to gain nothing useful beyond this point, you’d still have a really effective element to create more cohesive pages. The equivalent of a piece of scotch tape between two pieces of paper, these examples overlap two adjacent sections with a simple shape. Absolute positioning with CSS usually does the trick.
Probably the most straightforward approach, page and section background elements can create a literal connection between individual components. The effect is typically achieved through background images in CSS or absolutely positioned blocks of HTML.
Background shapes can lead your eye from one section to another.
Background illustrations can bring continuity to a long page. Again, background-image is key.
Sometimes, a level, horizontal line between sections does more to separate than it does to connect. Angles and organic shapes can be great alternatives. Angles can be tricky (welcome to the world of skewing borders), especially ones that clip an image. Clippy comes in handy for those.
A clear sign of page-based intent is to allow an element from a lower section to violate the space of the section immediately above it, or vice versa. Of the multiple ways to pull it off with CSS, absolute positioning or negative margin typically work well.
Perhaps the most literal way to connect one section to the next is for both to share the same element. Check out Midnight JS if you’re looking to get fancy with changing color of said element.
When used with consideration (and restraint), animation can be a connective element shared between a series of components or elements. This often takes the form of scroll-based introductions (e.g. fade-in, parallax) of images on pages.
In something that’s become more and more common, pacing and flow can be employed intentionally by alternating the direction of items in a series of components.
Here a Stitch, There a Stitch
Like anything, “use in moderation” seems to be wise counsel when it comes to stitching components together. We’ve all seen pages where everything animates on the screen, let’s just say it’s not pleasant on the eyes.
That said, it can be difficult to know where to employ connectivity. Recently, it’s helped me to think about connecting content, as opposed to connecting components. It helps to ask myself “where is the narrative breaking up?” and “where’s the best opportunity for impact in this story?”. Framing the page as a cohesive message will help identify spots where a more cohesive design can be of service to the content.
A golden opportunity is usually between the first and second content zones on a page, where a high-level message leads into a the most important, supporting detail. For you product-minded folks, think: hero block to features/benefits. Even if you abandon your stitching quest beyond this point, you’ve provided an initial impression that the page has been considered.
While not every section or component needs to be connected to another, I’ve found that the handful that do can go a long way. Now comes the tricky part: figuring out where in a component-driven process it makes sense to assess component connectivity. Stay tuned!
Also in this series: