Atomic Design

“You can’t build anything on a flimsy foundation”
— Hill Harper

Create Something Strong

Stakeholders for a new skill share company called Spark requested help with creating a brand identity. In discussing their needs further, I suggested we evolve the project to create a design system. We discussed the importance of establishing clear guidelines for designers and that creating components is the foundation to build strong effective designs.

Scope of Work

  • Brand Identity

  • Design System

  • Atomic Design

Tools Used

  • Figma

  • Adobe Illustrator

  • Adobe Photoshop

Discovery & Development

My first step was to meet with the client and become familiar with what their skill share product would be. They described their company as a learning platform for “makers and tinkerers.” The sorts of skills or activities available would be woodworking, creating gadgets, as well as wiring/circuit crafts.

For the aesthetic, the client wanted warmth and texture, with an heirloom feeling. This direction led to a mood board and from there, I began sketching ideas for the logo. I settled on 3 logo options to present and I tried each with style tiles to give a general site appearance and help the client make a choice.

1

3

2

Ultimately, the stakeholders liked elements from each of these style tiles. They wanted to incorporate the etched illustrative style from Style #1 but they liked the logo and textured type from Style #3. They also liked the addition of another vibrant color to partner with the yellow, though we agreed to adjust the red-orange shade.

I took these notes and combined elements to create a hero section mockup and brand statement for client approval. With this foundation defined, it was time to begin establishing brand guidelines that would steer the creation of design system components.

Building the Parts

I began by designing and documenting the fundamentals of the brand guide, including color, typography, decorative elements, imagery and more. Establishing brand guidelines is the first step to creating a strong, effective design system, built under the guiding principles of Atomic Design (see below). This type of design practice is highly effective to create uniformity and brand adherence.

  • The brand typography offers three type styles in several sizes. Shown here is a summary of the styles and use cases.

  • The primary palette consists of neutral browns and grays to suggest a warm industrial heritage. The accent colors compliment while providing vibrance, which is important for buttons and CTAs

  • Utility colors are the basics of the palette - white and black with deep gray-brown options to offer warmer tones. Equally important is defining clear feedback colors to use in alert situations.

  • Defining foundation decorative elements helps shape the general aesthetic and illustrative feeling of the brand.

  • To give the brand texture, wood grain and grid backgrounds at varying transparencies add the warm depth the client wanted.

  • Borders in varying heights add division and create containers that help clearly define section purposes for users. Using borders with accent colors further embellishes the page.

  • The brand has clearly defined guidelines for graphics that adhere to the heirloom etched quality of illustrations that the client desired.

  • For photography use, the guidelines define the desired aesthetic and clearly show what to avoid that falls outside the scope of brand adherence.

Creating Components

Building from the Basics

With the fundamentals of the brand established, I began creating components using the principles of Atomic Design. Starting from the smallest pieces or “atoms” of the design system, I could then easily combine those elements into “molecules” or groups of atoms. This method led to consistency with the designs and ensured that edits I made would reverberate across all of the child elements as well.

Buttons & Links

Buttons and links are used to indicate an a call to action. When using, incorporate suggested states to indicate affordance and suggest interaction. When deciding on which size button or link to use, consider the priority of the action on the page.

  • Primary Buttons

    Primary buttons are for actions of high importance. Use sparingly for priority actions. Color use will depend on background colors and must follow style guidelines for usage.

  • Secondary Buttons

    Secondary buttons are for non critical actions or those of less importance when used with primary buttons. These can be more freely used on a page in multiple instances. Color use will depend on background colors and must follow style guidelines for usage.

  • Feedback Buttons

    This button group provides feedback on the action clicking the button will cause. These buttons are intended for use in cases where actions have important consequences or results.

  • Links

    Links are used for tertiary actions or those placed within body or paragraph type. They can be used in cards when space for a full button is not available. Links may also be used with feedback colors in notifications or other success/warning situations.

Notifications

Notifications provide important top-level feedback to users. They warn users of a problem or error or share urgent information. They can also provide positive feedback for successful actions or information.

  • Banner Notifications

    Banners are best used for mid-level notications that don’t necessarily require urgent action or have important consequences. Banners should always be used at the top of a page so they are the first visible element. They should be dismissible with a clear close icon. Call to action buttons or links are optional for banners - use when action is suggested but not required.

  • Modal Notifications

    Modals are best used when an action is required such confirming the user’s decision. Because modals interupt a user’s process or flow through the site, use these sparingly and only for the most neccessary or urgent alerts.

Navigation & Headers

Headers provide top level organization and elements to navigate the site. These should be responsive to screen size with collapisble menus for smaller screen sizes.

  • Navigation Styles

    Navigation components are housed in responsive headers. Desktop size will utilize visible horizontal tabs. Tablet and Mobile navigatin will collapse into a drawer navigation indicated by a hamburger icon. All tabs should use click states for affordances.

Images & Cards

Cards are containers used to group related content in truncated form. They can hold a variety of image and type content and generally contain a clear call to action.

  • Image and Media Player Components

    Images should use a 10px grid for alignment. Filled borders can be used to indicate card category or other organizational systems. Images may be used with flags or pennants and/or icons to call attention to the image. Media players should have clear play and pause icon buttons and show length of play.

  • Text Components

    Text should have hierarchy with the highest emphasis on card title. For desktop use, text cards can be placed to the right of or below images, in mulitple groups and use horizontal scrolling or vertical scrolling for overflow/next card. For mobile, use responsively by stacking with image above and horizontal scrolling for overflow/next card.

Progress Trackers

Progress trackers are used to show steps completed and steps to still complete. Each tracker has variants to show completed steps, current steps and incomplete steps.

  • Tracker Components

    Progress trackers are composed of a milestone marker and a transition element.

Inputs

Text inputs are used for user text entry. The input container must have label text and placeholder text. Whenever possible, provide error or success feedback with feedback colors, icon use in input container and helper text below input container.

  • Input Forms

    Combining the input components creates input form fields. Making use of helper and placeholder text and feedback icons aids users and adheres to UX best practices.

  • Input Components

    Input fields should consist of combined components to create clear area for text entry. Include the input label, placeholder text, and helper text with input box. Use feedback colors and icons as needed.

Results

Applying the principles of Atomic Design to the process of building Spark’s brand identity and design system worked well to create a cohesive robust brand. Additionally, the system is easily editable since each piece is built by combining atomic elements. The system has room to grow and certainly could expand as needed, within the clearly defined guidelines of the brand.

Previous

Media Streaming
Next

Voter Engagement