Web Design แบบ 50:50

ช่วงไม่กี่วันที่ผ่านมา ปรับ theme ของ blog ตัวเองใหม่ อยากใช้สีน้อย ๆ อ่านง่าย ๆ

มีคนทักว่าเว็บที่ผมทำชอบใช้สีน้อย ๆ โทนเดียว เห็นผลในเรื่องนี้คือผมไม่อยากให้เว็บดูรก และกวนสายตาเวลาอ่าน เพราะเท่าที่ผมสังเกตเวลาทั้งที่อ่านเว็บตัวหนังสือเยอะ ๆ อย่างในแมคมือใหม่ หรือเว็บอื่น ๆ การใช้สีน้อย ๆ ช่วยลดความสับสนในการนำสายตาลงได้ และช่วยให้อ่านได้สบายขึ้น :)

50:50

50
ภาพ mockup เว็บต้นแบบ ที่ผมแบ่งเนื้อหาออกเป็นอย่างละครึ่งในตอนกลางของเว็บ

ทีนี้ก็มาถึง theme ใหม่นี้ ผมเอา side bar อันบะเอ้มด้านข้างออก แล้วจับเนื้อหาเดิมในนั้นไปอยู่ด้านล่างแทน เพราะมันทำให้ blog ที่ไม่ค่อยมีอะไรอยู่แล้วดูรก(แรก ๆ ก็รู้สึกดีว่าเว็บดูแน่น :P) และดูเหมือนผมคนเดียวที่ได้ใช้คอยตามว่ามี comment หรือมี spam เข้ามาในเว็บบ้างหรือเปล่าเท่านั้นเอง ผมเลยจับไปไว้ด้านล่าง แต่คงส่วนที่เป็นเนื้อหาทางด้านซ้ายเอาไว้เท่าเดิม

ผมชักชอบการแบ่งสัดส่วนหน้าเว็บแบบครึ่ง ๆ

ที่เริ่มเดิมทีเอามาจากการออกแบบ แมคมือใหม่ ที่มีที่มาค่อนข้างยาว แต่สรุปสั้น ๆ คือผมแบ่งความสำคัญของเนื้อหาของหน้าแรกในแมคมือใหม่ออกเป็นสองส่วน และให้น้ำหนักพอ ๆ กัน มันเลยเป็นที่มาว่าทำไมผมแบ่งครึ่ง ๆ แบบ 50:50 (ความกว้างของเนื้อหาในด้านซ้าย = ความกว้างของเนื้อหาในด้านขวา)

ผมคิดว่านักออกแบบส่วนใหญ่ไม่ทำตรงนี้ เพราะส่วนใหญ่แล้วนักออกแบบเว็บจะให้ความสำคัญไปที่เนื้อหามาก่อนส่วนอื่น ๆ ตรงนี้เลยเป็นเหตุผลว่า เขาแบ่งส่วนแสดงเนื้อหาให้ใหญ่ หรือมีสัดส่วนที่มากกว่าข้อมูลอื่น ๆ ใน side bar (เช่น tag หรือ comment ใหม่ในเว็บ) ไม่ว่าจะแบ่ง 60:40 หรือ 70:30 หรืออื่น ๆ

อีกอย่าง ผมพบข้อดีของการแบ่งหน้าเว็บแบบครึ่ง ๆ หรือ 50:50 แบบนี้ว่า มันอ่านง่าย พิมพ์ง่าย และดูลงตัวกว่าแบ่งหน้าเว็บแบบ 60:40 หรือสัดส่วนที่ไม่เท่ากัน ที่ดูหนัก ๆ หรือว่าเอียงไปด้านใดด้านหนึ่งในหน้าเว็บ

แต่พอเอา side bar อีกครึ่งหน้าออกไปไว้ด้านล่างแทน กลายเป็นเอียงชิดซ้ายไปเลย :P

ตรงนี้ผมรับได้ แต่ ค้นพบความยากเพิ่มขึ้นมาอีกหนึ่งอย่าง คือทำไปทำมา blog นี้เลยไปมีหน้าตาคล้ายกับเว็บชื่อดังเว็บหนึ่งขึ้นมา ซึ่งผมไม่อยากให้เป็นแบบนั้น ตอนนี้เลยกำลังคิดหาทางใช้ element ต่าง ๆ อยู่เพื่อหลีกเลี่ยงความคล้ายนี้ (ผมไม่ตั้งใจนะ :))

ยิ่งพยายามยิ่งปวดหัว จนตอนนี้เลยเอาไว้เท่านี้ก่อน ยังคิดหาลู่ทางอื่น ๆ ไม่ออก และยิ่งหาทางยิ่งค้นพบว่า ยิ่งพยายามตัดทอนให้เหลือน้อยลงเท่าไหร่ ยิ่งต้องคิดและละเมียดละไมมากขึ้นเท่านั้น

ผมเป็นคนไม่ละเมียด แต่คิดเยอะ เลยมาลงที่สีน้อย ๆ แบบนี้ครับ :P

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Allowed HTML tags: <pre> <embed> <object> <blockquote> <img> <h1> <h2> <h3> <h4> <br> <hr> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • You can use BBCode tags in the text. URLs will automatically be converted to links.
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.

More information about formatting options

CAPTCHA
โปรดใส่ตัวอักษรตามภาพนี้ให้ถูกต้องนะครับ (มีไว้กัน spam)
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.

Subscribe

<-- คลิ๊กเพื่อ Subscribe blog ของผมได้จาก RSS FEED อันนี้ครับ