ค้นหาทุกอย่างในเว็บครูบ้านนอก :
ชุมชนครู บุคลากรทางการศึกษา และนักเรียน แหล่งความรู้สำหรับครู นักเรียน ข่าวการศึกษา ห้องสมุดความรู้ทุกกลุ่มสาระการเรียนรู้ และความรู้ทั่วไป เผยแพร่ผลงานวิชาการ ที่นี่


ข่าวการศึกษา     ความรู้ทั่วไป     งานราชการ/รัฐวิสาหกิจ/บริการสังคมเรื่องราวจากสมาชิก  ▶ ข่าว/บทความ ▶ หน้าแรก

13 เทคนิคดีๆ....การออกแบบเว็บไซท์..ให้ดูดีและน่าสนใจ


เรื่องราวจากสมาชิก เปิดอ่าน : 7,134 ครั้ง
Advertisement

13 เทคนิคดีๆ....การออกแบบเว็บไซท์..ให้ดูดีและน่าสนใจ

Advertisement

  1. เรียบง่าย

    ความเรียบง่ายหมายถึงการใช้จำนวน pixel ตามที่ต้องใช้เพื่อให้สื่อสารสิ่งที่ต้องการให้ได้และในการสื่อสารนั้นก็ประกอบไปด้วย ข้อมูลหลัก hard data และ เนื้อหาที่ซ่อนอยู่ soft information

    ตัวอย่างของข้อมูล

    • Hard data - ข้อมูล สาระ เนื้อหาสำคัญที่ต้องการจะสื่อ เช่น ข่าว ราคาสินค้า ตารางเวลารถไฟ

    • Soft Information - ความรู้สึก บรรยกาศของหน้าเว็บ เปรียบเทียบได้กับความรู้สึกเมื่อแรกพบของผู้ชมที่มีต่อเว็บ ว่าน่าไว้ใจแค่ไหน จะเหมาะสมกับผู้ใช้หรือไม่

     

    ตัวอย่างที่ดี

    ดี เพราะ ละเอียด ตื่นตา น่าสนใจ แต่ก็เรียบง่ายในขณะเดียวกัน

    ตัวอย่างที่ไม่ดี



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

  2. เนื้อหาอยู่กึ่งกลาง

    จากที่เคยกล่าวถึงไปเมื่อบทความก่อนหน้านี้ evolution of css layout ว่าหน้าเว็บในปัจจุบันเริ่มถูกออกแบบให้มีเนื้อหาอยู่กึ่งกลาง ตอนนี้เราก็สรุปได้แล้วว่าการวางเนื้อหาไว้ตำแหน่งกลางหน้าเว็บนั้น เป็นหลักการออกแบบที่ดีของดีไซน์ยุค 2.0

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

  3. น้อยคอลัมน์

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

    ตัวอย่างที่ดี


    ดี เพราะ คอลัมน์ที่เลือกใช้ เป็นคอลัมน์ที่ได้คัดสรรค์เลือกมาอย่างดีแล้ว ว่าคอลัมน์นั้นๆเป็น คอลัมน์ที่จำเป็นต้องมี

    ตัวอย่างที่ไม่ดี


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

    ตัวอย่างที่ใช้หลายคอลัมน์ได้


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

  4. แยกส่วนหัวของหน้าเว็บอย่างชัดเจน

    หมายถึงการทำให้ส่วนหัวของหน้าเว็บซึ่งหมายถึงส่วนโลโก้และเมนู โดดเด่นขี้นมาจากส่วนอื่นๆ

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



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

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


    หรือจะแค่วางโลโก้ไว้ข้างนอกเนื้อหาดังตัวอย่าง

  5. แยกส่วนต่างๆของหน้าเว็บอย่างชัดเจน

    ส่วนต่างๆของหน้าเว็บประกอบไปด้วย

    • เมนู

    • พื้นหลัง

    • เนื้อหา

    • ส่วนอื่นๆ

    • ลิงค์

    การที่จะจัดกลุ่มแบ่งแยกส่วนต่างๆได้อย่างชัดเจนที่สุดคือการเล่นสี


    แต่การใช้ช่องว่างก็สำคัญไม่แพ้กัน

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

  6. เมนูเรียบง่าย

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

    เพราะ เราต้องการให้ผู้เยี่ยมชมเว็บไซด์ของเราบอกได้ว่าส่วนไหนเป็นเมนู เพื่อให้รับทราบถึงข้อมูลต่างๆว่า

    • ตอนนี้อยู่ที่จุดไหนแล้ว

    • สามารถไปที่ไหนได้อีก

    • แสดงทางเลือกต่างๆให้ชัดเจน

    เราสามารถทำให้เมนูดูโดดเด่นได้โดย

    • แยกส่วนออกมาจากเนื้อหา

    • ทำให้ดูแตกต่าง โดยใช้โทนสี และรูปร่าง

    • ใช้ตัวใหญ่และหนา

    • ใช้ภาษาที่ชัดเจนและเป็นสากลเพื่อไม่ให้เกิดความสับสน

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

  7. โลโก้ตัวหนา

    สอดคล้องไปกับหลักการดีไซน์ยุค 2.0 เพื่อสร้างภาพลักษณ์ที่ชัดเจนและหนักแน่น

    ตัวอย่างโลโก้ดังต่อไปนี้เป็นขนาดจริง สังเกตุได้ว่าขนาดจะค่อนข้างใหญ่

    คุณสมบัติของโลโก้

    • แสดงออกให้มองเห็นได้อย่างชัดเจน

    • จำได้ง่ายและแตกต่าง

    • เป็นตัวแทนภาพลักษณ์

  8. ตัวอักษรตัวใหญ่

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

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



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

  9. ตัวอักษรแนะนำตัวหนา

    เป็นการสื่อข้อความหลักของเนื้อหา ซึ่งส่วนใหญ่จะเป็นตัวอักษรกราฟฟิกมากกว่าตัวอักษรธรรมดา เนื่องจากนักออกแบบต้องการจะควบคุมสิ่งที่หน้าเว็บต้องการจะสื่ออย่างชัดเเจน


    แนะนำให้ใช้เมื่อเป็นสโลแกนหลักเท่านั้น

  10. สีสันสดใส

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


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


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

  11. มีลูกเล่นบนพื้นผิว

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


    หรือพลาสติกเงา

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

  12. ไล่เฉดสี

    การไล่เฉดสีสามารถ สร้างมิติ และ กำหนดบรรยากาศของหน้าเว็บได้


    มีการนำมาใช้ให้ดูเป็นเงา หรือนำมาใช้บนปุ่มเมนู

  13. เงาสะท้อน

    มีหลักๆอยู่ 2 แบบคือ

    • เงาสะท้อนบนพื้นผิวของตัววัตถุเอง

    • และเงาสะท้อนบนพื้นผิวที่วัตถุวางอยู่

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

  14. Icon น่ารัก

    ไอคอนต่างๆมีบทบาทมากขึ้นในดีไซน์ยุค 2.0 ปัจจุบันเราเลือกที่จะใช้ไอคอนจำนวนน้อยลง แต่มีความหมายมากขึ้น

    การใช้ไอคอนจะมีประโยชน์ก็ต่อเมื่อมองออกได้ง่าย และสื่อสารความหมายได้อย่างชัดเจน

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

    เราจะนำไอคอนมาใช้ในจุดที่สำคัญเท่านั้น

  15. ป้ายดาว

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



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

แปลและอ้างอิงจาก http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfmโดย Kwanjai

โพสต์โดยสมาชิกหมายเลข 4547 วันที่ 4 มิ.ย. 2552


13 เทคนิคดีๆ....การออกแบบเว็บไซท์..ให้ดูดีและน่าสนใจ13เทคนิคดีๆ....การออกแบบเว็บไซท์..ให้ดูดีและน่าสนใจ

Advertisement

≡ เรื่องอื่นๆ ที่น่าอ่าน ≡

สมาคมสปาไทยคืออะไร?

สมาคมสปาไทยคืออะไร?


เปิดอ่าน 7,140 ครั้ง
ข่าวความคืบหน้า คศ.3

ข่าวความคืบหน้า คศ.3


เปิดอ่าน 7,136 ครั้ง
ที่สุดของโลก..141 อย่าง

ที่สุดของโลก..141 อย่าง


เปิดอ่าน 7,134 ครั้ง
ขำขัน : ซื้อหรืออ่าน

ขำขัน : ซื้อหรืออ่าน


เปิดอ่าน 7,135 ครั้ง
สปาเส้นผมด้วยมะนาว....

สปาเส้นผมด้วยมะนาว....


เปิดอ่าน 7,134 ครั้ง
10 ลางบอกเหตุ

10 ลางบอกเหตุ


เปิดอ่าน 7,142 ครั้ง
ฝากบทกวี "โยกย้าย"

ฝากบทกวี "โยกย้าย"


เปิดอ่าน 7,144 ครั้ง

:: เรื่องปักหมุด ::

กล้วยไม้"เกาะต้นไม้ข้างบ้าน

กล้วยไม้"เกาะต้นไม้ข้างบ้าน

เปิดอ่าน 7,139 ☕ คลิกอ่านเลย

Advertisement

≡ เรื่องน่าสนใจในหมวดหมู่นี้ ≡
นิทานคุณธรรมเรื่องไม้เท้ายอดกตัญญู
นิทานคุณธรรมเรื่องไม้เท้ายอดกตัญญู
เปิดอ่าน 7,142 ☕ คลิกอ่านเลย

12 อานิสงส์
12 อานิสงส์
เปิดอ่าน 7,140 ☕ คลิกอ่านเลย

ปัญหา คือ การเรียนรู้ ?
ปัญหา คือ การเรียนรู้ ?
เปิดอ่าน 7,130 ☕ คลิกอ่านเลย

เด็กติดยา แก้ไขไม่ยาก
เด็กติดยา แก้ไขไม่ยาก
เปิดอ่าน 7,135 ☕ คลิกอ่านเลย

นมเปรี้ยว.....ช่วยให้ผอมจริงหรือ
นมเปรี้ยว.....ช่วยให้ผอมจริงหรือ
เปิดอ่าน 7,138 ☕ คลิกอ่านเลย

แบบฝึกหัด......เรื่องการแต่งโคลง
แบบฝึกหัด......เรื่องการแต่งโคลง
เปิดอ่าน 7,134 ☕ คลิกอ่านเลย

≡ เรื่องน่าอ่าน/สาระน่ารู้ ≡

ประวัติของแคน อัครเครื่องดนตรีอีสาน
ประวัติของแคน อัครเครื่องดนตรีอีสาน
เปิดอ่าน 124,265 ครั้ง

ต้นมันปู
ต้นมันปู
เปิดอ่าน 30,522 ครั้ง

ปรากฏการณ์ Earth Shine คืออะไร
ปรากฏการณ์ Earth Shine คืออะไร
เปิดอ่าน 37,138 ครั้ง

วิธีปฐมพยาบาลคนเป็นลม
วิธีปฐมพยาบาลคนเป็นลม
เปิดอ่าน 82,663 ครั้ง

ปากเหี่ยวเป็นรอยย่น แก้ไขอย่างไรดีนะ
ปากเหี่ยวเป็นรอยย่น แก้ไขอย่างไรดีนะ
เปิดอ่าน 41,799 ครั้ง

เกมส์ รวมเกมส์สนุกๆ มากมาย
สนามเด็กเล่น

แหล่งรวมเกมส์ เกมส์ให้เล่นมากมาย ศูนย์รวมเกมส์สนุกๆ เกมส์ความรู้ เกมส์ลับสมอง เกมส์ประลองยุทธ แหล่งรวบรวมข้อมูล เกมส์ เกมส์ออนไลน์ เกมส์มันๆ เกมส์ตัดผม ไว้มากมายที่นี่ ให้เด็กๆได้เลือกเล่นมากมาย คลิกเลย

 
หมวดหมู่เนื้อหา
เนื้อหา แยกตามหมวดหมู่ สามารถเลืออ่านได้ตามหมวดหมู่ที่นี่


· Technology
· บทความเทคโนโลยีการศึกษา
· e-Learning
· Graphics & Multimedia
· OpenSource & Freeware
· ซอฟต์แวร์แนะนำ
· การถ่ายภาพ
· Hot Issue
· Research Library
· Questions in ETC
· แวดวงนักเทคโนฯ

· ความรู้ทั่วไป
· คณิตศาสตร์
· วิทยาศาสตร์และเทคโนโลยี
· ภาษาต่างประเทศ
· ภาษาไทย
· สุขศึกษาและพลศึกษา
· สังคมศึกษา ศาสนาฯ
· ศิลปศึกษาและดนตรี
· การงานอาชีพ

· ข่าวการศึกษา
· ข่าวตามกระแสสังคม
· งาน/บริการสังคม
· คลิปวิดีโอยอดนิยม
· เกมส์
· เกมส์ฝึกสมอง

· ทฤษฎีทางการศึกษา
· บทความการศึกษา
· การวิจัยทางการศึกษา
· คุณครูควรรู้ไว้
· เตรียมประเมินวิทยฐานะ
· ผลงานวิชาการเล่มเต็ม
· เครื่องมือสำหรับครู

ครูบ้านนอกดอทคอม

เว็บไซต์เพื่อครู ข่าวการศึกษา ความรู้ การศึกษาไทย

      kroobannok.com

© 2000-2020 Kroobannok.com  
All rights reserved.


Design by : kroobannok.com


ครูบ้านนอกดอทคอม
การจัดอันดับของ Truehits Web Directory

วิธีนำแบนเนอร์ของครูบ้านนอก.คอมไปแปะในเว็บท่าน บันทึกภาพแบนเนอร์นี้และลิงค์มาที่เราครับ (มีแบนเนอร์ 2 แบบ)
 

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

เว็บนี้ถือกำเนิดเมื่อ 5 มกราคม 2548

Email : kornkham@hotmail.com
Tel : 096-7158383

สนใจสนับสนุนเรา โดยลงโฆษณา
คลิกดูรายละเอียดที่นี่ครับ