A library of

A library of

A library of

A library of

A library of

design

design

design

design

design

components

components

components

components

components

Build a better UI system

In a digital world where everything looks the same, Forms and Tables seeks to radically rethink the design we shape and the design shaping us.

Build a better UI system

In a digital world where everything looks the same, Forms and Tables seeks to radically rethink the design we shape and the design shaping us.

Build a better UI system

In a digital world where everything looks the same, Forms and Tables seeks to radically rethink the design we shape and the design shaping us.

Build a better UI system

In a digital world where everything looks the same, Forms and Tables seeks to radically rethink the design we shape and the design shaping us.

Build a better UI system

In a digital world where everything looks the same, Forms and Tables seeks to radically rethink the design we shape and the design shaping us.

builT for enterprise

builT for enterprise

builT for enterprise

builT for enterprise

builT for enterprise

applications

applications

applications

applications

applications

The basic design system Figma file is out now! - Lots more coming soon.

The basic design system Figma file is out now! - Lots more coming soon.

The basic design system Figma file is out now! - Lots more coming soon.

DESIGN

DESIGN

DESIGN

DESIGN

Principles

Principles

Principles

01

Enterprise First

Enterprise First

The design system is built with complex data-intensive enterprise-level applications in mind but also scales gracefully for any digital experience.

The design system is built with complex data-intensive enterprise-level applications in mind but also scales gracefully for any digital experience.

02

User-Centered

User-Centered

Each design pattern and component is crafted for people to use efficiently, incorporating usability best practices and thorough testing.

Each design pattern and component is crafted for people to use efficiently, incorporating usability best practices and thorough testing.

03

Classical Beauty

Classical Beauty

Beauty is objective and obtained through visual hierarchy, symmetry, typography, negative space, balance, composition, color, contrast, etc.

Beauty is objective and obtained through visual hierarchy, symmetry, typography, negative space, balance, composition, color, contrast, etc.

Components - Coming soon

Components - Coming soon

Forms

Tables

Navigation

Data visualization

Cards

Buttons

Modals

Badges

Lists

Progress

Alerts

Loaders

Calendars

Accordions

More

Design,

Design,

Design,

code, write

code, write

code, write

I’ve always wanted to build a minimal user interface system that includes every conceivable component and accommodates any type of user experience — straightforward yet comprehensive.

I wanted to construct a system you can endlessly customize yet doesn’t compromise base-level usability.

I seek to build and publish a better UI system so others can benefit from my experience building complex SaaS flows. I’ve designed everything from highly complex enterprise software to minimal consumer app experiences.

I’ve been a designer at companies ranging from small startups to some of the world’s largest tech companies.

I want to leverage everything I’ve learned in my career to design and code a component library that’s beautiful, easy to understand and implement and includes UX best practices.

From here, I plan to continue designing, coding, and writing about components to make it easy for designers and software engineers to implement.


-Andrew

Build UI for: - Templates coming soon

AI and LLMs

Business intelligence

Developer tools

Finance and crypto

Project management

Communication and social

Cyber Security

Design editors

CRMs

Bookkeeping and accounting

More

DESIGN

DESIGN

DESIGN

DESIGN

Philosophy

Philosophy

Philosophy

Design patterns aren't necessarily successful because they're inherently good or correct but because users grow accustomed to them. Other apps adopt established design patterns, further cementing them in our digital dialectic.

A design pattern usually takes shape based on related patterns humans understand. Deviating from established patterns can create user experience issues, even if the new pattern is objectively better. However, merely repurposing existing UI components fails to evolve our digital world. Many design patterns actively cause harm cognitively and spiritually but are difficult to uproot because they're so woven into the fabric of our digital landscape. Software engineers and designers unknowingly perpetuate this harm by unthinkingly copying existing interaction and presentation patterns for speed or consistency.
The wheel has a universal shape and function that overtakes style or subjective psychology. Physics underpins its form. Designing UI isn't as objective because human interaction is based on a user's prior understanding of form to achieve an end. A design pattern, component, or flow can take any shape. Its visual construction relies on human consciousness rather than the physics of the natural world.

Design influences interaction, and interaction influences design. The designer makes decisions that steer human comprehension and action, and their understanding of users influences their designs. This push and pull molds outcomes in an evolving process.

Designers have the power to drive how people behave in subtle and subconscious ways. There's a message and feeling embedded in each interaction. Digital experiences make up more and more of human existence—from media to work. The enterprises that survive the next decade will not only harness fast arrays of data but, more importantly, will reinvent user experience. Slowing down and thinking through the design patterns and components changing our world is essential.
Forms and Tables is an evolving enterprise-first human-centric interface library that conforms to predominant user mental models in a minimal yet comprehensive presentation—incorporating best practices, beautiful aesthetics, and assertive design philosophy. It aims to help designers and engineers build better user interfaces that evolve our digital world and reshape the future of work.

A user's ephemeral psychological reality forms the basis from which a design language takes shape rather than a physical objective truth.

A user's ephemeral psychological reality forms the basis from which a design language takes shape rather than a physical objective truth.

A user's ephemeral psychological reality forms the basis from which a design language takes shape rather than a physical objective truth.

A user's ephemeral psychological reality forms the basis from which a design language takes shape rather than a physical objective truth.

A user's ephemeral psychological reality forms the basis from which a design language takes shape rather than a physical objective truth.

PRODUCT

PRODUCT

PRODUCT

PRODUCT

Roadmap

Roadmap

Roadmap

01

Basic design system Figma file - Done

I published the Forms & Tables basic design system to the Figma community for you to download and use in your work. It includes many components, including buttons, badges, navigation, forms, tables, lists, charts, cards, etc.

02

Application Figma templates - Coming soon

I plan to build templates with the Forms & Tables design language and publish them to the Figma community. The templates will include application verticals like business intelligence, LLMs, developer tools, finance, CRMs, etc.

I plan to build templates with the Forms & Tables design language and publish them to the Figma community. The templates will include application verticals like business intelligence, LLMs, developer tools, finance, CRMs, etc.

03

Design system front-end code - Coming soon

I plan to code the components in the Forms & Tables Figma file to make it easy for software engineers to implement. I'm considering building it in React and might include Tailwind code snippets. Let me know how you'd like it.

I plan to code the components in the Forms & Tables Figma file to make it easy for software engineers to implement. I'm considering building it in React and might include Tailwind code snippets. Let me know how you'd like it.

04

Documentation pages - Coming soon

After designing and coding the Forms & Tables design language, I will create documentation to explain each component's usage and best practices and provide code examples for you to easily copy and paste into your projects.

After designing and coding the Forms & Tables design language, I will create documentation to explain each component's usage and best practices and provide code examples for you to easily copy and paste into your projects.

05

Advanced design language - Coming soon

I plan to incorporate feedback from the Forms & Tables design system to design and code an even more powerful version of the component library. I aim to build the industry standard UI system for enterprise-level software development.

I plan to incorporate feedback from the Forms & Tables design system to design and code an even more powerful version of the component library. I aim to build the industry standard UI system for enterprise-level software development.

Articles

Design better forms

A comprehensive visual guide to form design best practices.

Read

Customize columns

Turn on and off columns and allow reordering.

Read

Design better tables

A comprehensive visual guide to designing SaaS tables.

Read

Design better badges

Learn badge user interface best practices.

Read

Design better alerts

Alert design best practices and examples.

Read

Design better accordions

Learn accordion UX/UI design best practices.

Read

Forms and Tables 2024