📘
HelloErmine
  • CONTENTS
  • Front-End
    • Setup environment
      • Visual Studio Code
      • Node.js
      • Yarn
      • Git
    • HTML
      • What is HTML?
      • What are Elements and Tags?
        • Close Elements
        • Empty Elements
      • What are Attributes?
        • Attributes
      • HTML Structure
    • CSS
      • What is CSS?
      • Selectors
      • Properties
      • Combinators
    • Bootstrap
      • What is Framework and Library?
      • What is Bootstrap?
      • Installation
      • Import
      • Different of Bootstrap in HTML and React
      • Bootstrap Layout
    • JavaScript
      • What is JavaScript?
      • Variables
      • Types
      • Operators
      • Conditions
      • Loops
      • Functions
      • Destructuring
      • Template Literals
      • DOM
      • Node.js
    • React
      • Create React Project
      • Introduction
        • JSX
        • export/import
      • Components
      • Props
      • Rendering
      • Handling Events
      • State
      • Hooks
        • useState
        • useEffect
    • Git
      • ทำความรู้จักกับ Version Control
      • Git คืออะไร ?
      • คำสั่งต่าง ๆ ของ Git
    • Styled-Components
      • What are styled-components
      • How to use styled-component
      • Styled-Components with props
  • Web Design
    • Website Elements
      • Accessibility
      • Speed
      • Attractiveness
      • Simplicity
      • Credibility
    • Copyright
      • ลิขสิทธิ์คืออะไร ?
      • สิ่งที่เป็นการละเมิดลิขสิทธิ์มีอะไรบ้าง ?
      • สิ่งที่ต้องคำนึงถึงในการออกแบบโลโก้
      • ประเภทลิขสิทธิ์ที่เจอบ่อย ๆ
      • การใช้ผลงานลิขสิทธิ์
      • รูปแบบลิขสิทธิ์ที่ใช้ฟรีแต่มีข้อยกเว้น
    • Ai (Adobe Illustrator)
      • Adobe Illustrator คืออะไร ?
      • สิทธิ์ให้การเข้าถึง Adobe Illustrator ใน KMUTT
      • RGB และ CMYK คืออะไร ?
      • วิธีใช้งาน Adobe Illustrator
        • ตั้งค่า ArtWork
        • เครื่องมือใน Adobe Illustrator
        • วิธีการ Save & Export ?
    • UX/UI
      • UX (User Experience)
        • กระบวนการออกแบบ UX
      • UI (User Interface)
        • Responsive Web Design
        • Layout Website
        • UI Design
      • ความแตกต่างระหว่าง UX กับ UI
    • Figma
      • เครื่องมือต่าง ๆ ใน Figma
      • ขั้นตอนการเริ่มทำงาน
    • Grid System
      • Grid คืออะไร ?
      • ประเภทของ Grid
        • Manuscript grid
        • Column grid
        • Modular grid
        • Hierarchical grid
      • Grid System คืออะไร ?
      • ข้อดีในการออกแบบโดยใช้ Grid System
    • Design System
      • Design System คืออะไร ?
      • ทำไมต้องใช้ Design System ?
      • Design Principles
      • Style Guide
      • Component
      • Share Language
  • GAME DESIGN
    • Good Game Elements
      • เป้าหมาย
      • ความลึก
      • ความซับซ้อน
      • ความสมดุล
      • ความท้าทาย
      • การเดินเกม
      • รางวัล
    • UX/UI
      • UX คืออะไร ?
      • UI คืออะไร ?
      • ความแตกต่างระหว่าง UI กับ UX
      • ขั้นตอนหลักของการออกแบบ UX / UI
    • Color & Background
      • ทฤษฎีสี
      • สีกับความรู้สึก
      • พื้นหลัง
      • วัตถุ
    • Character
      • Character คืออะไร ?
      • หลักการออกแบบตัวละคร
      • เส้นกับอารมณ์
      • สีกับ ความรู้สึก
      • การออกแบบตัวละครให้น่าสนใจ
      • หลักการพื้นฐานสำหรับการออกแบบ Character
    • Animation
      • Animation พื้นฐาน
      • การกระดอน
      • การสะบัด
      • การเดินและวิ่ง
      • Sprite Sheets
  • GAME DEVELOPMENT
    • Setup Environment
      • Node.js
      • Yarn
      • Visual Studio Code
      • GitHub Desktop
        • วิธีการสมัคร GitHub
        • การรับผลประโยชน์ของนักศึกษา
      • Cmder
    • Game Overview
      • Game คืออะไร ?
      • Game Computer 🎮
      • องค์ประกอบของเกม 🎲
      • 5 สิ่งที่เกมควรมี 🏆
    • Git Basic
      • สิ่งที่ควรรู้ก่อนใช้งาน Git
        • Repository
        • Clone
        • Unstaged & Staged
        • Commit
        • Push & Pull
        • Fetch
        • Merge commit
        • Conflict
        • Branch & Merge Branch
        • Git Flow
        • Fork
        • Pull Request
      • สรุปการใช้ Git แบบ Basic
    • Basic Phaser
      • Command Line Interface (CLI)
        • คำสั่ง Cmder
      • Game Engine
      • Framework
      • JavaScript
        • Variable
      • Phaser
      • Phaser Function
        • Preload()
        • Create()
        • Update()
        • ภาพรวมของ 3 Main methods
    • Object
      • ประเภทของ Object
        • Image
        • Sprite
        • TileSprite
        • Group Object
      • Object Collide
        • Collider
        • Overlap
        • การประยุกต์ใช้งาน Collider & Overlap
      • Layer
      • HitBox
      • การสร้าง Animation จาก Sprite sheet
    • Input
      • การรับ Input
        • Pointer input
        • Cursor input
        • Key input
      • Link Scene
        • การสร้างหน้า Scene
        • คำสั่งเปลี่ยนหน้า Scene
        • การสร้างปุ่มเปลี่ยน Scene
    • Timer Event
      • Timer Event คืออะไร ?
      • Loop คืออะไร ?
      • Time Object กับ Phaser 3
      • Members & Function
      • หลักการเขียน Timer Event
        • Monster Creation
        • Bullet
  • Infrastructure
    • Command-line interface
    • Version Control System
    • Protocol & DNS
    • NGINX
    • Docker
Powered by GitBook
On this page

Was this helpful?

  1. Web Design
  2. Grid System

ข้อดีในการออกแบบโดยใช้ Grid System

ข้อดีในการออกแบบโดยใช้ Grid System

  1. สร้างมาตรฐานในการออกแบบให้มีความต่อเนื่องกัน

  2. สร้างสมดุลให้กับตัวงาน UI

  3. ช่วยในการจัดลำดับความสำคัญขององค์ประกอบบน website

PreviousGrid System คืออะไร ?NextDesign System

Last updated 3 years ago

Was this helpful?