Get In Touch
[email protected]
Th: +6620263180

ออกแบบเว็บไซต์ด้วย Grid System

แบ่งหน้าจออย่างมืออาชีพด้วย Grid System

เคล็ดลับในการออกแบบเว็บไซต์ที่ดีมีองค์ประกอบหลายอย่าง ดังนี้

  • จะต้องเน้นความเรียบง่ายเป็นหลัก สามารถทำความเข้าใจได้ง่าย โดยจะเลือกในส่วนที่ต้องการที่จะนำเสนอจริงๆ ไม่ดูรกหน้าเว็บจนเกินไป ควรให้ความสะดวกสบายแก่ผู้ใช้งานได้อย่างดี คือจะต้องมีการแสดงผลได้ทุกระบบปฏิบัติการ ไม่ว่าจะเป็น เว็บเบราว์เซอร์ คอมพิวเตอร์ โน๊ตบุ๊คและโทรศัพท์ ที่สำคัญต้องมีความละเอียดในการแสดงผลและสามารถใช้งานได้โดยไม่มีปัญหา
  • ความสม่ำเสมอ ไม่สับสน คือรูปแบบของเว็บไซต์นั้นๆ ควรมีจะต้องมีรูปแบบ กราฟิก โทนสีการตกแต่งที่ไปในทางเดียวกัน หรือเพื่อให้ง่ายต่อการออกแบบก็ควรใช้เทมเพลต
  • สร้างความโดดเด่นให้กับเว็บไซต์เพื่อให้สามารถสื่อถึงจุดประสงค์หลัก ที่ต้องการจะนำเสนอให้สะท้อนถึงคุณลักษณะของ ธุระกิจหรือบริการนั้นให้ได้มากและเหมาะสมที่สุด
  • เว็บไซต์ที่ดีควรจะมีเนื้อหาที่ดี ครบถ้วน เพราะเนื้อหาเป็นปัจจัยหลักๆ ที่จะเป็นการนำเสนอให้ผู้คนเกิดความสนใจในเว็บไซต์ของคุณ และนอกจากนั้น เว็บไซต์ควรมีการอัพเดทเนื้อหาอยู่ตลอดเวลา เพื่อให้มีความทันสมัยอยู่เสมอ ที่สำคัญข้อมูลในเนื้อหาต้องมีความถูกต้อง ไม่เกินจริง
  • การออกแบบเว็บไซต์ ควรที่จะมีความคงที่ในการออกแบบ ด้วยการสร้างเว็บไซต์ด้วยแผนเดียวกัน มีการเรียบเรียงข้อมูลเนื้อหาอย่างรอบคอบ จะทำให้เว็บไซต์มีความน่าเชื่อถือ และดูมีคุณภาพ และจะสร้างความประทับใจให้กับผู้ใช้ได้เป็นอย่างดี
  • การแบ่งหน้าจอ (Grid System) ก็เป็นส่วนที่สำคัญอย่างมากในการออกแบบเว็บไซต์ (UI) จะทำให้หน้าเว็บไซต์ มีความดูเป็นระเบียบและต่อเนื่องกัน หรือเรียกได้ว่าเป็นการสร้างสมดุลให้หน้าเว็บไซต์เลยก็ว่าได้ เช่น การเว้นระยะห่างระหว่าง Image , Video , Content เป็นต้น โดยจะเป็นการเว้นระยะหางให้มีความสม่ำเสมอ จะทำให้หน้าตาของเว็บมีความสวยงาม และง่ายต่อการนำไปพัฒนาต่อ การใช้ Grid System ในการแบ่งหน้าจอจะเป็นการช่วยจัดลำดับความสำคัญของเนื้อหาภายในเว็บไซต์ให้สอดคล้องกับความต้องการของผู้ใช้ได้เป็นอย่างดี 
griddd

ที่มา : https://blog.nextzy.me/

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

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

การออกแบบที่ดีอยู่ที่วิธีในการจัดระเบียบองค์ประกอบของภาพและตัวหนังสือ (เนื้อหา Content) ให้อยู่ในตำแหน่งที่สัมพันธ์กัน ซึ่งจะเรียกว่าการออกแบบเลย์เอาท์ (layout) องค์ประกอบของการออกแบบเลย์เอาต์ คือ Grid ซึ่ง Grid เรียกได้ว่าเป็นส่วนที่สำคัญอย่างมากสำหรับการนำเสนอออกแบบเว็บไซต

Layout Design: The Parts of a Grid

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

grid

ที่มา : https://uxplanet.org/

การออกแบบเลย์เอาต์ในส่วนของ Grid นั้น มีองค์ประกอบอยู่หลายส่วน ดังต่อไปนี้

  • Format

พื้นที่ทั้งหมดสำหรับการออกแบบเว็บไซต์

format

ที่มา : https://visme.co/blog/layout-design/

  • Margin
    ระยะขอบหรือช่องว่า (Space) งระหว่างขอบของรูปภาพ หรือเนื้อหา Content
Margin

ที่มา : https://visme.co/blog/layout-design/

  • Flowlines
    เส้นแนวนอนที่มีไว้เพื่อแยกส่วนต่างๆ ของตัวหนังสือให้มีระยะห่างที่สม่ำเสมอกัน
flowlines

ที่มา : https://visme.co/blog/layout-design/

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

ที่มา : https://visme.co/blog/layout-design/

  • Spatial Zones or Regions
    เป็นกลุ่มของ Modules ที่อยู่ติดกันในพื้นที่แนวตั้งและแนวนอน ซึ่งจะเป็นช่องว่างที่ใหญ่ขึ้น เหมาะสำหรับการแสดงข้อมูลโดยใส่เป็นข้อความตัวอักษร หรือภาพ ที่มีความสำคัญเป็นพิเศษ
Spatial Zones or Regions

ที่มา : https://visme.co/blog/layout-design/

  •  Columns
    Modules ที่ต่อกันในแนวตั้ง ในหน้าออกแบบหนึ่งหน้าสามารถแบ่งคอลัมน์ได้กี่แถวก็ได้  ซึ่งช่องว่างระหว่างคอลัมน์ก็เรียกว่ากัตเตอร์ จะเหมาะสำหรับงานที่อยากให้คนอ่านง่าย เพราะมีความเป็นระเบียบของตัวหนังสือมากชึ้น ความกว้างของแต่ละคอลัมน์ก็ไม่จำเป็นต้องเท่ากันแล้วแต่ความต้องการของผู้ออกแบบ
Columns

ที่มา : https://visme.co/blog/layout-design/

 

  •  Rows
    Modules ที่ต่อกันในแนวนอน ซึ่งต่างจากคอลัมน์ที่ต่อกันในแนวตั้ง
Rows

ที่มา : https://visme.co/blog/layout-design/

  • Gutters
    ช่องว่างระหว่าง Modules ของหน้าสองหน้าที่ต่อกันโดยจะมี Gutters ขั้นระหว่างกลางของหน้านั้นๆ ซึ่งระยะห่างนั้นไม่ตายตัว แล้วผู้ออกแบบว่าจะจัดวางระยะห่างของ Modules อย่างไรให้เหมาะสมกับหน้าเว็บไซต์
Gutter

ที่มา : https://visme.co/blog/layout-design/

  • Markers
    เครื่องหมายที่มีไว้เพื่อกำหนดตำแหน่งบริเวณไว้สำหรับใส่ข้อความสั้นๆ เพื่อที่จะระบุหมวดหมู่หัวเรื่องที่เปลี่ยนไปเรื่อยๆ มักจะตำแหน่งเดียวในแต่ละหน้า เช่น Icon หน้า Homeซึ่งจะตรึงเป็น Header เอาไว้ ไม่ว่าคุณจะคลิกไปหน้าไหนของเว็บไซต์ หากคลิกที่ Icon Home ก็จะกลับมาที่หน้า Home
Markers

ที่มา : https://visme.co/blog/layout-design/

Types of Grid

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

 
  • Markers
    เครื่องหมายที่มีไว้เพื่อกำหนดตำแหน่งบริเวณไว้สำหรับใส่ข้อความสั้นๆ เพื่อที่จะระบุหมวดหมู่หัวเรื่องที่เปลี่ยนไปเรื่อยๆ มักจะมีตำแหน่งเดียวในแต่ละหน้า เช่น Icon หน้า Homeซึ่งจะตรึงเป็น Header เอาไว้ ไม่ว่าคุณจะคลิกไปหน้าไหนของเว็บไซต์ หากคลิกที่ Icon Home ก็จะกลับมาที่หน้า Home
Manuscript-Grid

ที่มา : https://visme.co/blog/layout-design/

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

ที่มา : https://visme.co/blog/layout-design/

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

ที่มา : https://visme.co/blog/layout-design/

  • Hierarchical Grid
    เป็นรูปแบบกริดที่ค่อนข้างจะซับซ้อนกว่ารูปแบบอื่นๆที่กล่าวมา จะประกอบไปด้วยโมดูลได้ทั้งที่มีขนาดรูปแบบที่เท่ากันและแตกต่างกันมาจัดวางในหน้าเดียวกัน และอาจจะมีกางวางทับซ้อนกันของโมดูลบางช่อง ซึ่งไฮราซิคัลกริดเป็นรูปแบบที่ค่อนข้างยากต่อการใช้งานที่จะจัดเลย์เอาท์ให้ลงตัว เคล็ดลับในการใช้ไฮราซิคัลกริด คือนำองค์ประกอบทั้งหมด เช่นรูปภาพและเนื้อหามานำลงช่องโมดูลแล้วค่อยๆ จัดวางปรับทีละองค์ประกอบไปเรื่อยๆจนดูแล้วว่าลงตัวนั่นเอง นิยมใช้ในการออกแบบโปสเตอร์เป็นอย่างมาก
Hierarchical Grid

ที่มา : https://visme.co/blog/layout-design/

สรุป การออกแบบเว็บไซต์ด้วย Grid System

Grid system หรือ ระบบกริด คือ โครงสร้างที่ประกอบด้วยเส้นแนวตั้งและเส้นแนวนอนมารวมกัน เพื่อจัดองค์ประกอบในงานออกแบบของเราให้มีความต่อเนื่อง (Consistency) และมีความสมดุล (Balance) ซึ่งการจัดรูปแบบองค์ประกอบที่ซ้ำๆกัน ตัว Grid system จะยิ่งช่วยให้นักออกแบบทำงานได้สะดวกและรวดเร็วยิ่งขึ้น

เราใช้คุกกี้เพื่อประสบการณ์การใช้งานที่ดีที่สุดบนเว็บไซต์