ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
การออกแบบเว็บไซต์ให้ออกมาดีสมใจ ฟังดูเป็นเรื่องท้าทาย แต่ขอแค่คุณมีพื้นฐานมากพอ ขั้นตอนต่างๆ ก็จะเป็นไปอย่างราบรื่นและสนุกสนาน ออกแบบเว็บใช่ว่าจะเน้นแต่เรื่องความสวยความงามนะ! บทความวิกิฮาวนี้จะแนะนำขั้นตอนเบื้องต้นและเคล็ดลับต่างๆ ในการออกแบบเว็บไซต์ให้คนอ่านติดใจ
ขั้นตอน
-
ออกแบบเว็บไซต์ในแบบของคุณ. ถ้าคุณเป็นมือใหม่หัดเขียนโค้ดและออกแบบเว็บ แต่มุ่งมั่นตั้งใจอยากสร้างเว็บในแบบของตัวเองจริงๆ ก็มีหลายวิธีให้ได้เลือกใช้ อาจจะเริ่มจากสร้างเว็บง่ายๆ ก่อน โดยเรียนรู้โค้ด HTML กับ CSS พื้นฐาน เว็บของคุณจะได้ออกมาสวยและดูโปรในเวลาเดียวกัน!
-
ใช้เทมเพลตเว็บสำเร็จรูป. คุณหาซื้อหรือใช้เทมเพลตเว็บฟรีจากในเน็ตได้ง่ายๆ พวกนี้เป็นโค้ดที่คนอื่นเขาเขียนไว้ให้แล้ว คุณแค่เอามาปรับใช้ตามต้องการ มีหลายเว็บเลยที่รวบรวมเทมเพลตที่น่าสนใจไว้ เว็บที่น่าลองก็เช่น Wix
-
จ้างมืออาชีพออกแบบให้. ถ้าอยากให้เว็บออกมาตรงตามความต้องการแบบเป๊ะๆ คือสวยหรูดูดีเหมือนเว็บดังๆ ทั้งหลาย ก็คงต้องจ้าง website designer มืออาชีพแทน แน่นอนว่าต้องเสียเงิน แต่ถ้าหาดีๆ ก็ไม่แพงเท่าที่คิด ลองไปประกาศรับสมัครตามเว็บบอร์ดหรือจ้างเด็กมหาวิทยาลัยที่กำลังร้อนวิชาดู เท่านี้เว็บคุณก็ออกมาใช้ง่ายดูดีกว่าตอนสร้างเองแน่นอนโฆษณา
-
หน้าเว็บต้องลื่นไหล. เว็บที่ดีคือเว็บที่ใช้ง่าย หาอะไร ไปหน้าไหนก็สะดวก อย่าไปอัดอะไรไว้เต็มหน้าไปหมด เมนูต่างๆ ต้องชัดเจนเข้าใจง่าย คนอ่านเขาต้องหาหรือไปยังหน้าที่ต้องการได้รวดเร็วทันใจ
-
หมั่นฝึกออกแบบ user interface. ควรจัดวางส่วนต่างๆ ของเว็บไซต์ อย่างชื่อเว็บ/ชื่อหน้า แถบเมนูด้านข้าง โลโก้ต่างๆ ภาพประกอบ ไปจนถึงข้อความ ไว้ในตำแหน่งเดิมทุกหน้า คนอ่านจะได้ใช้ง่าย ไปไหนสะดวก
- header ด้านบนของทุกหน้าต้องเหมือนกัน ถึงเนื้อหาในแต่ละหน้าจะแตกต่างกันไป หัวเว็บด้านบนต้องคงเดิม
- ออกแบบให้สมเหตุสมผล แต่ละส่วนของหน้าเว็บควรจะเรียงลำดับกันตามความสำคัญหรือตามหัวข้อ ถึงเนื้อหาจะต่างกันไปตามแต่ละหน้าก็เถอะ
-
สไตล์อย่าแตกแยก. ปกติเว็บส่วนใหญ่ก็จะมี layout หรือรูปแบบการวางเนื้อหาเดียวอยู่แล้ว แต่คุณควรเพิ่มเติมตรงที่สไตล์ของแต่ละหน้าเว็บควรจะไปใน "ธีม" หรือทิศทางเดียวกันทั้งเว็บ ให้เลือกสีหลักมาสัก 2 - 3 สี และควรเป็นโทนสีที่ส่งเสริมกัน อย่าใช้ฟอนต์หรือขนาดตัวอักษรต่างกันในหลายๆ จุด ถ้าตรงไหนต่างกัน (นิดหน่อย) แต่ละหน้าก็ควรจะคงรูปแบบนั้นไว้
- ให้คุณใช้ CSS (Cascading Style Sheets) จัดการเนื้อหาให้ออกมาสไตล์เดียวกัน เพราะจะเปลี่ยนแปลงสไตล์ของจุดต่างๆ ในเว็บได้ง่ายกว่า โดยไม่ต้องไปนั่งเปลี่ยนทีละหน้าเว็บ
-
ตัวอักษรต้องอ่านง่าย. ถ้าอยากให้เนื้อหาของเว็บอ่านง่าย ให้แบ่งออกเป็นส่วนย่อยๆ คือมีหัวข้อย่อยลงไป และเว้นวรรคหรือย่อหน้าให้เหมาะสม รวมถึงใช้ตัวหนาหรือขนาดตัวอักษรเล็กใหญ่ต่างกัน จะได้เน้นความสำคัญของเนื้อหากับหัวข้อ
- เรื่องตัวอักษรนี่สำคัญ อย่าให้ขนาดตัวอักษรเล็กไป และให้เพิ่มระยะห่างระหว่างบรรทัด ถ้าตรงไหนเนื้อหาแน่นๆ จะได้อ่านง่าย เนื้อหาย่อหน้าใหญ่ (ตัวอักษรเยอะๆ) จะอ่านยากเป็นพิเศษ ให้แยกออกเป็นย่อหน้าเล็กๆ แทน
-
เว็บควรเปิดอ่านในเบราว์เซอร์ไหนก็ได้. ให้ใช้โค้ด HTML มาตรฐาน อย่าไปใส่แท็ก ฟีเจอร์ และ plug-in ที่อ่านได้เฉพาะบางเบราว์เซอร์ (บางค่ายหรือบางรุ่น)
- ถึงเดี๋ยวนี้เบราว์เซอร์กับคอมรุ่นใหม่ๆ จะแสดงรูปใหญ่ๆ ละเอียดๆ ได้ แต่บอกเลยว่าหน้าเว็บจะโหลดเร็วขึ้นเยอะถ้าคุณใช้ไฟล์รูปที่เปลืองความจำน้อยหน่อย และไม่ทุ่มแต่งลูกเล่นในเว็บเต็มไปหมด เว็บสวยได้แต่จะดีกว่าถ้าใช้ง่ายและรวดเร็ว
-
ทดสอบเว็บของคุณ. ทุกลิงค์ต้องเชื่อมต่อได้ และทุกรูปต้องขึ้นให้เห็น
- อาจจะต้องทดสอบการใช้งานของเว็บ โดยให้กลุ่มผู้ใช้ของคุณลองใช้ดู ว่าเว็บเข้าใจและใช้ง่ายไหม จากนั้นก็ให้ feedback ไว้
โฆษณา
-
เพิ่มเว็บเวอร์ชั่นมือถือ. เดี๋ยวนี้คนเขาท่องเว็บด้วยมือถือกันทั้งนั้น ถ้าอยากให้เว็บคุณมี traffic เยอะ เว็บคุณก็ต้องเปิดในเบราว์เซอร์มือถือได้ด้วย ที่ทำง่ายที่สุดคือเพิ่มเว็บเวอร์ชั่นมือถือ แต่จะลองทำอย่างอื่นก่อนก็ได้
- ลองหาเว็บอื่นในเวอร์ชั่นมือถือมาเป็นตัวอย่าง ส่วนมากถ้าคุณเปลี่ยน "www" ใน address ของเว็บดังๆ เป็น "m." ก็จะเข้าสู่เว็บเวอร์ชั่นมือถือได้ เว็บคุณเองก็ต้องทำประมาณนี้
-
เว็บดีคือเว็บที่ใช้ง่าย. เพราะงั้นให้เน้นเรียบหรูเข้าไว้ คือเนื้อหาชัดเจน ใช้ง่าย ไอ้พวกเว็บเนื้อหาแน่นๆ มาเป็นตารางหรือรูปและสีสันวิบวับไปหมดน่ะหมดยุคแล้ว คนเขาเข้าเว็บมาก็เพราะจะหาข้อมูลบางอย่าง ซึ่งเขาต้องทำได้ง่ายด้วย เพราะงั้นให้ใช้ดีไซน์เรียบๆ คอลัมน์น้อยๆ แต่ได้ใจความ เมนูต่างๆ ก็ต้องกระชับชัดเจน
-
ใช้ responsive design. ก็คือการเขียนโค้ดให้เว็บไม่ล็อคขนาดตายตัว แต่ปรับเปลี่ยนตามขนาดจอของคนอ่านได้ ทำได้โดยตั้งความกว้างของคอลัมน์ (column widths) เป็นเปอร์เซ็นต์ แทนที่จะเป็นพิกเซล จริงๆ ก็มีวิธีที่ดีกว่านี้อีก แต่ต้องค่อยๆ ศึกษาไป
-
ระวังบางลูกเล่นใช้กับเวอร์ชั่นมือถือไม่ได้. หลายอุปกรณ์พกพาแสดงหน้าต่าง pop-up, Flash, Java หรือกรอบต่างๆ ไม่ได้ เราถึงย้ำให้คุณออกแบบเว็บให้เรียบง่ายที่สุด
-
ทำแอพซะเลย. บางกรณี ถ้าทำเป็นแอพจะง่ายและใช้สะดวกกว่าเพิ่มเว็บเวอร์ชั่นมือถือ เพราะไม่ต้องรู้เยอะเรื่องเขียนโปรแกรมก็ทำได้ เหมือนกับที่มีเว็บรวมเทมเพลต มีหลายบริษัทเหมือนกันที่รับออกแบบแอพง่ายๆ ให้คุณ เช่น Conduit Mobile เป็นต้นโฆษณา
เคล็ดลับ
- ถ้าอยากอำนวยความสะดวกให้ผู้พิการทางสายตาหรือการได้ยิน ให้ใส่ caption video (วีดีโอแบบมีคำบรรยาย), transcribe audio (เสียงอ่านเนื้อหาในเว็บ) หรือหมายเหตุเรื่องการใช้งานเว็บกำกับไว้ จริงๆ แล้วตารางนี่แหละใช้จัดระเบียบข้อมูลได้ดีที่สุด แต่ผู้พิการทางสายตาที่เขาใช้โปรแกรมอ่านเนื้อหาในหน้าจออาจจะสับสนเพราะเนื้อหาที่ได้ยินไม่เรียงตามคอลัมน์อย่างที่เห็น
- ถ้าจะปรับระยะห่างระหว่างย่อหน้า ใช้ CSS จะดีที่สุด
- คุณจะออกแบบ layout เว็บพิสดารแค่ไหนก็ตามใจ แต่บางทีก็ง่ายกว่าถ้าซื้อเทมเพลตสำเร็จรูปมาใช้เลย (ดีต่อคนอ่านด้วย)
- อย่ายัดเยียดแสงสีหรืออนิเมชั่นน่ารักๆ แปลกๆ ให้คนอ่านเต็มไปหมด บอกเลยว่าพวกอนิเมชั่น Flash แสงสีสดๆ ภาพพื้นหลังลายพร้อย ไปจนถึงเพลงที่เล่นเองอัตโนมัติทุกครั้งที่เข้าเว็บน่ะมันเชยไปแล้ว เดี๋ยวคนอ่านจะหนีไม่รู้ด้วย เน้นดีไซน์เรียบหรู ข้อความอ่านง่ายสบายตา จะดีที่สุด
- เพื่อประหยัดหมึกพิมพ์ของคนอ่าน ให้ใช้ style sheet แยกออกมาเป็นฟอร์แมตสำหรับพิมพ์หน้าเว็บโดยเฉพาะ
- ตั้งค่าให้รูปพื้นหลังไม่ขึ้นเวลาสั่งพิมพ์หน้าเว็บ
- ใช้ตัวอักษรดำบนพื้นขาว
- ตั้งค่าไม่แสดงแถบเมนูกับรูปประกอบที่ไม่จำเป็น
โฆษณา
คำเตือน
- ห้ามลอกเลียนแบบใคร ระวังกฎหมายลิขสิทธิ์ไว้ให้ดี เช่น อย่าไป hotlink รูปมาจากเว็บอื่นเขา หรือลอกโครงสร้างเว็บมาโดยไม่ได้รับอนุญาต ทุกองค์ประกอบในเว็บต้องถูกกฎหมายและศีลธรรมนะจ๊ะ
โฆษณา
เกี่ยวกับวิกิฮาวนี้
มีการเข้าถึงหน้านี้ 5,173 ครั้ง
โฆษณา
