สิ่งที่ควรทำและไม่ควรทำในการออกแบบเว็บไซต์ที่ยอดเยี่ยม

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

กระบวนการของการออกแบบเว็บไซต์ที่ยอดเยี่ยม เพียงเพื่อให้แน่ใจว่าเราทุกคนเข้าใจตรงกัน เรามาเริ่มด้วยคำจำกัดความพื้นฐานสำหรับ “การออกแบบเว็บไซต์” กันดีกว่า ตามวิกิพีเดีย การออกแบบเว็บไซต์คือ:

“กระบวนการวางแนวความคิด การวางแผน การสร้างแบบจำลอง และการดำเนินการจัดส่งสื่ออิเล็กทรอนิกส์ผ่านอินเทอร์เน็ต ในรูปแบบภาษา Markup ที่เหมาะสำหรับการตีความด้วยเว็บเบราว์เซอร์ และแสดงเป็น Graphical user interface” .

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

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

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

มีบางสิ่งที่คุณต้องการเพื่อกำหนดแนวคิดและวางแผนเว็บไซต์ของคุณอย่างมีประสิทธิภาพ:

• สมอง
• ปากกาและกระดาษ
• (ทางเลือก) ซอฟต์แวร์ผังงาน
• แนวคิดทั่วไปเกี่ยวกับส่วนต่างๆ ของเว็บไซต์ของคุณ

ในการเริ่มต้น ให้หยิบปากกาและกระดาษของคุณ หรือเปิดซอฟต์แวร์ผังงานที่คุณชื่นชอบ เราใช้ OmniGraffle Professiona สำหรับ Mac OS X ซึ่งมีราคา 150 เหรียญสหรัฐฯ ต่อใบอนุญาต แต่จะคุ้มค่าหากคุณสร้างเว็บไซต์เป็นประจำ หากคุณใช้พีซี SmartDraw เป็นซอฟต์แวร์ผังงานฟรีที่ยอดเยี่ยมที่คุณสามารถใช้ได้ ปากกาและกระดาษก็ใช้ได้ดี

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

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

(3) ถัดไป เพิ่มหน้ารองทั้งหมด (ส่วนย่อย) ที่จะแสดงรายการในหน้าหลักแต่ละหน้า สำหรับหน้าแรก เราได้รวมการออกแบบเว็บไซต์ระดับมืออาชีพ การพัฒนาเว็บ และการเพิ่มประสิทธิภาพเครื่องมือค้นหาไว้ด้วย การนำทางรองจะต้องมีคำอธิบายมากกว่าการนำทางหลัก ยิ่งลำดับชั้นการนำทางของเว็บไซต์ของคุณลึกลงไปเท่าใด แต่ละป้ายกำกับก็ควรมีคำอธิบายมากขึ้นเท่านั้น

Dos

• น้อยมาก; รักษาจำนวนส่วนหลักให้น้อยที่สุด เราใช้ 6 ส่วนในเว็บไซต์ของเราซึ่งมากเกินพอ
• ไม่ว่าคุณจะใช้ปากกาและกระดาษหรือซอฟต์แวร์ผังงาน ให้รักษาความสะอาดและจัดระเบียบให้มากที่สุด แม้ว่าคุณ (และใครก็ตามที่ทำงานร่วมกับคุณ) จะเป็นคนเดียวที่จะใช้ผังงาน แต่ก็ยังต้องสมเหตุสมผล - ส่วนหลักของคุณควรใช้คำที่กว้างกว่า ในขณะที่คำศัพท์ระดับรองและระดับอุดมศึกษาควรมีคำอธิบายมากกว่า

สิ่งที่ไม่ควรทำ
การสร้างผังงานค่อนข้างตรงไปตรงมา อย่างไรก็ตาม มีข้อผิดพลาดบางประการที่สามารถทำได้ง่าย:

• อย่าใช้คำที่สื่อความหมายมากนักในการนำทางหลักของคุณ เว้นแต่ว่าทั้งเว็บไซต์ของคุณจะเน้นไปที่หัวข้อแคบๆ หัวข้อเดียว -อย่าพยายามรวมหลายๆ หัวข้อไว้ในหน้าเดียวกัน สร้างส่วนทั่วไปสำหรับหัวข้อเหล่านี้ และสร้างส่วนย่อยจากส่วนนั้น สิ่งนี้จะทำให้หน้าเว็บย่อย (เชิงพรรณนา) มีแนวโน้มที่จะมีอันดับที่ดีขึ้นในเครื่องมือค้นหา (Google, Yahoo, MSN, Ask) เมื่อคุณสร้างผังงานที่กระชับและสื่อความหมายแล้ว คุณก็พร้อมที่จะไปยังขั้นตอนที่สองแล้ว ของกระบวนการออกแบบเว็บไซต์:

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

• โลโก้
• เมนูนำทาง
• เนื้อหา
• รูปภาพ, วีดีโอ

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

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

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

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

หากหน้าบางหน้าของคุณใช้รูปแบบเดียวกัน ก็ไม่จำเป็นต้องจำลองหน้าเหล่านั้นทั้งหมด (แม้ว่าคุณจะทำได้ก็ตาม) เพียงให้แน่ใจว่าได้จำลองเค้าโครงที่เป็นเอกลักษณ์ที่เว็บไซต์ของคุณจะมี คุณจะขอบคุณตัวเองในภายหลัง

สิ่งที่ต้องทำ

• จำลองหน้าที่ไม่ซ้ำทั้งหมด
• รวมองค์ประกอบที่สำคัญ (โลโก้ การนำทาง ตำแหน่งเนื้อหา ตำแหน่งรูปภาพ/วิดีโอ) - เริ่มจากด้านบนและลงมา - อ้างอิงผังงานของคุณที่สร้างในขั้นตอนที่ 1 เพื่อที่คุณจะได้ไม่ลืมจำลองหน้าใดๆ - บันทึก บันทึก บันทึก – เช่นเดียวกับสิ่งใด ๆ บนคอมพิวเตอร์ บันทึกการจำลองของคุณทุกๆ 10 นาทีหรือประมาณนั้น
• มุ่งเน้นไปที่รูปแบบที่สะอาดตาและเป็นมิตรต่อผู้ใช้ -ติดป้ายกำกับองค์ประกอบของคุณ เพื่อที่คุณจะได้ไม่ลืมว่าองค์ประกอบเหล่านั้นคืออะไรเมื่อคุณอ้างอิงถึงองค์ประกอบเหล่านั้นในขั้นตอนที่ 3 การดำเนินการ -ใช้เว็บไซต์อื่นเป็นแรงบันดาลใจ การนำองค์ประกอบจากเว็บไซต์อื่นมาทำให้เป็นของคุณเองนั้นไม่ใช่เรื่องผิด (ดู “สิ่งที่ไม่ควรทำ”)

ดอน'ส

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

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

เมื่อถึงขั้นที่ 3 คุณควรมีแนวคิดที่ชัดเจนเกี่ยวกับ:

• ผู้เยี่ยมชมของคุณจะเดินทางจากที่หนึ่งไปยังอีกที่หนึ่งได้อย่างไร (ขั้นตอนที่ 1, ผังงาน) - หน้าเว็บของคุณจะถูกจัดวางอย่างไร (ขั้นตอนที่ 2, การจำลองแบบโครงร่าง)

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

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

เรามักจะเริ่มสร้างเพจ “หน้าแรก” (ดัชนี) ก่อน ใช้โครงร่างที่คุณสร้างในขั้นตอนที่ 2 เป็นเทมเพลตสำหรับแต่ละหน้าที่คุณสร้าง อย่างไรก็ตาม แทนที่จะใช้กล่องทึบ ให้ใช้กราฟิก สี และข้อความแทน แต่ละหน้าจะต้องมีลักษณะตามที่คุณต้องการให้ปรากฏบนอินเทอร์เน็ตอย่างชัดเจน เนื่องจากนี่เป็นขั้นตอนสุดท้ายของกระบวนการออกแบบ

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

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

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

Dos

• อ้างอิงเทมเพลตของคุณที่สร้างขึ้นในขั้นตอนที่ 2 แม้ว่าการเบี่ยงเบนไปจากเลย์เอาต์ดั้งเดิมของคุณเป็นเรื่องปกติ แต่คุณก็ไม่จำเป็นต้องทำเช่นนั้น
• ทำการวิจัยก่อนที่จะสร้างการออกแบบจริงของคุณ รับแนวคิดจากไซต์อื่น ๆ และทำให้เป็นของคุณเอง (โดยไม่ลอกเลียนแบบ)
• รวมสีและกราฟิกเพื่อสร้างรูปลักษณ์สุดท้ายสำหรับหน้าเว็บของคุณ - ใช้ CSS (สไตล์ชีตแบบเรียงซ้อน) เพื่อแปลงการออกแบบของคุณจากรูปภาพเป็นมาร์กอัปที่เว็บเบราว์เซอร์เข้าใจได้ - อ้างอิงผังงานของคุณจากขั้นตอนที่ 1 เมื่อเข้ารหัสหน้าเว็บของคุณด้วยไฮเปอร์ลิงก์ ควรใช้เมนูแบบเลื่อนลงที่มีลิงก์ทั้งหมด (หรือส่วนใหญ่) ในเว็บไซต์ของคุณในทุกหน้า สิ่งนี้จะช่วยให้การนำทางง่ายขึ้นและยังทำให้เพจของคุณรวบรวมข้อมูลได้ง่ายขึ้นเมื่อสไปเดอร์ของเครื่องมือค้นหาเข้ามา; สถานที่ที่ดีในการรับเมนูแบบเลื่อนลง CSS อยู่ที่ DynamicDrive.com - จบการออกแบบของคุณในขณะที่ทำงานใน Photoshop หรือซอฟต์แวร์แก้ไขภาพที่คุณใช้ การเปลี่ยนแปลงการออกแบบของคุณอาจเป็นเรื่องยุ่งยากเมื่อแปลงเป็นมาร์กอัป (โค้ด)

สิ่งที่ไม่ควรทำ

• อย่ารวมข้อความในเมนูนำทางของคุณเมื่อแปลงเป็น CSS แทนที่จะใช้ข้อความรูปภาพ ให้ใช้ข้อความปกติที่สไปเดอร์ของเครื่องมือค้นหาสามารถอ่านได้
• อย่าใช้ตารางเมื่อทำการแปลง แม้ว่าคุณจะต้องซื้อหนังสือใน CSS มันก็คุ้มค่า โต๊ะตายแล้ว
• อย่าข้ามสองขั้นตอนแรกเพียงเพื่อประหยัดเวลา เว็บไซต์ของคุณจะดีกว่าถ้าคุณเริ่มจากจุดเริ่มต้นของกระบวนการออกแบบเว็บไซต์ (แทนที่จะเป็นตอนท้าย)
• อย่าลืมบีบอัดรูปภาพของคุณเมื่อถูกตัดออกจากกันสำหรับ CSS ไม่มีอะไรจะเลวร้ายไปกว่าเว็บไซต์ที่โหลดช้าเนื่องจากไฟล์ภาพขนาดใหญ่ Photoshop มีตัวเลือก “บันทึกที่ปรับให้เหมาะสมสำหรับเว็บ” (CS3 – “บันทึกสำหรับเว็บและอุปกรณ์”)

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