เทคนิคการสร้างเว็บไซต์

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

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

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

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

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

  1. Octwelve

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

  1. Cult foo

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

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

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

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

.

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

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

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

  1. Simplebits

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

  1. We Love WP

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

  1. We Break Stuff

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

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

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

.

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

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

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

  1. A list apart

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

  1. Mindtwitch

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

  1. Jogger

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

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

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

.

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

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

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

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

  1. Elitistsnob

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

  1. Mancub

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

  1. Designdisease

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

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

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

.

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

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

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

  1. Henry Jones

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

  1. I Love Typography

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

  1. Blogsolid

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

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

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

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *