สวัสดีครับพอดีผมได้ไปอ่านบทความของ creativebloq เขาพูดถึงเรื่องของการออกแบบเว็บด้วย Golden Ratio (wiki) ซึ่งรายละเอียดเป็นการนำเอาลำดับฟีโบนักชีมาใช้ในการคำนวณอัตราส่วนของการจัดวางโครงสร้างเว็บเรา ถ้าต้องการหาเพิ่มเติมในเว็บก็มีเสริมาให้คือ Golden Mean, The Golden Section
ก่อนเราจะมาเริ่มก็ทำความเข้าใจก่อนว่าสิ่งที่เราจะมาใช้คืออะไรโดยเราจะออกแบบหน้าเว็บให้มีอัตราส่วนคือ 1:1.618 คล้ายๆกับเราจะกำหนดขนาดรูปหรือกราฟฟิคเราก็จะใช้ 16:9 หรือ 4:3 อะไนทำนองนี้ ที่วิธีการก็ง่ายๆ ครับเราต้องกำหนดมาก่อนว่าเราจะทำเว็บขนาดเท่าไร เช่น 960px
Use the Golden Ratio in Design
หลังจากที่เรากำหนดขนาดเว็บเราละก็จะมาทำการหาอัตราส่วนโดยเอา 1.618 มาเป็นตัวช่วยแบบนี้
- 960 px / 1.618 = 593 px //สำหรับส่วนที่เป็นเนื้อหา
- 960 px – 593 px = 367 px // สำหรับเมนูบาร์ และส่วนประกอบอื่นๆ
เท่านี้ก็รีบร้อยครับหวังว่าจะเข้าใจกันมีอะไรสงสัยก็ถามได้นะครับ แถมอีกนิดนึงครับสำหรับการใส่ขนาดอักษรควรเอาไรถึงจะดีมันก็จะคิดคล้ายๆ กันกับข้างบนแต่เราจะเอาขนาดมาตฐานเข้ามาช่วยคิดแบบนี้
- 960px / 16px = 60em //ขนาดโดยรวมที่เป็นตัวตั่ง
- 60 * 61.8% = 37 em //จากนั้นเอาตัวตั่งมาคูณด้วย 61.8% ก็จะเป็นขนาดอักษรของส่วนเว็บทางซ้ายดูตามรูปข้างบน
- 60em – 37 em = 23 em //เอามาหารเพื่อหาขนาดอักษรของเว็บทางขวา
พอเราเอามาคำนวณกลับด้านแล้วก็จtได้อัตราส่วนที่ใกล้เคียงกับ 1.618 พอดีถือว่าถูกต้องเพราะอ้างดิงจากตัวเลขตัวนี้
- 60 / 37 = 1.62
- 37 / 23 = 1.61
แถมด้วยวิธีการทำเป็นวีดีโอ
ที่มา creativebloq , vanseodesign
รูปภาพ Catphi’s Curiosities