SlideShare une entreprise Scribd logo
1  sur  2
Télécharger pour lire hors ligne
THE GRID SYSTEM:
IMPORTANCE OF LAYOUT IN UI UX
The grid system holds immense importance in UI UX Design as it provides a
structured framework for organising content, enhancing visual hierarchy, and
maintaining consistency across various design elements.
So, The grid system is a fundamental topic of the design. Without Grids the
content can be messy and very confusing. Hopefully this article can help you
get the basic idea of the grid system.
The main elements in the grid system are:
1. Columns
2. Spatial Zones
3. Margines
4. Modules
1.COLUMNS:
Columns, which are vertical containers, establish divisions within the live area
to contain content. They can have varying widths, even within a single grid,
to suit specific information needs.
2.SPATIAL ZONES:
Spatial zones are created by grouping modules together, forming distinct
areas that can consistently hold any type of content in a regular manner.
3.MARGINS:
Margins refer to the spaces of negative areas found between the edges of a
page and its content. They serve to define the live area, enabling designers
to direct the viewer's attention, establish areas of visual respite, or segregate
secondary information like running heads or folios.
4.MODULES:
Modules are the individual units of space that are separated by standard
intervals. When these units are repeated across the page, they create a
recurring pattern.
Following these rules and balancing the content on page will make your
design seamless, beautiful and easy to grasp.

Contenu connexe

Similaire à The Grid System: Importance of grid system in UI UX Design

Architectural Design.pptx
Architectural Design.pptxArchitectural Design.pptx
Architectural Design.pptxssuser8c0d24
 
ch6 ArchitecturalDesign (NTU)
ch6 ArchitecturalDesign (NTU)ch6 ArchitecturalDesign (NTU)
ch6 ArchitecturalDesign (NTU)Rida Sajid
 
Interaction Design
Interaction DesignInteraction Design
Interaction DesignGraeme Smith
 
Advantages and Disadvantage of table in react js-technical chamber.pdf
Advantages and Disadvantage of table in react js-technical chamber.pdfAdvantages and Disadvantage of table in react js-technical chamber.pdf
Advantages and Disadvantage of table in react js-technical chamber.pdfNishaadequateinfosof
 
Unit iv -Documenting and Implementation of Software Architecture
Unit iv -Documenting and Implementation of Software ArchitectureUnit iv -Documenting and Implementation of Software Architecture
Unit iv -Documenting and Implementation of Software ArchitectureDhivyaa C.R
 
Object oriented sad-5 part i
Object oriented sad-5 part iObject oriented sad-5 part i
Object oriented sad-5 part iBisrat Girma
 
ap assignmnet presentation.pptx
ap assignmnet presentation.pptxap assignmnet presentation.pptx
ap assignmnet presentation.pptxAwanAdhikari
 
IT6701-Information Management Unit 4
IT6701-Information Management Unit 4IT6701-Information Management Unit 4
IT6701-Information Management Unit 4SIMONTHOMAS S
 
Enviro grids geoportal
Enviro grids geoportalEnviro grids geoportal
Enviro grids geoportalKarel Charvat
 
Ch6 archtchure design in software en.pptx
Ch6 archtchure design in software en.pptxCh6 archtchure design in software en.pptx
Ch6 archtchure design in software en.pptxubaidullah75790
 
Sayed-Minhal-Principles of Beautiful Design
Sayed-Minhal-Principles of Beautiful DesignSayed-Minhal-Principles of Beautiful Design
Sayed-Minhal-Principles of Beautiful DesignSayed Minhal
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI DesignIvano Malavolta
 
MOD_Architectural_Design_Chap6_Summary.pdf
MOD_Architectural_Design_Chap6_Summary.pdfMOD_Architectural_Design_Chap6_Summary.pdf
MOD_Architectural_Design_Chap6_Summary.pdfTigabu Yaya
 
Information Architecture & Content Organization (User Interaction Design at...
Information Architecture & Content Organization   (User Interaction Design at...Information Architecture & Content Organization   (User Interaction Design at...
Information Architecture & Content Organization (User Interaction Design at...Itamar Medeiros
 

Similaire à The Grid System: Importance of grid system in UI UX Design (20)

Architectural Design.pptx
Architectural Design.pptxArchitectural Design.pptx
Architectural Design.pptx
 
ch6 ArchitecturalDesign (NTU)
ch6 ArchitecturalDesign (NTU)ch6 ArchitecturalDesign (NTU)
ch6 ArchitecturalDesign (NTU)
 
Interaction Design
Interaction DesignInteraction Design
Interaction Design
 
Advantages and Disadvantage of table in react js-technical chamber.pdf
Advantages and Disadvantage of table in react js-technical chamber.pdfAdvantages and Disadvantage of table in react js-technical chamber.pdf
Advantages and Disadvantage of table in react js-technical chamber.pdf
 
Ch6
Ch6Ch6
Ch6
 
Ch6
Ch6Ch6
Ch6
 
Unit iv -Documenting and Implementation of Software Architecture
Unit iv -Documenting and Implementation of Software ArchitectureUnit iv -Documenting and Implementation of Software Architecture
Unit iv -Documenting and Implementation of Software Architecture
 
Object oriented sad-5 part i
Object oriented sad-5 part iObject oriented sad-5 part i
Object oriented sad-5 part i
 
ap assignmnet presentation.pptx
ap assignmnet presentation.pptxap assignmnet presentation.pptx
ap assignmnet presentation.pptx
 
Lecture 6 se
Lecture 6 seLecture 6 se
Lecture 6 se
 
IT6701-Information Management Unit 4
IT6701-Information Management Unit 4IT6701-Information Management Unit 4
IT6701-Information Management Unit 4
 
Enviro grids geoportal
Enviro grids geoportalEnviro grids geoportal
Enviro grids geoportal
 
Ch6.ppt
Ch6.pptCh6.ppt
Ch6.ppt
 
Ch6 archtchure design in software en.pptx
Ch6 archtchure design in software en.pptxCh6 archtchure design in software en.pptx
Ch6 archtchure design in software en.pptx
 
Ch 6
Ch 6Ch 6
Ch 6
 
Sayed-Minhal-Principles of Beautiful Design
Sayed-Minhal-Principles of Beautiful DesignSayed-Minhal-Principles of Beautiful Design
Sayed-Minhal-Principles of Beautiful Design
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI Design
 
MOD_Architectural_Design_Chap6_Summary.pdf
MOD_Architectural_Design_Chap6_Summary.pdfMOD_Architectural_Design_Chap6_Summary.pdf
MOD_Architectural_Design_Chap6_Summary.pdf
 
Information Architecture & Content Organization (User Interaction Design at...
Information Architecture & Content Organization   (User Interaction Design at...Information Architecture & Content Organization   (User Interaction Design at...
Information Architecture & Content Organization (User Interaction Design at...
 
Ch6 - Architectural Design
Ch6 - Architectural DesignCh6 - Architectural Design
Ch6 - Architectural Design
 

Dernier

Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxAdelaideRefugio
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...Nguyen Thanh Tu Collection
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...Nguyen Thanh Tu Collection
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjMohammed Sikander
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsSandeep D Chaudhary
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...EADTU
 
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptxAnalyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptxLimon Prince
 
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSean M. Fox
 
Major project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategiesMajor project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategiesAmanpreetKaur157993
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaEADTU
 
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdfUGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdfNirmal Dwivedi
 
PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...
PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...
PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...nhezmainit1
 
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...Gary Wood
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....Ritu480198
 
Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17Celine George
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismDabee Kamal
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17Celine George
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code ExamplesPeter Brusilovsky
 

Dernier (20)

Mattingly "AI & Prompt Design: Named Entity Recognition"
Mattingly "AI & Prompt Design: Named Entity Recognition"Mattingly "AI & Prompt Design: Named Entity Recognition"
Mattingly "AI & Prompt Design: Named Entity Recognition"
 
Mattingly "AI and Prompt Design: LLMs with NER"
Mattingly "AI and Prompt Design: LLMs with NER"Mattingly "AI and Prompt Design: LLMs with NER"
Mattingly "AI and Prompt Design: LLMs with NER"
 
Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
 
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptxAnalyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
 
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
 
Major project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategiesMajor project report on Tata Motors and its marketing strategies
Major project report on Tata Motors and its marketing strategies
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdfUGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
 
PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...
PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...
PS-Policies-on-Enrolment-Transfer-of-Docs-Checking-of-School-Forms-and-SF10-a...
 
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....
 
Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in Hinduism
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 

The Grid System: Importance of grid system in UI UX Design

  • 1. THE GRID SYSTEM: IMPORTANCE OF LAYOUT IN UI UX The grid system holds immense importance in UI UX Design as it provides a structured framework for organising content, enhancing visual hierarchy, and maintaining consistency across various design elements. So, The grid system is a fundamental topic of the design. Without Grids the content can be messy and very confusing. Hopefully this article can help you get the basic idea of the grid system. The main elements in the grid system are: 1. Columns 2. Spatial Zones 3. Margines 4. Modules
  • 2. 1.COLUMNS: Columns, which are vertical containers, establish divisions within the live area to contain content. They can have varying widths, even within a single grid, to suit specific information needs. 2.SPATIAL ZONES: Spatial zones are created by grouping modules together, forming distinct areas that can consistently hold any type of content in a regular manner. 3.MARGINS: Margins refer to the spaces of negative areas found between the edges of a page and its content. They serve to define the live area, enabling designers to direct the viewer's attention, establish areas of visual respite, or segregate secondary information like running heads or folios. 4.MODULES: Modules are the individual units of space that are separated by standard intervals. When these units are repeated across the page, they create a recurring pattern. Following these rules and balancing the content on page will make your design seamless, beautiful and easy to grasp.