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