Creating the Payara Design System

At Payara Services we have many different applications and web-based projects that all need to be unified under our brand. Ideally, someone should be able to recognise a Payara app even if they can’t see our logo. For this to happen, we need to create consistency in the UI (User Interface) across our projects. Enter the Design System.

What is a Design System?

A design system is a set of defined standards including colours, typography, and components that can be used across different projects. Think of it as a Lego set where the bricks can be arranged into any order required.

A design system should reduce the design debt as our engineers will not have to spend time thinking about how to represent a button, or a form element. These things are included in the system, and should have been tested for accessibility and consistency beforehand, meaning the engineers can concentrate on building app functionality instead.

What Does Our Design System Cover?

To start with, there are guidelines for typography and a base layout grid, these are the foundations of any page or screen layout and have to be defined before we can start work designing anything else. Following on from this we have form elements, buttons, menus, image galleries, tab blocks, and lots more.

A tricky part of building a design system is making sure it has a comprehensive set of elements but doesn’t include so many elements to cause choice paralysis. A good jumping off point is to start on form elements, if you’re mainly concerned with creating apps and services online, then forms are pretty much a requirement and contain a lot of detail both in design and accessibility. If you’re creating a system for marketing websites then element blocks concerning content and media might be a better starting point. You should try not to include one off elements that will only ever be used in one project, these elements–snowflakes–should be handled during the design phase of that specific project.

Designing the Elements

Sketch is our chosen software for creating the design system, it’s a Mac-only design application so if you need a platform independent option, I would suggest trying Figma, an online design app that is platform independent. I get twitchy about having to rely on SAAS-type products for a file that I will undoubtedly come back and edit over time, so decided to stick with the Mac app.

As an example of designing an element, I’ll use the humble button. For the button we started by listing all the variations needed such as hover states and disabled states. We also needed a highlighted, super important button option, so all the states for that needed creating too. Below is a graphic showing all the states for Payara buttons.

We started by creating the default button style, at the same time thinking about how it will fit with any other elements on a page. How might a series of buttons look? Does it need to be tappable with a finger and not just a mouse pointer? (Pro tip, the answer should be yes.) This is the point we tested the colours of the button text and background to make sure they conformed to accessibility guidelines. Also, we had to make sure to think about edge cases, what happens if the button text is long and wraps? What if someone has their browser text set to larger than the default? All these things need to be thought about, they may not require anything other than testing to make sure everything works as planned.

The process above needed to be repeated for all elements, note that a design system is not a quick project. You will ideally not want to have to go back and have to change some part of the design later because an edge case you didn’t envision has popped up and ruined your day, it is important to try and plan for lots of use cases, your design system needs to be flexible and something that the project engineers find helpful, not a roadblock.

Topics: Fish FoodTagged Design

Back to Team Blog