สวัสดีครับพอดีผมได้ไปอ่านบทความของ 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