Gerard
®
Design Systems Studio
Elements
</IONS & ATOMS>
If ions and atoms are the basic building blocks of matter. Both, ions and atoms are the building blocks of an UI as well. These, serve as the foundational building blocks or parts that comprise any user interface out there.
Components
</MOLECULES>
In chemistry, molecules are groups of atoms bonded together that take on distinct new properties. In interfaces, molecules are relatively simple groups of UI elements functioning together as one. For example, a form label, search input, and button can join together to create a search form molecule. When combined, these abstract atoms suddenly have purpose.
Sections
</ORGANISMS>
Organisms are relatively complex UI components composed of groups of molecules with ions and atoms to other organisms. These organisms form distinct sections of an interface. Organisms can consist of similar or different molecule types. A header organism might consist of dissimilar elements such as a logo image, primary navigation list, and search form.
Modules
</TEMPLATES>
Templates are page-level objects that place components, and sections into a layout to articulate the design’s underlying content structure. I can take a header organism and apply it to a homepage template or region. When crafting a dynamic DS, it’s critical to demonstrate how components look/function together in the context of a layout, to build and prove a modular concept for a prototyped UI.
Scalability Done Right.
ions
HTML5
Root Element
Atomic Design
head
Metadata & Scripting
Atomic Design
title
Metadata & Scripting
Atomic Design
meta
Metadata & Scripting
Atomic Design
base
Metadata & Scripting
Atomic Design
link
Metadata & Scripting
Atomic Design
noscript
Metadata & Scripting
Atomic Design
script
Metadata & Scripting
Atomic Design
style
Metadata & Scripting
Atomic Design
A design system save the day. One
of the biggest advantages a design system provides for a design system
is the ability to quickly shift between abstract design to concrete responsive design – its resilience – the next level in UX/UI design.
100
150
200
300
400
500
600
650
700
750
800
850
900
11:11
Atomic/M
Atomic/M
Atomic/M
Design
Design
Level 01. MethodS [Principles]:
Level 01. MethodS [Principles]:
Ions
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Ions
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Ions
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Level 02. ElementS [Ions + Ions]:
Level 02. ElementS [Ions + Ions]:
Atoms
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Atoms
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Atoms
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Level 03. componentS [atoms + Atoms]:
Level 03. componentS [atoms + Atoms]:
Molecules
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Molecules
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Molecules
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Level 04. sectionS [Design kit]:
Level 04. sectionS [Design kit]:
Organisms
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Organisms
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Organisms
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Level 05. moduleS [Wire-framing]:
Level 05. moduleS [Wire-framing]:
Templates
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Templates
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Templates
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
HiFi Prototype. template Reaction:
Product
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Product
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Product
01.
Brand Strategy
02.
Digital Strategy
03.
Brand Positioning
04.
Discoverability
Atomic
Atomic
Atomic
Methodology
Design
Design
Elevating brands through meticulous design. Uniting visual identities, seamless UI/UX, websites, and design direction into crafted excellence.
Principles & Laws
UX-R
HCI
UX/UI Elements
HIG
DAW
Wireframing
Surfaces
App
Motion
Prototyping
RWD
Design
Elevating brands through meticulous design. Uniting visual identities, seamless UI/UX, websites, and design direction into crafted excellence.
Principles & Laws
UX-R
HCI
UX/UI Elements
HIG
DAW
Wireframing
Surfaces
App
Motion
Prototyping
RWD
System
System
System
Elevating brands since 1993 with human-focused strategies. Crafting success through brand, content, digital expertise, and scalability.
IA
Grid System
Scalability
Remote Co-Dev
Brand Roadmap
Discoverability
Cloud Libraries
UX Testing
Agile | MVP
ADS Atomic design model [Design Paradigm]
ADS Atomic design model [Design Paradigm]
ADS Atomic design model [Design Paradigm]
.
1
3
Let’s talk.
Current availability
We’re open for business and new collaborations.
Current availability
We’re open for business and new collaborations.
Current availability
We’re open for business and new collaborations.
UI Elements
UI ions/atoms
UI Components
UI Molecules
UI Sections
UI Organisms
Sections are relatively complex UI components composed of groups of components with elements and sub-elements to other sections. These sections form distinct sections of an UI.
UI Modules/Regions
UI Templates/Pages
UI Modules and UI Regions are page-level objects that place components, and sections into a layout to articulate the design’s underlying content structure on a screen.
UI Elements
UI ions/atoms
UI Components
UI Molecules
UI Sections
UI Organisms
Sections are relatively complex UI components composed of groups of components with elements and sub-elements to other sections. These sections form distinct sections of an UI.
UI Modules/Regions
UI Templates/Pages
UI Modules and UI Regions are page-level objects that place components, and sections into a layout to articulate the design’s underlying content structure on a screen.