Approaching web builds at the component level is a great way for design and development to meet in the middle.

Every web project starts by examining the brand’s story. 

What are we trying to communicate? To whom? What is most important? These answers are what inform work like the sitemap, navigation, site-wide CTAs, information architecture and overall content strategy. Considering and empathizing with your user and aligning their needs with the goals of a project, can help determine what needs to be said as well as where and how to say it.


The content outline deliverable is what summarizes the site’s narrative. It’s a document that defines content needs and informs the wireframe work to come. This Google doc may not look like much, but thoughtful content work in the beginning of a project is what essentially shapes the entire website. 

Once we have a content outline in place, we let that drive layout decisions and determine component, UI and content needs from there.

If the content strategy and outlining work is the blueprint, the wireframes become the foundation, structure and support for the eventual build. We’re not shopping shutters just yet, we’re making sure the house can stand the test of time.

Achieving Consistency and Cohesion through Componentry

Now for an interface inventory. We start by breaking out each element from wireframes into categories - UI, cards, menus, lists etc. to determine the needs for a project. 

Components are what become the “building blocks” for your site. Once you have a library outlined, you can begin to infuse the brand. Component by component, leveraging a brand’s personality and starting to establish a style guide foundation - Colors, heading styles, underlying grid, spacing etc. 

Then, taking things a step further by setting styles and effects. This is where it’s important to have fun and flex the brand, but also be mindful of rules, consistency and feasibility. Applying design to each component, 1 by 1, allows you to experiment, feel out what’s working, what isn’t and create patterns through properties that carry throughout the design and ensure consistency, trust and cohesion for the entire site experience.

Tweak, iterate, test and finesse. Designing components is the fun part. And once you build a core set, you’re on your way to being the proud new owner of a scalable, design system. The 

component library that you establish is a subset of the full system

. The library is essentially a repository of reusable modules that developers, or the admin can then utilize when building pages. And guess what? It doesn’t have to end there! Design systems provide a flexible framework that allow you to easily grow your library of core components at any time. This provides your website with the capacity to scale and evolve without compromising on consistency or quality.

For a more comprehensive look at creating a full design system, check out this post:

A set of rules and guidelines that act as a single source of truth for digital interpretation of your brand. A design system is essentially a complex digital brand guide. The building blocks for any web work.



Introduction to Design Systems

Creating a Design System in Figma

Here are a few examples of open source component libraries to pull inspiration from:

Web Design

User Experience

Frontend Development

Websites

UX / UI

Component-Based Web Design

When planning the KPA ticketing app, the first big decision was deciding which technology stack to use

Given the complex and highly-interactive design, we needed something that was going to be developer-friendly while letting us build an application that was highly responsive to user interactions. Nothing’s more frustrating than a slow user interface!

VIA has mostly standardized on ReactJS for smaller interactive user experiences as well as single-page web applications so it seemed like a great fit, even though the ticketing app is just a small (but critical!) piece of a much larger site.

The other advantage to developing the ticketing portion of the site as an almost stand-alone app is that development on the rest of the site could continue in parallel. The more simultaneous work happening, the better!

React’s power comes from the way everything is divided into components which are displayed on a page. Once a component is identified, it becomes trivial to use it in multiple places on a page without having to write a bunch of extra code.

For example, we created a component for a single seat in the list of all available seats. This was great because seats that had been added to the user’s cart had a very similar design, albeit with slightly different data. This component-based architecture let us have all the shared code for that seat layout in a single place, even though it was displayed in multiple locations.

An additional benefit of using components is it makes it easier to allow multiple developers to work on the project at the same time.

The ticketing app was, understandably, quite data heavy. We need to store lists of available seats, seat map data, pricing information, promo codes, shopping cart data, venue information, etc. This data was constantly being updated as people selected seats or filtered based on pricing points or seating sections.

Luckily, this is another use-case where React shines. Leveraging an additional tool called, Redux, we can easily store all of the data used by the site in a single data store. Then we can set up our different components to pull data from that store. When data in the store changes, the components using that data automatically update themselves. All of this changing and updating is blindly fast because React is very good at only updating the components that have actually changed. No need to refresh the entire page!

For example, let’s say the user wants to filter seats to a certain price range. We can build a component which lets them select the prices they want. Those selected prices are fed back into the data store. Then React takes care of updating all of the components that depend on that data. This includes things like updating the seat map and ticket list to hide seats that don’t match the selected filter.Tools aren’t a guarantee of success. Just like a fancy hammer doesn’t mean you can easily build a house. The most important part of a project is the people working on it. Given the huge scope of this project and the aggressive timeline, our expert people using the above tools allowed us to deliver a quality product while sticking to the timeline we set out for ourselves.

Want to know more about our work for Kentucky Performing Arts? Read our case studies on 

the new Kentucky Performing Arts branding

how we translated that branding into the new kentuckyperformingarts.org website

PHP, Javascript & React

Ecommerce

Using React and Redux to build the Kentucky Performing Arts ticketing experience

Bernheim Forest Website

Foxhollow Farm 

Websites are the cornerstone of marketing in this day and age. Your website is the place where you have ultimate freedom to express your brand and interact with your audience and customers how you’d like. Using agile, user-focused strategies and design, we build highly accessible, highly useful websites that meet your goals.

Websites

Websites: Case Studies

01

Bernheim Forest Website

02

Foxhollow Farm

Websites: Blog Posts

Component-Based Web Design

Using React and Redux to build the Kentucky Performing Arts ticketing experience