DESIGN PROCESS

Component Library
&
UI Kit

Component Library
&
UI Kit

Component Library
&
UI Kit

Component Library
&
UI Kit

Component Library
&
UI Kit

Design process on structuring symbols and overrides in Sketch

Throughout my professional career, I have consistently developed and managed custom Design Systems for a wide range of projects in paralel with the project itself. Design Systems include essential elements such as UI kits, Component Libraries, Styleguides and Pattern libraries. These systems are crutial for scaling a product and provide comprehensive documentation.
Throughout my professional career, I have consistently developed and managed custom Design Systems for a wide range of projects in paralel with the project itself. Design Systems include essential elements such as UI kits, Component Libraries, Styleguides and Pattern libraries. These systems are crutial for scaling a product and provide comprehensive documentation.
Throughout my professional career, I have consistently developed and managed custom Design Systems for a wide range of projects in paralel with the project itself. Design Systems include essential elements such as UI kits, Component Libraries, Styleguides and Pattern libraries. These systems are crutial for scaling a product and provide comprehensive documentation.
Throughout my professional career, I have consistently developed and managed custom Design Systems for a wide range of projects in paralel with the project itself. Design Systems include essential elements such as UI kits, Component Libraries, Styleguides and Pattern libraries. These systems are crutial for scaling a product and provide comprehensive documentation.
Throughout my professional career, I have consistently developed and managed custom Design Systems for a wide range of projects in paralel with the project itself. Design Systems include essential elements such as UI kits, Component Libraries, Styleguides and Pattern libraries. These systems are crutial for scaling a product and provide comprehensive documentation.
Deliverables
Deliverables
Deliverables
Deliverables
Deliverables

 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

 UX Design & Architecture
Prototyping Lo-fi, Hi-fi
User Interaction
UI Kit & Component Library
Pattern Library & Style-guide
QA & Handoff

Project
Project
Project
Project
Project

This is a Component Library UI Case study showcasing how I build modular and atomically. This is a Slider Component created as part of the Turner & Townsend's project aiming to refracture all child components into a Master Component to be used globally across multiple dashboards.

This is a Component Library UI Case study showcasing how I build modular and atomically. This is a Slider Component created as part of the Turner & Townsend's project aiming to refracture all child components into a Master Component to be used globally across multiple dashboards.

This is a Component Library UI Case study showcasing how I build modular and atomically. This is a Slider Component created as part of the Turner & Townsend's project aiming to refracture all child components into a Master Component to be used globally across multiple dashboards.

This is a Component Library UI Case study showcasing how I build modular and atomically. This is a Slider Component created as part of the Turner & Townsend's project aiming to refracture all child components into a Master Component to be used globally across multiple dashboards.

This is a Component Library UI Case study showcasing how I build modular and atomically. This is a Slider Component created as part of the Turner & Townsend's project aiming to refracture all child components into a Master Component to be used globally across multiple dashboards.

My contribution
My contribution
My contribution
My contribution
My contribution

Build UI and component structure to increase scalability, use atomic design principles to cascade and apply changes at the design layer feeding seamlessly with development and QA.

My Role
Product UI & UX, QA, Arquitecture

Build UI and component structure to increase scalability, use atomic design principles to cascade and apply changes at the design layer feeding seamlessly with development and QA.

My Role
Product UI & UX, QA, Arquitecture

Build UI and component structure to increase scalability, use atomic design principles to cascade and apply changes at the design layer feeding seamlessly with development and QA.

My Role
Product UI & UX, QA, Arquitecture

Build UI and component structure to increase scalability, use atomic design principles to cascade and apply changes at the design layer feeding seamlessly with development and QA.

My Role
Product UI & UX, QA, Arquitecture

Build UI and component structure to increase scalability, use atomic design principles to cascade and apply changes at the design layer feeding seamlessly with development and QA.

My Role
Product UI & UX, QA, Arquitecture

Neatly organised

Neatly organised

Each symbol, piece or component is neatly structured and organized.

Each symbol, piece or component is neatly structured and organized.



1 organised

Nested Symbols and Overrides

Nested Symbols and Overrides

Nested Symbols
and Overrides

Nested Symbols
and Overrides

Override system based on nested symbols, following atomic design principles

Override system based on nested symbols, following atomic design principles

Override system based on nested symbols, following atomic design principles

Override system based on nested symbols, following atomic design principles



2 nested

Dynamic resizing

Dynamic resizing

Dynamic resizing

Each component is elastic, automatically fitting any breakpoint

Each component is elastic, automatically fitting any breakpoint



component-stretch-3

Component Anatomy

Component Anatomy

Component Anatomy

Component Anatomy

Component Anatomy

Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage

Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage

Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage

Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage

Having sections with nested symbols creates many combinations, resulting in consistency, flexibility and scalability at an early stage



component anatomy
component anatomy breakdown

Sections

Sections

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library

Here is a Body Section, it can be a chart or a table. We simply select the Section Symbol and override it with other symbols in the library



4 chart component
component gif 1
table component
table component gif

Component Combinations

Component Combinations

Component Combinations

Component Combinations

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage



component combinations 2

Source of all truth

Source of all truth

Source of all truth

Source of all truth

Source of all truth

A Master Component serves as a source of truth to Developers and Designers. A developer codes components based on signed-off master components. Since all live components are replicas of that, poor pixel perfection is no issue.

A Master Component serves as a source of truth to Developers and Designers. A developer codes components based on signed-off master components. Since all live components are replicas of that, poor pixel perfection is no issue.

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

Having Sections with Nested Symbols creates many combinations, resulting in consistency, flexibility and scalability for any project at an early stage

zeplin-example 3

UI KIT

UI KIT

Atomic Symbols

Atomic Symbols

A master symbol contains nested. symbols. Instances of the master can be created and changes can be applied across all files with a click. 

Example of an instance: Elevation: 04/00, Shape: 4px corners, Color: Cyan, Tint: 0%, Shade: 0%, State: Disabled

A master symbol contains nested. symbols. Instances of the master can be created and changes can be applied across all files with a click. 

Example of an instance: Elevation: 04/00, Shape: 4px corners, Color: Cyan, Tint: 0%, Shade: 0%, State: Disabled

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

override layer

Forms & Tables

Forms & Tables

Forms & Tables

Forms & Tables

Forms & Tables

forms-3

Table system

Table system

Table system

Table system

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

Tables can be dense to pack lots of data or standard, they have a defined structure: Header, content and footer cells. 

Every cell is a symbol, characters cells align to the left, values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

Tables can be dense to pack lots of data or standard, they have a defined structure: Header, content and footer cells. 

This App assists Cost and Risk Managers track the cost evolution of a project, such as the construction of The Shard.
The goal is to assure the project is accurately managed.

Every cell is a symbol, characters cells align to the left and values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

Every cell is a symbol, characters cells align to the left and values to the right each can have 1 or 2 lines. Every cell has nested symbols, backgrounds, dividers and icons to create cell states.

table-gif

230 cell types

230 cell types

230 cell types

230 cell types

table-blue

Cell combinations

Cell combinations

Cell combinations

Cell combinations

table-1
table-3
table-2
table-7
table-6
table-8
table-4
table-9
table-5
table-10

Styleguide

Styleguide

Styleguide

Styleguide

Guides for charts, typography, spacing, colors, etc

Guides for charts, typography, spacing, colors, etc

Guides for charts, typography, spacing, colors, etc

Guides for charts, typography, spacing, colors, etc

UI-KIT

The end.

Other projects

Ciclo de ConversasBranding, UI Design, Concept

SuperRare - Sneak PeekUI & UX, Concept, Product, QA

Turner and Townsend - Cost Control DashboardCase Study, UI & UX, Product, QA

Logo@0.33x

Have a project in mind? If you'd like to chat about a potential project, get in touch.
Currently based in London, Open for freelance opportunities

©Marcia Gaudencio 2023. All Rights Reserved.