Back To Blog

Building a Design System from the Foundation

Why starting with the broad strokes delivers a better end product

Featured Image

Building from the foundation

When a new website design project kicks off, a common practice is to start designing a page to explore the visual direction for the site. This makes sense in some ways: clients like seeing pages because it’s the most obvious way to visualize what a site is going to look like—and, after all, that’s what they’re paying for. Typically this means starting with the homepage and exploring the design system through the context of that page.

The problem with designing the homepage first

The homepage is the first thing a user see on the site. It’s the foyer, with doors leading to all the other areas of the site. The problem is, homepages tend to be the most unique page on the site. Elements on the homepage often only serve one purpose: to drive a user to another area of the site. These homepage elements are some of the least reusable elements on the site. So why do we start with a page that does so little to inform the rest of the site? Why start with pages at all?

The solution

When building a house, you don’t start by designing the foyer and let that singular work inform the rest of the house’s architecture. You start at the bottom, because a house is only as strong on as the foundation on which you build it. The same is true with site design.

At FortyFour, creating a solid foundation starts with creating “style tiles.” A style tile is a one-page design deliverable that consists of some common core elements that make up a site. This document should paint a picture, albeit a somewhat abstract one, of the entire site’s visual direction. This is a critical first step for our team in establishing a design system.

Here are some elements we typically explore on a style tile:

  • Color palette: The site’s color palette is critical to both the site and the client’s brand. In most cases, we’ll have to work with a brand’s pre-established color palette. However, in some instances, we get to start from scratch with a brand, and make some very important decisions on color. We do a deep dive into the color palette, deciding which colors best convey the tone of the brand and work well with our vision of the project. In either case, we explore not just what the palette is, but also explore how that palette is applied, making decisions on the balance of the colors and what purpose each individual color serves within the context of the site.
  • Typography: How we treat type is another important part of establishing the system. We explore which typefaces to use and make decisions on the weight, case, tracking, and leading. We explore how the headlines pair with body copy to find the proper typography combination for the brand.
  • Forum elements: Figuring out our system for primary, secondary, and tertiary buttons; forum fields; dropdowns; and other common methods of interaction help us answer key questions about how the type and color palette is executed.
  • Photography: Photography is an often overlooked piece of a solid design system. We like to explore photography from several angles: subject matter, style, tone, and composition. When these elements work in harmony,  the photography in and of itself feels like it has it’s own identity, and helps to strengthen the design system.
  • Site-specific modules: In many cases, we will design some modules that are specific to the project. For example, in an ecommerce site, it is helpful to include a product module.
  • Anything else that feels right: Sometimes, we may decide to include additional elements based on what feels missing or yet to be articulated. Some projects need iconography to be explored, others need additional forum elements, branding elements, etc. We keep pushing and refining the style tile until we conclude it paints a holistic picture of the design language.

Typically, we’ll create two or three directional options for the client to react to. From there, we’ll narrow our styles down to one, refine based on the client’s feedback, and voila!—we’ve successfully painted a picture of the site’s look and feel.

Shifting the narrative with the client

When we start the design process with pages, it’s difficult to get focused feedback. Designers make assumptions on the page’s user experience and content. Various stakeholders have preconceived notions of what they want that page to be that may not be represented. Instead of showing them a focused design direction, you’re showing them a minefield riddled with potential distractions. The conversation becomes less about the design system and more about the page.

When we start with the broad strokes, the design team and the client are both focused strictly on the visual direction. With an approved direction, we can confidently move forward with creating a design system, setting global rules, and creating a style guide that all future design work will adhere to.

Starting with the broad strokes instead of pages is a significant shift in approach and does require some upfront discussion and coaching with the client. But extra steps aside, this approach ends with a better product.

FacebookTwitter

1 Comment

  1. Kenneth Amos GSU Journalism Student
    November 8, 2017

    This is really good information. I love the analogy of building a site like one would a home. From the color palette to whats actually on the page, its clear that your team has a way to ensure the client keeps an open mind while also considering the user experience. Do you think that kind of forward thinking is what helps Fortyfour stay competitive locally and nationally?
    and what industry trends have you seen that have caused you to approach a site or project in this manner?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *