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

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

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

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

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

1. Octwelve

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

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

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

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

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

1. Simplebits

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

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

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

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

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

1. A list apart

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

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

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

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

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

1. Elitistsnob

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

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

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

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

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

1. Henry Jones

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

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

6. ส่วนแสดงความคิดเห็น(Comments)

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

ตัวอย่างส่วนแสดงความคิดเห็นที่ดี

1. Chris Shiflett

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

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

7. ส่วนท้ายของบทความ(Post’s Footer)

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

ตัวอย่างส่วนท้ายของบทความที่ดี

1. Freelanceswitch

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

1. ทำให้ส่วนท้ายบทความแตกต่างจากส่วนเนื้อหา เพื่อให้ผู้อ่านรู้ว่าทั้งสองส่วนนี้ไม่ไม่ใช่ส่วนเดียวกัน และยังช่วยให้ส่วนท้ายบทความเด่นขึ้น เทคนิคนนี้ทำได้โดยใช้สีพื้นหลังที่ต่างกัน
2. ตัดสินใจให้ได้ก่อนว่าจะเอาอะไรมาใส่ไว้ในส่วนท้ายบทความนี้บ้าง จะได้ไม่ต้องมาทำแล้วลบทิ้งและทำใหม่ ภายหลัง เป็นเหตุให้เสียเวลา
3. เนื้อหา ที่จะนำมาใส่ในส่วนนี้นั้น น่าจะต้องมี บทความที่คล้ายกัน (related posts) เพื่อช่วยให้ผู้อ่านไปยังเรื่องที่น่าสนใจคล้ายกับเรื่องนี้ได้

8. ส่วนท้ายของบล็อก(Footer)

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

ตัวอย่างส่วนท้ายของบล็อกที่ดี

1. Designshack

วิธีทำให้การออกแบบส่วนท้ายของบล็อกออกมาดูดี

1. ออกแบบให้ส่วนท้ายบล็อกตัดกับส่วนของเนื้อหาบล็อก เพื่อให้ผู้ใช้รู้ว่า ณ ตอนนี้เขาได้อยู่ที่ส่วนท้ายของบล็อกแล้ว
2. ใส่ ลิงค์เท่าที่คุณคิดว่าผู้เยี่ยมชมต้องการใช้ ไม่ควรใส่เรื่อยเปื่อย จับใส่จนรก ทำให้ผู้ใช้หาสิ่งที่ต้องการไม่เจอ สิ่งที่ไม่ควรนำมาใส่เช่น ความคิดเห็นล่าสุด
3. ออกแบบอย่างเรียบง่ายไม่ต้องฉูดฉาดเกินไป เน้นที่การใช้ประโยชน์

9. โฆษณา(Advertisements)

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

ตัวอย่างโฆษณาที่ดี

1. Copyblogger

วิธีทำให้การออกแบบโฆษณาออกมาดูดี

1. ถ้าคุณตั้งใจไว้ว่าจะเอาโฆษณามาแปะไว้ในบล็อก ในระหว่างการออกแบบบล็อกคุณจะต้องให้ความสำคัญกับมันด้วย เพื่อให้โฆษณาที่เอามาแปะ เข้ากับบล็อกได้อย่างลงตัว
2. โฆษณาที่ เป็นที่นิยมมาก คือ google’s adsense และโฆษณาขนาด 125 x 125 Google’s adsense เป็นโฆษณาที่ยืดหยุ่นอย่างมาก คุณสามารถเลือกขนาดได้ หรือ รูปแบบการแสดงผลได้ตามที่คุณต้องการ แต่โฆษณาขนาด 125 x 125 จะไม่ค่อยยืดหยุ่นสักเท่าไหร่ โฆษณาประเภทนี้มักจะนำไปใส่ไว้ด้านข้างบล็อก
3. หลัง จากที่ได้ตัดสินใจคร่าว ๆ ไว้แล้วว่าจะใช้โฆษณาแบบไหนก็ให้คุณหาตัวอยางโฆษณาแบบนั้น แล้วคัดลอกมาแปะไว้ในบล็อกคุณ แปะหลอก ๆ ไว้ก่อน เพื่อที่การออกแบบส่วนอื่น ๆ จะได้เข้ากับบล็อกของคุณได้อย่างลงตัว
4. อย่า ลืมออกแบบบล็อกให้สังเกตเห็นโฆษณาได้ง่าย แต่จะต้องไม่บดบังความสำคัญของเนื้อหา ด้านข้างของบล็อกเป็นส่วนที่เหมาะสมที่สุดที่จะนำโฆษณาไปแปะและ ส่วนที่แย่ที่สุดคือการนำโฆษณาไปไว้ในที่ ๆ ผู้เยี่ยมชมจะเข้าใจผิดคิดว่าเป็นเมนูของบล็อก

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

ขอขอบคุณ :