Thinking and Designing with Components

Definition, Please

What’s a component? Lately, I feel like the word is being used more and more, and I wanted to break down its meaning (to me) in the digital space.By definition, component means “constituting part of a larger whole; constituent.” When you really look at how components can be used across digital design and development, it’s interesting to see how the small parts can quickly become a whole.Google put it best with this definitive illustration:

"Light passed through a prism breaks up into its component spectral colors."

A Real-World Example

How does this work when designing a product? Take a look at any interactive design and what do you see? What makes up its parts? I’m going to use the Spotify for iPhone app as an example. The first thing I see are colors, then images, followed by text, and finally navigation. I’m a visual person like that. I don’t like any of the choices of music up on the screen right now, so I’m going to head over to the navigation. Here, I find more text, some icons, and a little more imagery with a touch of color. Oh, I see my profile picture at the bottom! I tap there to go to “My Music” and look at some more text and images, eventually choosing my favorite playlist.What does this have to do with anything? Each of these repeating elements makes up components that complete the application. Images, text, and color are pretty vague, but let’s break it down.Spotify chose a very limited color palette, one that allows the album artwork to really show. With green, white, and fifty shades of gray, the designer is able to treat the pre-selected color palette as a component and no longer have to experience an existential crisis while trying to pick colors for the product. It’s already decided, and ready for use throughout.Images used inside the application are mostly either icons or album art. But looking at text and icons together, they make up some sort of action or a button. There’s another component! As components become defined during design, the faster the designer’s work can become. This also creates consistencies throughout the user experience, so I don’t get lost in the application. Take notes, Apple Music!

In Your Workflow

I’ve created design components for anything from text treatments to icon sets and anything in between. These components will always share their properties throughout the experience, and I can drag and drop these from Photoshop’s handy library tool or modify them globally with Sketch’s styles tools.DRY is an acronym in development meaning “Don’t repeat yourself.” Look, that acronym is made up of components too! Sweet. Simply put, you can write a component once and reuse it throughout a product.For example, I need to build a button with a dark gray, two-pixel-wide border that sometimes might be blue. I wouldn’t want to rewrite the entire button just to change the color. Instead, I could add a rule that keeps the basic structure of the button, but only adjusts the color in order to keep this component flexible. To save time when redesigning the 4 Rivers website, we created a three-column content grid that could showcase products in one section. In another area we used the same grid to display the restaurant locations. I was then able to reuse the same component we wrote with minor rule changes to show the same layout with different content. Theoretically, you can use components inside other components. These two can make up an entirely new component that works alongside an adjacent component that builds an entire module. Whoa.

A W3C Web Components Tangent

Let’s get nerdy here for a second. There are also “Web Components.” These are standards being put in place by the World Wide Web Consortium (W3C). They are taking consistently used web elements that require plugins or custom code and strongly suggesting that they are included in modern web browsers natively.Anyone remember flash videos? Me neither. The W3C let us do away with creating janky video players, that require us to install third party plugins just to watch a 3 minute webisode. Showing my age here. Now we can drop in an HTML5 “< video >” tag with URLs to an MP4 file and a WebM video and voila! Video content. The browser will handle playback, scrubbing, and volume on its own using the Shadow DOM. From here you can overwrite the default player styles with your own. If you want to learn more about W3C Web Components specifically I suggest reading this article.

Benefits of Using Components

Every component that is used comes together to create a website or application as a whole. So what are the benefits of using components? Remember that three-column layout we talked about? Whoops! We just found out that four-column grids tested better with users and now we have to change it. As a developer, I can go in and make a layout change once and it would take effect immediately in all sections sharing this layout. The same thinking can be applied to design, as well. Maybe the team wasn’t digging a navigational element. If you’re using your design tools responsibly, you might be able to make changes to a single file or library style that’s included in your compositions, thus making global changes very easy.The switch to component-based thinking, designing, and building will break many bad habits and solve many inefficiencies in your workflow, though it’ll take some time and reading up to implement properly, especially across a team. Start doing some research, with helpful material like this and this, and feel free to comment below with any questions you have!Remember: think big, build small.