Design Syetem with Column
Based 300+Templates

Business
Goals

Dependable templates insulated from logic-level changes.
Diverse customisation options supporting unique branding needs.
Enhanced user experience through structured navigation and onboarding.
Quick addition of template as per business needs without build push.
Bring consistency, boost efficiency and give scalability.
Bring reusable components.
Agile design mythology to maintain brand identity, collaboration.

Research
Points for UX

1. User Goal Alignment:

Users desire enterprise-grade templates as a starting point.
Templates must cater to various industries, offering diversity in design while maintaining professional standards.

2. Customisability:

Customisation features must allow users to modify templates to suit unique branding or functional needs, from basic elements to complex structures.
A seamless transition from atomic-level changes (e.g., colors, typography) to organism-level updates (e.g., layout adjustments) ensures user satisfaction.

3. Intuitive Onboarding And Navigation:

Provide a user-friendly interface with a structured hierarchy that supports easy navigation.
A quick onboarding tour should demonstrate system usage, even for non-experienced users.

4. Logic-Independent Design:

Ensure template designs and customisations remain functional even with underlying logic changes, guaranteeing system stability and user trust.

5. Column Bases Design:

Column based design help business to make quick decisions when your requirement is fast. interfaces are always done based on the column how we want to divide the structure.

User Persona

Sarah Thompson

Senior UX/UI Designer at a Global Enterprise

Age: 30-45

Demographics:

Goals

To design highly customizable dashboards that meet diverse business requirements.
To leverage cutting-edge tools for creating dynamic, engaging user interfaces.
To implement modern animations and interactive elements to enhance user experience.

Challenges:

Struggling with limited flexibility in traditional Div-based systems for unique and detailed customization.
Finding efficient ways to integrate advanced 3D materials and micro-interactions within tight project timelines.
Balancing creativity with the technical limitations of existing enterprise tools.

Motivations:

Empowered by tools that enable endless customization and innovation.
Excited to bring creative ideas to life through advanced JavaScript integrations and micro- animations.
Driven to set a benchmark in enterprise design with visually stunning and user- friendly interfaces.

Solution Fit:

The grid-based page builder is sarah’s ultimate design companion. with its customisable structure—pages, shelves, primary widgets, and unlimited widgets—it provides the flexibility she needs. The seamless integration of javascript for 3d materials and micro-interactions fuels her creativity, enabling sarah to craft next-level enterprise solutions.

Design
Thinking /
Solution

Atomic Design thinking

Atomic design is a systematic approach to building design systems, which is inspired by the concept of atoms in chemistry. It structures design elements hierarchically, starting with the smallest building blocks and combining them into increasingly complex components. This methodology ensures consistency, scalability, and modularity throughout the design process.

Applications of Atomic Design

Atomic design is widely applied in modern design systems. for example, UI libraries like Material Design and Bootstrap incorporate its principles by offering modular, reusable components. this approach is particularly valuable for creating customisable templates, allowing users to tweak elements at any level, such as changing a button’s style without altering the entire interface. Atomic design also bridges the gap between design and development by ensuring that design elements translate directly into code, maintaining a consistent workflow.

Atom

Atoms are the smallest, most basic building blocks in a design system. they include elements like buttons, input fields, labels, icons, and color palettes. These components are indivisible and provide the foundation for all larger design elements. atoms ensure consistency in style and behaviour, forming the core vocabulary of the design system.

Data Types

Molecules

Molecules are created by combining multiple atoms to form functional units. For any event/task you need couple of specific data type/atom to complete the task. For example, a search bar might consist of a text input field (atom), a button (atom), and an dropdown (atom). You can choose the column grid depend on the type of task. NSL platform empower designer to customised templates to granular level depend on the type of event event/task.

Columns

Organisms

Organisms are more complex components that consist of multiple molecules and/or atoms working together as cohesive sections of a design. Examples include templates, headers, footers, or card layouts that combine elements like navigation menus, logos, and buttons. Organisms form the building blocks for templates and pages, helping create structured, functional parts of the user interface. You can drag some widgets depends on your AI model output data.

Templates

1. Atomic Design Approach

Atoms: basic design elements such as buttons, icons, text styles, and colors.
Molecules: combinations of atoms, such as a button with a label or a navigation menu.
Organisms: comprehensive structures such as full navigation bars, form layouts, or product carousels.

2. Structured Interface With Columns

Structure is divided into 3 major components:
Static Assets

Background

Data Type / Kits
Structure is also done on design thinking. Its is mostly three sections, all logic functions on left panel centre panel is for preview the live customisation, and right panel is for atomic an level customisation.

3. Customization Features

Atoms: basic design elements such as buttons, icons, text styles, and colors.
Molecules: combinations of atoms, such as a button with a label or a navigation menu.
Organisms: comprehensive structures such as full navigation bars, form layouts, or product carousels.

This approach ensures scalability and consistency while empowering users to edit at granular levels.

3. Template Library

Collection of 300+ pre-designed templates categorised by industry, purpose, complexity and columns.
Adaptable templates with atomic, molecular, and organism-level flexibility for diverse use cases.

3. Logic-Independent Framework

Modular code architecture separating logic and design layers.
Templates and customisations operate independently of system logic changes, reducing risk and ensuring business continuity.