Web design : เบื้องหลังการออกแบบ kok's blog ใหม่

ได้มีโอกาสทำ blog ตัวเองใหม่ และได้เขียนถึงไปเมื่อเร็ว ๆ นี้ มาคราวนี้จะเขียนเบื้องหลังของการออกแบบ theme ใหม่ โดยลงในรายละเอียดมากขึ้น หวังว่าน่าจะเป็นประโยชน์สำหรับ web designer ทั่วไป หรือผู้ที่ทำงานเกี่ยวกับ drupal theme นะครับ

ที่มา

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

ภาพด้านบนเป็นเว็บอันเก่าที่เคยเป็นอยู่ ผมเริ่มต้นการออกแบบใหม่มาได้สักประมาณสองอาทิตย์กว่า ๆ ที่แล้ว โดยเปลี่ยนเอาบนเว็บสด ๆ นั่นล่ะ ไม่ได้ดึงเว็บลงมาทำในเครื่องแต่อย่างใด - เอาเร็วเข้าว่า เพราะไม่ได้แต่ะต้องส่วนอื่น แก้แค่ theme จนแก้ไปแก้มา ก็ได้ออกมาอย่างที่เห็นในปัจจุบัน โจทย์แรกเร่ิมของผมมีประมาณนี้

1. ทำ theme ใหม่โดยที่ไม่ต้องปรับเว็บเดิมมากนัก
2. หาทางจัดการกับข้อมูลบางส่วนของเว็บ ทำให้เว็บดูโล่งขึ้น
3. ใช้สีให้น้อยลง เหลือน้อยที่สุดเท่าไหร่ยิ่งดี
4. อยากได้ layout เก๋ ๆ ไม่เหมือน blog ทั่วไป ไม่อยากให้มี sidebar หรือข้อมูลรก ๆ ด้านข้าง
5. ปรับรูปแบบ layout ใหม่ ให้เหมาะกับการเขียน blog ในแบบที่ผมอยากจะเขียน

หน้าตาเว็บที่สำเร็จแล้ว

หน้าตาเว็บแบบใหม่นี้มีที่มาจากผมชอบสีน้อย ๆ เป็นทุนเดิม และเว็บใหม่นี้ผมตั้งใจว่าเป็นเว็บที่ผมจะเอาไว้เก็บเรื่องราวที่ผมเห็นว่าสำคัญ ดังนั้นรายละเอียดอื่น ๆ เป็นรอง + อยากเน้นให้เป็น blog มากขึ้นด้วย หน้าตาของเดิมเหมือนเว็บรวมอะไรสักอย่าง ดูรกไปหมด :P

ผมเลยตัดให้ใช้สีน้อยที่สุด แล้วเอาส่วน head ที่เดิมเป็นสีจัด ๆ ออก เอาให้เรียบเท่ากันทั้งหน้าเว็บ ดูโล่งขึ้น เอาเมนูตัวใหญ่ ๆ ทำให้เหลือเรียงกันพอดีกับความกว้างของหน้าเว็บในส่วนของ content เพื่อให้ดูเรียบร้อย และเพิ่มความกว้างของ content เป็น 550 pixel เพื่อไม่ให้ดูแคบเกินไป

ส่วน teaser

ผมแบ่งส่วน teaser ออกเป็นสองส่วน คือส่วน meta และส่วนเนื้อหา

ส่วน meta เป็นข้อมูลที่ผมเอาไว้ดูคนเดียว เอาไปอยู่ด้านซ้าย ผมเลยย้ายเขาไปไว้รวมกันแล้วทำสีหม่น ๆ กลืนไปกับพื้นหลัง แล้วทำสีของโพสให้ดูเด่นขึ้นมาแทน เวลาอ่านจะได้กวาดตาบนลงล่างในทีเดียว ไม่มีข้อมุล meta/tag/details อื่น ๆ คั่น

ผมใช้ขนาดของตัวหนังสือแยกสัดส่วนของโพสออกจากกัน ด้วยใจที่อยากใช้สีให้น้อยที่สุด การจะทำให้อ่านแล้วแยกได้ว่าอะไรแตกต่างจากอะไรทำได้ไม่ง่ายนัก ที่พอจะช่วยได้คือ ไม่ขีดเส้นใต้ หรือทำตัวหนังสือเอียง/หนา ก็ต้องเล่นกับขนาดตัวหนังสือ ผมเลยเลือกที่จะใช้ขนาดตัวหนังสือที่ใหญ่ผิดปรกติในส่วนของ title ครับ

สีใช้สีโทนน้ำตาล - เทา ผมชอบโทนสีนี้ ก็ปรับมาเรื่อย ๆ แต่มาลงที่สีโทนนี้เพราะว่าอ่านสบายตาดี

Recent Post

ส่วน recent post นี้จะเป็นส่วนโพสย้อนหลังที่ยังไม่เก่ามาก ผมเลยจับขึ้นหน้าแรกเอาไว้จะได้ไล่หาได้ง่าย ๆ ก็แยกส่วนวันที่มาไว้ทางด้านซ้าย จะได้ช่วยให้แยกโพสแต่ละอันออกจากกันได้ส่วนนึง ตรงส่วนนี้มี detail ของแต่ละโพสบอกไว้ด้านใต้ ผมทำเอาไว้นานแล้ว เลยไม่ได้ปรับ เพราะไม่ใช่ส่วนที่ผมอยากจะเน้นเป็นหลัก เลยปล่อยเอาไว้เหมือนเดิม

ส่วน footer

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

สรุป

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

หวังว่าจะเป็นประโยชน์นะครับ

ก๊อก