กฎ 6 ข้อในการสร้างตารางเว็บไซต์

คำสำคัญ: กริด (Grids) คืออะไร “กริดคือเส้นที่วางเป็นตารางที่ใช้การทำงานเพื่อกำหนดขอบเขตในการออกแบบงานและจัดองค์ประกอบต่างๆ ไม่ว่าจะเป็นภาพหรือเนื้อหา ให้อยู่ในรูปแบบที่สวยงามตามต้องการ” เป็นต้น

ตารางเว็บไซต์คืออะไร

ตารางเว็บไซต์เป็นระบบสำหรับจัดระเบียบ Content (เนื้อหา) ในหน้าและจัดตำแหน่งและลำดับ ซึ่งเป็นโครงสร้างพื้นฐานหรือโครงกระดูกของ interface ผู้ใช้ของเรา โดยนักออกแบบมักจะใช้ Grids ของเว็บไซต์ในการตัดสินใจออกแบบและสร้างประสบการณ์ที่ดีแก่ผู้ใช้นั่นเอง

บทบาทของ Grids ในการออกแบบเว็บไซต์

ในการออกแบบเว็บไซต์ Grids ถูกใช้เพื่อแนะนำนักออกแบบที่เกี่ยวกับวิธีและตำแหน่งที่จะวางองค์ประกอบบนเพจ ซึ่งหลักเกณฑ์เหล่านี้รวมเอาระยะขอบ ช่องว่าง และคอลัมน์เข้าด้วยกัน ซึ่งให้กรอบที่ครอบคลุมและสอดคล้องกันสำหรับ Content ของหน้า

อย่างไรก็ตาม ไม่ว่าเส้น Grids จะปรากฏบนเว็บไซต์จริงหรือไม่ก็ตาม โครงสร้างพื้นฐานและ framework ช่วยให้นักออกแบบจัดการไม่เพียงแค่เค้าโครงทั้งหมดของหน้าจอเท่านั้น แต่ยังรวมถึงอัตราส่วนและสัดส่วนระหว่างแต่ละองค์ประกอบด้วย!

แนวทางปฏิบัติที่ดีที่สุดของการใช้ Grids ในการออกแบบเว็บไซต์

1. มารู้จักกับกายวิภาคของ Grids เรา

สำหรับ Grids ทั้งหมดในการออกแบบเว็บไซต์ ไม่ว่าจะเล็กหรือใหญ่ ง่ายหรือซับซ้อนเพียงใด มีองค์ประกอบทั่วไปที่กำหนดเป็นเค้าโราง Grids เช่น

1.1 Columns (คอลัมน์) : คอลัมน์ คือส่วนแนวตั้งที่ครอบคลุมความสูงของพื้นที่เนื้อหา และถือเป็น "องค์ประกอบหลัก" ของ Gridsซึ่งสิ่งพิเศษเกี่ยวกับคอลัมน์คือยิ่งมีคอลัมน์ใน Grids มากเท่าไหร่ Grids ก็จะมีความยืดหยุ่นมากเท่านั้น

1.2 Rows (แถว) : แถว คือส่วนแนวนอนของ Grids โดยการออกแบบเว็บมักจะละเลยบทบาทของแถวใน Grids อย่างไรก็ตามนี่ไม่ใช่สิ่งที่เราเรียกว่าแนวทางปฏิบัติที่ดีที่สุด กรุณาให้ความสำคัญกับแถวด้วย!

1.3 Modules (โมดูล) : โมดูลคือ หน่วยของพื้นที่ที่สร้างขึ้นจากจุดตัดของแถวและคอลัมน์ ถือเป็นแบบเอกสารสำเร็จรูปของเพจ เนื่องจากองค์ประกอบการออกแบบแต่ละรายการจะพอดีกับ (ข้อความ รูปภาพ ปุ่ม ฯลฯ) ลงในโมดูลที่สร้างโดยรูปแบบสี่เหลี่ยมในตาราง

1.4 Gutters (รางน้ำ) : รางน้ำคือ เส้นระหว่างคอลัมน์และแถวที่แยกแต่ละหน่วยเหล่านี้ ขนาดรางน้ำทั่วไปคือ 20px โดยบทบาทของรางน้ำคือการสร้างพื้นที่เชิงลบ (ไม่ว่าจะเล็กหรือใหญ่)

1.5 Margins (ระยะขอบ) : ระยะขอบคือ ช่องว่างด้านลบระหว่างรูปแบบและขอบด้านนอกของเนื้อหา เราอาจจะคิดว่าเป็น “ช่องว่างภายนอก” ก็ได้ไม่ผิด ซึ่งระยะขอบด้านข้างมักจะอยู่ที่ 20-30px บนอุปกรณ์เคลื่อนที่ และแตกต่างกันมากระหว่างเดสก์ท็อปและอุปกรณ์เคลื่อนที่

2. เลือกเค้าโครง Grids ที่เหมาะสม

แม้ว่าตามคำนิยามแล้วคำว่า Grids จะสื่อถึงโครงสร้างแบบสี่เหลี่ยมจัตุรัสอย่างเคร่งครัด แต่ก็ยังมี Grids ประเภทย่อยอีกหลายประเภท ซึ่งแต่ละประเภทมีกรณีการใช้งานเฉพาะในการออกแบบเว็บไซต์ ตัวอย่างการออกแบบ Grids ที่แสดงถึงประเภท Grids ที่กำลังพูดถึงดังนี้

2.1 ตารางลำดับชั้น: (จัดระเบียบ แต่ฟรีสไตล์) Grids แบบลำดับชั้น ซึ่งสามารถอธิบายได้ว่าเป็น “ฟรีสไตล์” คือ Grids ที่มีการวางองค์ประกอบ “โดยธรรมชาติ” ในคอลัมน์และแถวของ Grids ซึ่งหมายความว่าความกว้างของคอลัมน์ และความสูงของแถวจะแตกต่างกันไปทั่วทั้ง Grids

2.2 ตารางโมดูลาร์: (ความสมมาตรที่สมบูรณ์แบบ) ตารางโมดูลาร์ประกอบด้วยคอลัมน์และแถว ซึ่งมีประสิทธิภาพมากในการนำเสนอหลายสิ่งพร้อมกันเพื่อให้เข้าถึงง่าย โดยทั่วไปแล้ว Grids แบบโมดูลาร์จะใช้ในการออกแบบเว็บเมื่อมีหลายองค์ประกอบที่ต้องจัดระเบียบ

2.3 ตารางคอลัมน์: (แบ่งเท่าๆ กัน) ตารางคอลัมน์ประกอบด้วยหลายคอลัมน์ ส่วนใหญ่จะใช้เพื่อจัดองค์ประกอบหลายรายการลงในคอลัมน์ โดย Grids ของคอลัมน์สามารถมีได้เพียงสองคอลัมน์ โดยไม่จำกัดจำนวนที่แท้จริง

อย่างไรก็ตามเค้าโครง Grids มาตรฐานในการออกแบบเว็บประกอบด้วย 6, 9 หรือ 12 คอลัมน์ แต่ทั้งนี้ทั้งนั้นก็ขึ้นอยู่กับผู้ออกแบบจริงๆ ที่จะตัดสินใจว่าต้องการคอลัมน์จำนวนเท่าใด

2.4 บล็อกกริด: (ตัวเลือกคลาสสิกสำหรับโพสต์และบทความเดียว) บล็อก Grids นั้นสามารถอ้างถึงเป็น Grids แบบคอลัมน์เดียวหรือ Grids ต้นฉบับได้ ซึ่งถือได้ว่าเป็นโครงสร้าง Grids ที่ง่ายที่สุด และตารางบล็อกประกอบด้วยคอลัมน์เดียว และสามารถรวมองค์ประกอบเดียวหรือหลายองค์ประกอบที่จัดเรียงในแนวตั้งล้อมรอบด้วยระยะขอบ

3. การออกแบบที่ตอบสนอง

เมื่อเพจหรือไซต์ได้รับการออกแบบให้ตอบสนอง นั่นหมายความว่าเค้าโครงและเนื้อหานั้นสามารถปรับให้เข้ากับอุปกรณ์และความกว้างของเบราว์เซอร์ที่แตกต่างกันได้ ซึ่งในแง่ของเค้าโครง Grids หมายความว่า เมื่อขนาดหน้าจอเปลี่ยนไปจำนวนคอลัมน์ก็เช่นกัน และแน่นอนว่าความกว้างของคอลัมน์ก็เช่นกัน แต่อย่างไรก็ตาม ยังมีความแตกต่างโดยธรรมชาติระหว่าง Grids การออกแบบปกติและ Grids ตอบสนอง เป็นต้น

4. สร้างพื้นที่ว่างสำหรับพื้นที่สีขาว

สำหรับในฐานะผู้สร้างเว็บ เรามักทราบดีว่าพื้นที่สีขาวมีบทบาทสำคัญเพียงใดในรายละเอียดการออกแบบ เช่น ความสามารถในการอ่านลำดับชั้นข้อมูล, ความสามารถในการปรับใช้ขนาด, ช่องว่างทั่วๆ ไปรอบๆ และระหว่างองค์ประกอบการออกแบบ

และด้วยความสำคัญอย่างยิ่งในการออกแบบ layout จึงสมเหตุสมผลที่พื้นที่สีขาวเป็นส่วนหนึ่งโดยกำเนิดของ Website และ Grids สำหรับเค้าโครงโดยพื้นฐานแล้ว เค้าโครง Grids ไม่ได้ถูกกำหนดโดยขนาดของคอลัมน์และแถวเท่านั้น แต่ยังกำหนดตามความกว้างและความสูงของช่องว่างสีขาวที่อยู่ระหว่างนั้นด้วย หรือที่เรียกว่าระยะห่าง

5. อัตราส่วนทองคำ

สำหรับนักออกแบบหลายคนใช้แนวคิดที่เรียกว่าอัตราส่วนทองคำเมื่อต้องการปรับปรุงขนาดความสมดุลและเค้าโครง การออกแบบ Grids ซึ่งโดยพื้นฐานแล้วอัตราส่วนทองคำคือสัดส่วนที่เท่ากับ 1.6180 ตามอัตราส่วนทองคำคือสิ่งที่เรียกว่าสี่เหลี่ยมผืนผ้าทองคำ โดยเป็นสี่เหลี่ยมผืนผ้าที่มีความยาว 1.6180 เท่าของความกว้าง

นั่นหมายความว่าหากความกว้างเป็น 100px ความยาวจะเป็น 161.80px โดยสิ่งนี้จะใช้กับ…

ความกว้างและความยาวของรูปภาพ
วัตถุหรือรูปร่างที่วางติดกัน
สำหรับการก่อตัวของรูปร่างหรือองค์ประกอบเดียว

6. ปฏิบัติตามกฎ 3 ส่วน

กฎข้อที่ 3 เป็นอีกหนึ่งเทคนิคการออกแบบเว็บไซต์ที่ช่วยให้นักออกแบบสร้าง Grids layout และการวางรูปภาพที่มีความสมดุลทางสายตา โดยเทคนิคนี้วางซ้อนทับแบบ Grids ที่แบ่งพื้นที่การออกแบบออกเป็นสามส่วน ทั้งในแนวนอนและแนวตั้ง

อย่างไรก็ตาม ในการออกแบบเว็บไซต์ นักออกแบบมักจะใช้กฎสามส่วนเพื่อกำหนดการตัดสินใจเกี่ยวกับกริดและเค้าโครงที่สำคัญที่สุด

หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้อ่านได้ไม่มากก็น้อย เกี่ยวกับการเรียนรู้ว่า Grids การออกแบบเว็บไซต์คืออะไร รวมถึงกริดประเภทต่างๆ ทั้งหมด

และสุดท้าย วิธีการใช้และเวลาที่จะใช้นั้น จะเพิ่มพูนทักษะของเราในฐานะนักออกแบบเว็บไซต์ ซึ่งจะส่งผลต่อการออกแบบเว็บไซต์ทั้งหมดที่เราสร้างขึ้นนับจากนี้เป็นต้นไป

“ถ้าหากผิดพลาดประการใดต้องขออภัยไว้ ณ โอกาสนี้ด้วยครับ”