การสร้าง Blog !!!

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

• ส่วนหัว(Header)
• ส่วนเนื้อหา(Content Area)
• เมนูหลัก(Primary Navigation)
• เมนูรอง(Secondary Navigation)
• หัวเรื่อง(Headlines)
• ส่วนแสดงความคิดเห็น(Comments)
• ส่วนท้ายของบทความ(Post’s Footer)
• ส่วนท้ายของบล็อก(Footer)
• โฆษณา(Advertisements)

1.ส่วนหัว(Header)

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

ตัวอย่างส่วนหัวที่ดี

1. Octwelve

Octwelve เป็นตัวอย่างที่ดีของการใช้ตัวอักษรที่สวยงาม ในส่วนหัวเพื่อทำให้ส่วนหัวแตกต่างจากส่วนอื่น ๆ ของบล็อกอย่างเห็นได้ชัด และยังทำให้คุณรู้ว่าบล็อกนี้มีเนื้อหาเกี่ยวกับอะไร
2. Cult foo

ผมชอบส่วนหัวของ Cultfoo ตรงที่รูปภาพทะลุออกมาจากกรอบ ที่เดิมทีจะเป็นกรอบโค้งและกรอบเหลี่ยม การออกแบบแบบนี้เรียกร้องความสนใจให้บล็อกได้เป็นอย่างดีทีเดียว
3. Darkmotion

จุดเด่นของ darkmotion คือ การออกแบบส่วนหัวที่ได้อารมณ์มาก ดูแล้วสนุกสนานรื่นเริง

วิธีทำให้การออกแบบส่วนหัวออกมาดูดี

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

.

2. ส่วนเนื้อหา(Content Area)

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

ตัวอย่างส่วนเนื้อหาที่ดี

1. Simplebits

ส่วนเนื้อหาของ Simplebits ดีที่อ่านง่ายและแยกลิงค์ออกจากส่วนของเนื้อหาได้อย่างชัดเจน แต่มันไม่เรียกร้องความสนใจหรือไม่ตื่นตาตื่นใจสักเท่าไหร่ ออกแนวเรียบง่าย
2. We Love WP

ปัญหาใหญ่ในการออกแบบพื้นหลังสีทึบคือยากต่อการอ่าน แต่ถ้าหากทำให้ดีแล้วจะดูสวยงามมาก WeLoveWP ใช้สีน้ำตาลอ่อนจึงไม่ตัดกับพื้นหลังที่ออกทึบมากเท่าไหร่ ทำให้อ่านง่าย
3. We Break Stuff

ผมชอบการผสมผสานรูปแบบลิงค์ระหว่างเส้นใต้ที่เป็นจุด ๆ กับสี ทำให้ดูดี

วิธีทำให้การออกแบบส่วนเนื้อหาออกมาดูดี

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

.

3. เมนูหลัก(Primary Navigation)

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

ตัวอย่างเมนูหลักที่ดี

1. A list apart

AList Apart เป็นตัวอย่างที่ดีตัวอย่างหนึ่งในการนำเมนูหลักไว้ด้านบน
2. Mindtwitch

Mindtwitch ใช้การความแตกต่างของพื้นผิวแสดงทำให้เห็นชัดเจนว่าเป็นเมนูหลัก
3. Jogger

เมนูหลักของ Jogger เรียบง่าย และทำได้ง่าย แต่มันสื่อสารออกมาได้อย่างชัดแจ้ง และยังกลืนเข้ากับส่วนอื่น ๆ ได้อย่างแนบเนียน

วิธีทำให้การออกแบบเมนูหลักออกมาดูดี

• จำนวนลิงค์ในส่วนเมนูหลักไม่ควรมีเยอะเกินไป ทั้งนี้ไม่ได้มีกฏเกณฑ์ตายตัวว่าจะต้องมีไม่เกินกี่ลิงค์ แต่โดยทั่วไปแล้วไม่ควรเกิน 6-7 ลิงค์
• ส่วนของเมนูหลักควรสงวนไว้ให้ เฉพาะลิงค์ที่ไปสู่หน้าหลักของส่วนอื่น ๆ ของบล็อก โดยที่หน้านั้นสามารถพาผู้เยี่ยมชมไปสู่ส่วนย่อยต่าง ๆ(เมนูรองนั่นเอง) ได้อีก
• ตัวอย่างเมนูหลักที่เห็นได้ทั่วไปคือ การติดต่อ(contact) เกี่ยวกับเรา (about) คุณสมบัติ/คุณลักษณะของเมนูหลัก ขึ้นอยู่กับว่า คุณออกแบบโครงสร้างบล็อกของคุณอย่างไร และ อะไรที่คุณต้องการให้ผู้เยี่ยมชมบล็อกของคุณสนใจ

.

4. เมนูรอง(Secondary Navigation)

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

ตัวอย่างเมนูรองที่ดี

1. Elitistsnob

ผมชอบที่ส่วนด้านข้างเด่นชัด แยกออกมาจากส่วนอื่น ๆ ทำให้ผู้เยี่ยมชมสามารถมองหาได้ง่าย
2. Mancub

ชอบที่ส่วนด้านข้างผุดออกมาจากเนื้อหา
3. Designdisease

Design Disease ใช้สีส้มทำให้ส่วนข้างเด่นกว่าส่วนอื่น ๆ

วิธีทำให้การออกแบบเมนูรองออกมาดูดี

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

.

5. หัวเรื่อง(Headlines)

หัวเรื่องของแต่ละบทความมีไว้เพื่อดึงดูดความสนใจผู้อ่าน และยั่วเย้าให้อ่านเนื้อหาทั้งหมดในที่สุด การจะทำเช่นนี้ได้ หัวเรื่องของคุณจะต้องเด่น โดยสามารถทำได้หลากหลายวิธี

ตัวอย่างหัวเรื่องที่ดี

1. Henry Jones

Henry Jones เป็นตัวอย่างการออกแบบหัวเรื่องที่ดูเรียบง่ายมาก ๆ แต่ถึงจะเรียบง่ายมันก็สามารถดึงความสนใจมาสู่หัวเรื่องได้ อาจจะด้วยการใช้ไอคอนแปะไว้กับวันที่ และจำนวนความคิดเห็น ที่อยู่ถัดลงมาจากหัวเรื่อง
2. I Love Typography

ตัวอย่างนี้ใช้สีสันและแบบตัวอักษรแสดงให้เห็นถึงความคิดสร้างสรรค์ ยั่วยวนใจผู้เยี่ยมชม
3. Blogsolid

Blogsolid ใช้ยุทธวิธีในการดึงดูดความสนใจผู้เยี่ยมชมมาสู่หัวเรื่อง ด้วยการนำรูปภาพงานศิลปอันงดงามมาวางไว้ใกล้กับหัวเรื่อง

วิธีทำให้การออกแบบหัวเรื่องออกมาดูดี

• วิธีที่ง่ายที่สุดเลยก็คือ กำหนดสีให้หัวเรื่องแตกต่างจากตัวเนื้อหา
• ใช้แบบอักษรให้แตกต่างจากเนื้อหา โดยทั่วไปนิยมใช้ แบบอักษร serif กับหัวเรื่อง และ แบบอักษร non-serif กับส่วนเนื้อหา
• ขนาดตัวอักษร หัวเรื่องไม่ควรใช้ขนาดตัวอักษรที่ใกล้เคียงกับเนื้อหา (ถึงแม้จะใหญ่กว่าเล็กน้อยก็ตาม) เพราะจะทำให้ผู้อ่านแยกแยะได้ยากว่าอันไหนคือหัวเรื่อง
• วิธีที่จะทำให้หัวเรื่องเด่นมาแต่ไกล ทำได้โดยเอาวันที่โพสบทความใส่เข้าไปบริเวณเดียวกับหัวเรื่องด้วย