Component Connectivity

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

Likewise, the design of a page has a timing and sequence that, if not accounted for, becomes a janky series of parts. If you and your team are in the same rut of component-design-looking-like-component-design as I am, I’ve made a similar discovery to Jon that points to a key role in all of this.

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.

Lasso uses a vertical line to connect two content zones

Lasso connects two content zones with a simple, yet effective vertical line

GoSimple uses a vertical line and fixed icon to connect two content zones

Fancy Points! GoSimple’s vertical stitch is two-toned and uses a fixed icon

Best In Grow uses a organic shape to connect two content zones

See that small, minty-colored shape hanging out between those two sections? Nice, Best In Grow

Backgrounds

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.

Blobs

Background shapes can lead your eye from one section to another.

Mawla uses organic shapes to connect their hero message with their first project example

A screenshot of Plant showing blobs connecting content

Plant connects two content zones with a large blue background circle

A screenshot of Quokka showing blobs connecting content

Quokka’s background shapes are sort of elastic

Illustration

Background illustrations can bring continuity to a long page. Again, background-image is key.

There’s going for it, and then there’s this from Bond

A screenshot of Klientboost's homepage, showing a rocket blasting off and clouds

KlientBoost’s clever use of clouds to bridge the hero message and the content below

Non-Traditional Transitions

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 screenshot of Cookbook, which uses angles to transition from section to section

The angles on our Cookbook site were fun to design, albeit a challenge to code

A screenshot of Create Upstate, which uses wavy lines to transition from section to section

Create Upstate’s sections are separated by wavy lines, which oddly ties things together

A screenshot of Intercept, which uses wavy lines to transition from section to section

Intercept’s site also employs wavy lines

Overlap

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.

For Strategic Financial, we connected their process and company messages with a team member.

A screenshot of Challenge Scholars, which overlaps content zones

Challenge Scholars‘ slight overlap from section to section does a ton to connect zones

A screenshot of Cornell, whose sidebar violates the section above it

The sidebar on cornell.edu violates the banner above, bridging together two sections

A screenshot of Marvel, whose subitems overlap the primary image of a given section

In this Captain Marvel promo on marvel.com, the sub-items violate the banner to create a grouping

Fixed Elements

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.

Animation

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.

Alternating Layout

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.

A screenshot of Hotel 28 Lex's site, showing room options that alternate position down the page

Hotel 28 Lex gets bonus points for using angles amidst their alternation.

A screenshot of Roomzzz.com, showing room options that alternate position down the page

Roomzzz follows a conventional alternating pattern for their features.

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

Part One

Seeing the Pages for the Components

Part Three

Page-Comp Revival!