{"id":5215,"date":"2024-09-03T10:55:54","date_gmt":"2024-09-03T10:55:54","guid":{"rendered":"https:\/\/noelbeane.com\/staging\/5285\/?p=5215"},"modified":"2025-01-12T07:33:28","modified_gmt":"2025-01-12T07:33:28","slug":"entity-design-system","status":"publish","type":"post","link":"https:\/\/noelbeane.com\/staging\/5285\/entity-design-system\/","title":{"rendered":"Entity Design System"},"content":{"rendered":"
\n
\n
\n
\n\n
<\/div><\/div><\/div>
\n <\/svg>
NB Home Slide 2<\/div>
<\/div>
<\/div>
\"\"<\/div><\/div><\/div><\/div>
\"Verisk<\/div><\/div>
Entity Design System<\/div><\/div>

A Figma library for web applications.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div> <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/div><\/ss3-loader><\/div><\/div>

<\/div><\/div><\/ss3-force-full-width><\/div>\n\n\n
\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n

Entity Design System<\/p>\n\n\n\n

Noel Beane<\/p>\n\n\n\n

2024<\/p>\n\n\n

Figma<\/a>, <\/span>Prototyping<\/a>, <\/span>System Thinking<\/a>, <\/span>UX Design<\/a>, <\/span>Visual Design<\/a><\/div>\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n

Entity Design System<\/p>\n\n\n\n

A Figma Library for web applications.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

What is the design objective?<\/p>\n\n\n\n

This Figma design system is inspired by my design work on previous SaaS projects.

The system is designed with special attention to specific workflows experienced in B2B and SaaS application design.

Many of the components are designed for large data display with a focus on data input and reporting.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

OOUX Structure<\/p>\n<\/div>\n\n\n\n

\n

Object Oriented UX (OOUX)<\/p>\n\n\n\n

The design centers around the core entities that users interact with, rather than actions or functions. This structure is intended to simplify complexity and ensure flexibility while remaining agnostic to the applications expected functionality.<\/p>\n\n\n\n

An example of entities would be projects, cases, claims, contracts, appointments, files, etc. These objects would contain properties and attributes. <\/p>\n<\/div>\n<\/div>\n\n\n\n

You will find that some design choices have been influenced by some of my favorite systems including the Atlassian design system and Material design.

The system is designed with Figma and makes extensive use of variant properties with a strict architecture that is intended to speed prototyping and hand offs to engineer<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

What are the core specifications?<\/p>\n\n\n\n