Design Ideas: Creating Reusable Style Components

Even if you don’t write your own CSS, it’s still important to consider how hard your designs are to turn into a real working website. Luckily, there’s an easy way to strike a balance between design and implementation: Embrace reusable style components. These elements or groups of elements allow you to create cohesive designs while boosting speed and efficiency.

When I first made the jump from print to web, I kept my design process the same. I’d start with a consistent design across all the pages I mocked up. Then I would sit with a developer while he or she tweaked individual design elements to suit my needs. It was an arduous process, but my vision always came to life.

Later, as I picked up more CSS knowledge, I started to experience the pain of building my designs first-hand. Reading through works like Atomic Design by Brad Frost led to me to the conclusion that I needed to change how I approached web design. Here are some web design ideas I’ve found useful as I reimagined my design tools, method and process.

A Little More About Style Components

So what exactly is a style component? It’s an element or group of elements that can be reused in a variety of ways across a website. Let’s look at the example below of an e-commerce site for baked goods.

 

howarticle-1; design ideas

We were able to use this rounded white box with a grey border in several different ways. I started by creating the “product” style component. Looking at different elements across the site, I realized I used a variation of the white box in “product” a few times. By keeping the styling on the box simple, I was able to reuse the same style on both the “dashboard” and the “shop overview.”

Since we are re-using this style element, it should have a generic name that’s reusable in many different contexts. Coming up with semantic names for these style components is the most difficult part of the process. An element within the dashboard, for instance, probably shouldn’t have dashboard in the name if you’re intending to re-use it within other style elements.

It’s also common to see these style components in HTML frameworks like Bootstrap Components. Bootstrap has determined common reusable styles in websites and made them into generic customizable style components any designer can leverage. Exploring these frameworks helps you to get an idea of how style components work on a larger scale.

 

Design Ideas: Tips to Start Designing Style Components

There are a couple different ways to create style components. I start the process in Illustrator, but you’re free to use your design tool of choice. Design what you need for the page, and don’t worry about style components just yet. Once you’re satisfied with the design solution, look at the whole page and analyze which elements could become components. Let’s think about it in the context of this marketing page:

 

howarticle-2; design ideas

 

As you can see, I’ve taken advantage of my existing white container style from earlier in my process. Saving time already! I named this element ‘well’ so it could be reused easily. I also have labeled some other elements that may be contained within my “well” element. I determined I want every title in a “well” to look this way so I’ve labeled the title “well__title.” The same goes for the button being “well__button.”

Within the “well” style component, I also have another style component. This happens with more complex design pieces, but the same methodologies apply. The whole style component is named “step” and all the elements within it are named accordingly. This way, I can reuse the “step” style independent of “well.” This article by Drew Barontini about single responsibility covers this topic more in-depth.

If you also do CSS implementation, you may be familiar with some naming conventions like Object-Oriented CSS and Scalable and Modular Architecture for CSS. I use BEM for my CSS organization. BEM is short for block, element, modifier and strictly for naming classes, which lends well to creating style components. Block is equal to a style component while elements fall within the block. For example, “step” is my block, while “step__title” is an element within the block. I’d recommend adopting some of the aspects of these conventions to create something that works for you.

Planning Ahead

It’s hard to envision everything that will be on a website at the beginning. That’s ok! We’re an adaptable bunch. Let’s use the example of e-commerce bakery site one more time:

 

design ideas 

When I began, I created the style component “product.” I ended up reusing the similar white box style with a picture throughout the site, including for the “bakery” style component. These two were very similar and could share many of the same styles. The problem was that they were named two different things.

It was time to bite the bullet and do some re-work in the naming. I had to take the time to rename the component and change it to the more generic “tile” throughout the site. It is a pain, but in the end it makes the markup cleaner and quicker to implement on future elements.

On large sites, it’s easy to lose track of all the elements. This leads to overlap in styles and a confusing code base. I recommend keeping a pattern library up to date with all the components listed. MailChimp has a thorough example. A good pattern library allows other designers and developers to work on the site in the future—even if you’re no longer involved. It’s a great reference.

Stick With It

Reusable components are a little time consuming to learn and implement at first, but in the end, they’ll save you time and frustration. I hope you use some of these tips to improve your web design process.

 

kristinlasita (1)Kristin Lasita was the very first full-time designer at Gaslight, a Cincinnati software development firm that transforms businesses with technology. She started the company’s design practice and created all the visuals for the Gaslight brand. When she’s doing client work, Kristin’s goal is to create a design that elevates the experience without complicating it. She’s always balancing time, beauty and function in her work.

 


Want more tips on web design ideas? One of the best ways to maximize the effectiveness of good web content is through implementing SEO strategies. Need a brush up on latest tips and tricks? Or maybe you’re new to the optimizing practices? The SEO course is jam-packed full of just what you need. 

500x500_Optimizing-Content-SEO-Tools-and-Tips

 

COMMENT