Web Design แบบ 50:50

  • : preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/www/virtual/macmuemai.com/kok/htdocs/includes/unicode.inc on line 345.
  • : preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/www/virtual/macmuemai.com/kok/htdocs/includes/unicode.inc on line 345.
  • : preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/www/virtual/macmuemai.com/kok/htdocs/includes/unicode.inc on line 345.
  • : preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/www/virtual/macmuemai.com/kok/htdocs/includes/unicode.inc on line 345.
  • strict warning: Non-static method view::load() should not be called statically in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/views.module on line 843.
  • strict warning: Declaration of views_plugin_display::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/plugins/views_plugin_display.inc on line 0.
  • strict warning: Declaration of views_plugin_display_block::options_submit() should be compatible with views_plugin_display::options_submit(&$form, &$form_state) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/plugins/views_plugin_display_block.inc on line 0.
  • strict warning: Declaration of views_plugin_display_page::options_submit() should be compatible with views_plugin_display::options_submit(&$form, &$form_state) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/plugins/views_plugin_display_page.inc on line 0.
  • strict warning: Declaration of views_handler_field_broken::ui_name() should be compatible with views_handler::ui_name($short = false) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_field.inc on line 0.
  • strict warning: Declaration of content_handler_field::options() should be compatible with views_object::options() in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/cck/includes/views/handlers/content_handler_field.inc on line 0.
  • strict warning: Declaration of views_handler_argument::init() should be compatible with views_handler::init(&$view, $options) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_argument.inc on line 745.
  • strict warning: Declaration of views_handler_argument_broken::ui_name() should be compatible with views_handler::ui_name($short = false) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_argument.inc on line 770.
  • strict warning: Declaration of views_handler_sort_broken::ui_name() should be compatible with views_handler::ui_name($short = false) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_sort.inc on line 0.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_handler_filter_broken::ui_name() should be compatible with views_handler::ui_name($short = false) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_handler_filter_many_to_one::init() should be compatible with views_handler_filter::init(&$view, $options) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_filter_many_to_one.inc on line 104.
  • strict warning: Declaration of views_handler_filter_term_node_tid::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/modules/taxonomy/views_handler_filter_term_node_tid.inc on line 303.
  • strict warning: Non-static method view::load() should not be called statically in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/views.module on line 843.
  • strict warning: Declaration of views_handler_filter_boolean_operator::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/www/virtual/macmuemai.com/kok/htdocs/sites/all/modules/views/handlers/views_handler_filter_boolean_operator.inc on line 0.

ช่วงไม่กี่วันที่ผ่านมา ปรับ 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

Subscribe

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