NYC Opportunity

User Interface (UI)
Patterns Framework

The framework is a collection of tools and principles used to make creating pattern libraries fun for developers, transparent for teams, and sustainable beyond the lifecycle of digital products.

Why Patterns?

The public does not perceive the parts that make up digital government services as distinct products the way civil servants do. Websites, forms, mobile apps, dashboards, email newsletters, etc. are often perceived as a single entity. The more consistent these are from a user interface (UI) and user experience (UX) perspective the better the service delivery will be for end-users.

By using patterns we can strive toward “making the right thing to do the easiest thing to do.” We can use tools that help developers become better at writing error free code, ensure the team adheres to accessibility standards, and create UIs that have been proven to work and can adapt to the changing times.

“Language is fundamental to collaboration. If you work in a team, your design language needs to be shared among the people involved in the creation of the product. Without a shared language, a group of people can’t create effectively together – each person will have a different mental model of what they’re trying to achieve.” - Design Systems by Alla Kholmatova.

Principles

Atomic Design and Utility-first - A pattern library starts with simple design tokens such as color, typographic features, and spacing values then scales up from there. Design tokens are used to build out more complex components, scripts, and utilities that retain modularity.

Framework Agnostic - Use React, Svelte, or Vue.js to add reactivity to user interface components. Manage your own copy of Bootstrap, Material UI, Foundation, or any of the many component libraries of choice.

Modular Distribution and Portability - Make it once, use it many times. Instead of copying and pasting CSS and JavaScript into multiple projects, reuse and extend pattern libraries with a modern front-end ecosystem such as NPM and distribute via content-delivery-network.

Getting Started

Scaffold your own library or project by running the following command.

npx @nycopportunity/pttrn scaffold && npm i && npx pttrn build && npm start

This will install the Patterns Command Line Interface described below, scaffold a new static library project, and start the development server.

But I don’t write code!

No worries! Then perhaps try documenting your pattern library specs in a Figma design file first and share this with your development team.