Grid System สำหรับนักออกแบบ UX/UI 👩🏻💻
เคยสงสัยมั้ยว่า Grid คืออะไร แล้ว Grid System คืออะไร วันนี้เราจะมาพูดถึง Grid System ที่ใช้ในงาน UX/UI กัน!
บทความนี้จะมาเล่าคร่าวๆเกี่ยวกับ Grid และ Grid system คืออะไร เป็นแบบไหน การใช้งานและตัวอย่างงานที่ใช้ grid system เป็นอย่างไร ซึ่งมีประโยชน์ๆมากในงานออกแบบไม่ว่าจะเป็นนักออกแบบเว็บหรือนักออกแบบกราฟฟิคที่จะต้องมี guideline ตัวช่วยในการจัดวางองค์ประกอบต่างๆให้ออกมาเป็นระเบียบสวยงาม
มาเริ่มกันที่ Grid คืออะไร?
Grid คือ เส้นที่ทำขึ้นมาเป็นตารางเพื่อช่วยในการจัดองค์ประกอบต่างๆของชิ้นงานที่เราออกแบบ แต่ก่อนที่เราจะไปถึงหัวข้อของ Grid System ที่ใช้ในงานออกแบบเว็บไซต์ เรามาทำความรู้จักกับส่วนประกอบของ Grid คร่าวๆกันก่อน
Grid ประกอบด้วยอะไรบ้าง?
- Column
คือ แถวที่อยู่ในตำแหน่งแนวตั้งของ Grid โดยจะมีขนาดพอดีตั้งแต่บนสุดถึงล่างสุด ของ Margins - Margins
คือ พื้นที่ว่างที่อยู่ข้างนอก Columns และ Rows โดยตัว Margins จะเป็นตัวกำหนดระยะห่างระหว่างขอบของ Artboard และ Element (ภายในเว็บ) - Rows
คือ แถวแนวนอนที่อยู่ใน Grid โดย Columns และ Rows ที่รวมกันอยู่ใน Grid จะเรียกว่า Modules - Modules
คือ ช่องที่เกิดจากการแบ่งเส้นของ Columns และ Rows - Spatial Zone
คือ การรวมตัวของ Modules ทั้งในแนวตั้งและแนวนอน เกิดเป็นพื้นที่ขนาดใหญ่ใน Grid - Gutter หรือ Gaps
คือ ช่องว่างสำหรับแบ่งแยก Rows และ Columns - Markers
เป็นส่วนที่อยู่มุมฝั่งใดฝั่งหนึ่งของ Header และ Footer โดยตัว Markers จะไว้ใช้ระบุหรือบอกตำแหน่งของเนื้อหาในทุกๆหน้า เช่น บอกจำนวนหน้าของหนังสือ หรือบอกชื่อของหนังสือ
นอกจากจากช่องและเส้นต่างๆของ Grid ที่เราใช้กันแล้ว Grid ยังแบ่งออกเป็น 4 ประเภทอีกด้วย ได้แก่
- Manuscript Grid
- Column Grid
- Modules Grid
- Hierarchical Grid
ใครสงสัยว่าแต่ละชื่อเป็นแบบไหนดูที่รูปด้านล่างได้เลยยย
Grid System คืออะไร?
Grid system หรือ ระบบกริด คือ โครงสร้างที่ประกอบด้วยเส้นแนวตั้งและเส้นแนวนอนมารวมกัน เพื่อจัดองค์ประกอบในงานออกแบบของเราให้มีความต่อเนื่อง (Consistency) และมีความสมดุล (Balance) ซึ่งการจัดรูปแบบองค์ประกอบที่ซ้ำๆกัน ตัว Grid system จะยิ่งช่วยให้นักออกแบบทำงานได้สะดวกและรวดเร็วยิ่งขึ้น
แล้วมันใช้ในการทำอะไรล่ะ?
การนำ Grid system มาเป็นตัวช่วยในการออกแบบ Website และ Application จะช่วยในการจัดการเนื้อหาและองค์ประกอบต่างๆในเว็บไซต์ให้มีความสมดุลและเป็นระเบียบ โดย Grid system ที่เป็นที่นิยมในการนำมาเป็นตัวช่วยในการออกแบบเว็บไซต์มีชื่อว่า Bootstrap
Layout ของตัว Bootstrap จะเป็น Layout แบบ Responsive ซึ่งเจ้าตัว Bootstrap จะแบ่งสัดส่วน Layout ของหน้าเว็บบน Desktop ออกเป็น 12 column, หน้าเว็บบน Tablet 8 column และในหน้าบน Mobile เป็น 4 column เพื่อให้รองรับได้ทุก Device และง่ายต่อการนำไปพัฒนาต่อโดยผู้พัฒนา (developer )
แนะนำเว็บไซต์ Grid system library: https://grid.kkuistore.com/ เว็บนี้จะรวบรวม Grid system สำหรับ UX/UI หลายแบบ แถมยังโหลดมาลองใช้ในงานได้ฟรีด้วยนะ!
นอกจากนี้ เรายังอยากแนะนำเทคนิค Grid System อีกแบบหนึ่งที่จะช่วยให้การจัดเรียงองค์ประกอบในเว็บให้สวยงามมากยิ่งขึ้น คือ 8-point Grid โดยเทคนิคนี้จะช่วยในการคำนวน เพิ่มหรือลด Padding และ Margin ของ Elements ต่างๆบนเว็บไซต์ หรือ Device อื่นๆให้หารด้วย 8 ลงตัว ซึ่งการออกแบบด้วยใช้ 8-point grid จะช่วยให้ระยะห่างระหว่าง Element มีความสมบูรณ์ต่อเนื่องกันมากยิ่งขึ้น อีกทั้งยังลดเวลาในการเขียนโค้ดแบบ Responsive และเพิ่ม Consistency ในงานดีไซน์เราอีกด้วย
ถ้าสนใจเกี่ยวกับเทคนิค 8-point Grid ลองไปอ่านรายละเอียดเพิ่มเติมได้ที่:
https://spec.fm/specifics/8-pt-grid?fbclid=IwAR1dxW3644hVDsiPhVGxv1ZTQp9wkVsVlsWpRI0vwpNvyCqubi1pAtgAT-w
ข้อดีในการออกแบบโดยใช้ Grid system
- สร้างมาตรฐานในการออกแบบให้มีความต่อเนื่องกัน (consistency)
ในการออกแบบ UI นั้น Grid system ถือเป็นสิ่งสำคัญอย่างมากในการจัดหน้า Layout ของเว็บไซต์ หรือ Device อื่นๆ ซึ่งการนำ Grid system มาช่วยในการจัด Layout นั้น จะทำให้ User Interface (UI) มีความเป็นระเบียบและต่อเนื่องกันไม่หลุดมากเกินไป - สร้างสมดุลให้กับตัวงาน UI
สิ่งสำคัญอีกอย่างหนึ่งในการออกแบบ User Interface (UI) คือสร้างสมดุลให้กับตัวงาน เช่น การเว้นระยะที่สม่ำเสมอและเท่ากัน จะทำให้ตัวงาน User Interface (UI) ออกมาสวยงาม และง่ายต่อนำไปพัฒนาต่อโดย Developer - ช่วยในการจัดลำดับความสำคัญขององค์ประกอบบน Website
ใช้ Grid system บอกถึงลำดับความสำคัญขององค์ประกอบบนเว็บไซต์ว่ามีความสำคัญมากน้อยแค่ไหน เช่น ส่วนไหนที่มีความสำคัญมาก ก็จะปรับให้มีขนาดที่ใหญ่ ส่วนที่มีความสำคัญน้อยก็จะปรับให้มีขนาดที่เล็กลง
การนำ Grid System มาใช้ในงานออกแบบไม่ว่าจะเป็น Graphic design หรือ UX/UI design นอกจากจะเป็น Guidline ที่ช่วยให้งานเรามีความเป็นระเบียบ สวยงาม และมีความต่อเนื่องกันแล้ว ยังบอกถึงความสำคัญขององค์ประกอบแต่ละอย่างในงานออกแบบของเราอีกด้วยนะ แต่ทั้งนี้ทั้งนั้น ความสวยงามของงานออกแบบก็ไม่จำเป็นจะต้องทำตรงตาม Grid system เสมอไปน้าาาา :–D
ขอขอบคุณทุกคนที่อ่านมาถึงตรงนี้ ถ้ามีคำแนะนำหรือติชมเพิ่มเติมสามารถ Comment บอกได้เลยนะคะ 🙇🏻♀
ติดตามช่องทางของพวกเราได้ที่! ด้านล่างได้เลย สำหรับบทความนี้ขอลาไปก่อน สวัสดีค่า
