📘
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
  • Design System āļ„āļ·āļ­āļ­āļ°āđ„āļĢ ?
  • āļ—āļģāđ„āļĄāļ•āđ‰āļ­āļ‡āđƒāļŠāđ‰ Design System ?
  • Design Principles
  • Style Guide
  • Component
  • Share Language
  • āđāļŦāļĨāđˆāļ‡āļ­āđ‰āļēāļ‡āļ­āļīāļ‡ 📑

Was this helpful?

  1. Web Design

Design System

#HelloWebDesign #HelloErmine #HelloWorld2021

Previousāļ‚āđ‰āļ­āļ”āļĩāđƒāļ™āļāļēāļĢāļ­āļ­āļāđāļšāļšāđ‚āļ”āļĒāđƒāļŠāđ‰ Grid SystemNextDesign System āļ„āļ·āļ­āļ­āļ°āđ„āļĢ ?

Last updated 3 years ago

Was this helpful?

Design System āļ„āļ·āļ­āļ­āļ°āđ„āļĢ ?

āļ—āļģāđ„āļĄāļ•āđ‰āļ­āļ‡āđƒāļŠāđ‰ Design System ?

Design Principles

Style Guide

Component

Share Language

āđāļŦāļĨāđˆāļ‡āļ­āđ‰āļēāļ‡āļ­āļīāļ‡ 📑

Grid System āļ„āļ·āļ­āļ­āļ°āđ„āļĢ ?
āļ—āļģāđ„āļĄāļ•āđ‰āļ­āļ‡āđƒāļŠāđ‰ Design System ?
Design Principles
Style Guide
Component
Share Language
LogoDesign SystemHello World - Dolphin
https://natngarm.medium.com/āļŠāļģāļŦāļĢāļąāļšāļšāļ—āļ„āļ§āļēāļĄāđƒāļ™āļ§āļąāļ™āļ™āļĩāđ‰āđ€āļĢāļēāļˆāļ°āļĄāļēāđ€āļĨāđˆāļēāđ€āļĢāļ·āđˆāļ­āļ‡āļ‚āļ­āļ‡-design-systems-āļāļąāļ™āđāļšāļšāļžāļ·āđ‰āļ™āļāļēāļ™-āļ§āđˆāļēāļŠāļīāđˆāļ‡āļ™āļĩāđ‰āļ„āļ·āļ­āļ­āļ°āđ„āļĢ-fb5bf619fe2cnatngarm.medium.com
LogoDesign System: Scale āļ­āļĒāđˆāļēāļ‡āđ€āļ›āđ‡āļ™āļĢāļ°āļšāļšMedium
LogoDesign System āļ„āļ·āļ­āļ­āļ°āđ„āļĢ āļ—āļģāđ„āļĄāļ™āļąāļāļ­āļ­āļāđāļšāļšāļ•āđ‰āļ­āļ‡āļĢāļđāđ‰āļˆāļąāļGrappik
LogoDesign System āļ„āļ·āļ­āļ­āļ°āđ„āļĢ ? āļ—āļģāđ„āļĄāļšāļĢāļīāļĐāļąāļ—āļŦāļĢāļ·āļ­āļ­āļ‡āļ„āđŒāļāļĢāđƒāļŦāļāđˆ āđ† āļ–āļķāļ‡āđƒāļŦāđ‰āļ„āļ§āļēāļĄāļŠāļģāļ„āļąāļ ?Medium