วิธีใช้ Grid System ยังไงให้ ง่าย เป๊ะ ใครใครก็ทำได้

Update

วันนี้ grappik.com มีเทคนิคการใช้ Grid System ที่หลายคนไม่ค่อยเลือกจะงานกันอาจจะเพราะความยุ่งยาก วันนี้เราจะมานำเสนอเทคนิคการใช้ Grid System ที่ไม่ว่าคุณจะเป็นนักออกแบบมือใหม่แค่ไหนก็เลือกใช้งาน Grid System ได้ ซึ่งเป็นสิ่งที่เราอยากให้ไปให้ใช้กันดูเพราะมันจะทำให้งานของคุณดูสะอาด ดูเป๊ะ มากขึ้นเยอะ

1. ใช้ Grid กับข้อความเนื้อหา

ในหนึ่งหน้ากระดาษหรือ workspace ลองใช้Grid System มาใช้งานในการจัดเนื้อหาตัวหนังสือข้อความ มันจะทำให้ตัวหน้าสือมากมายที่ดูลายตา ออกมาดูสวยงามเป็นระเบียบได้อย่างง่ายดาย ส่วนใครจะวาง Grid System ยังไงอันนี้แล้วแต่คนออกแบบได้เลย แต่แนะนำว่าไม่ควรมีมากจนเกินไปเพราะมันจะลดความเป็นระเบียบ ความสะอาดตาลง

grid-1
Christine Wisnieski

จากตัวอย่างด้านบนจะเห็นว่าผู้ออกแบบเลือกใช้ Grid System มาจัดในส่วนของเนื้อหาทั้งข้อความและภาพทำให้งานออกมาดูเป็นระเบียบ สะอาดตาอ่านง่าย ข้อนี้ถือว่าเป็นพื้นฐานที่ทุกคนสามารถนำไปใช้งานได้เลย

 

2. ใช้ Grid กับระยะบรรทัดข้อความ

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

grid-2-1
ข้อความเมื่อใช้ Grid
ข้อความเมื่อไม่ใช้ Grid
ข้อความเมื่อไม่ใช้ Grid
http://www.webdesignstuff.co.uk/
http://www.webdesignstuff.co.uk/

ตัวอย่างด้านบนเราจะสังเกตุเห็นได้อย่างทันทีเลยว่าการใช้ Grid System จัดข้อความในแนวนอนก็มีส่วนช่วยเพิ่มความเป็นระเบียบได้มาก

 

3. ใช้ Grid System ทำให้ทำงานกับองค์ประกอบอื่นง่ายขึ้น

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

grid-3

จะเห็นได้ว่าการจัดย่อหน้าให้ตรงกับ Grid System ก็เป็นเรื่องสำคัญ เพียงนำ Grid System มาใช้ก็สามารถใส่องค์ประกอบอื่นเข้าไปได้โดยที่งานยังดูเป็นระเบียบ

 

4.  สร้างสมดุลให้กับงาน

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

grid-4
Maan Ali

 

5.  แบ่งเลเอาท์เป็นสัดส่วนได้ดี

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

Screen Shot 2558-11-11 at 2.45.28 PM
Grid System ของเว็บ thairath

 

Screen Shot 2558-11-11 at 2.48.42 PM
Grid System ของเว็บ sanook.com

 

นอกจากเรื่องของเว็บไซต์แล้ว Grid System ใช้แบ่งเลเอาท์งานอื่นๆ ได้ด้วย

grid-5
Mike Collinge

 

6. ใช้จัดลำดับความสำคัญขององค์ประกอบ

Grid System ใช้จัดลำดับความสำคัญขององค์ประกอบได้แบบง่ายๆ คือสิ่งไหนอยากให้สำคัญหรือโดดเด่นก็แค่ปรับขนาดขององค์ประกอบนั้นให้มีขนาดที่ใหญ่ขึ้นนั่นเอง

nasa
nasa

 

7. จุดตัด 9 ช่อง ช่วยวางองค์ประกอบรูปภาพ

หลายคนคงรู้จักกับจุดตัด 9 ช่องหรือสัดส่วนทองคำ หรือ Golden Ratio สามารถอ่านบทความเกี่ยวกับ Golden Ratio ได้ที่นี่เลย เป็นจุดที่เมื่อนำองค์ประกอบหลักไปวางแล้วจะโดดเด่นลงตัว สวยงามมากที่สุดนั่นเอง

shutterstock
shutterstock
grid-7-2
shutterstock

 

เรียบเรียงโดย Grappik.com

ขอบคุณข้อมูลบางส่วนจาก canva.com