บทความวิกิฮาวนี้จะแนะนำวิธีการออกแบบเว็บไซต์ที่ดูเป็นมืออาชีพและราบรื่น แม้ว่าคุณจะมีอิสระในการตัดสินใจเกี่ยวกับการออกแบบไซต์ของคุณ แต่ก็มีสิ่งสำคัญที่ต้องทำและหลีกเลี่ยงเมื่อสร้างเว็บไซต์
ขั้นตอน
ส่วนที่ 1 จาก 2: การสร้างการออกแบบเว็บไซต์
ขั้นตอนที่ 1 ตัดสินใจว่าคุณต้องการใช้ผู้สร้างเว็บไซต์หรือไม่
การสร้างเว็บไซต์ตั้งแต่เริ่มต้นจำเป็นต้องมีความเข้าใจในโค้ด HTML โดยละเอียด แต่คุณสามารถสร้างเว็บไซต์โดยใช้บริการโฮสติ้งฟรี เช่น Weebly, Wix, WordPress หรือ Google Sites ผู้สร้างเว็บไซต์มักจะง่ายกว่าสำหรับนักออกแบบมือใหม่มากกว่า HTML
- หากคุณตัดสินใจเขียนโค้ดด้วยตัวเอง คุณควรเรียนรู้การเขียนโค้ด HTML และ CSS
- หากคุณไม่เต็มใจที่จะอุทิศเวลาและพลังงานเพื่อสร้างเว็บไซต์ของคุณเอง คุณสามารถจ้างนักออกแบบเว็บไซต์ได้ บริการออกแบบฟรีแลนซ์แตกต่างกันอย่างมาก ค่าบริการบางส่วนต่อชั่วโมงและบางส่วนต่อโครงการ โดยมีช่วงรวมตั้งแต่ล้านถึงสิบล้านรูเปียห์
ขั้นตอนที่ 2 สร้างแผนผังเว็บไซต์
ก่อนเปิดผู้สร้างเว็บไซต์ คุณควรกำหนดจำนวนหน้าในเว็บไซต์ เนื้อหาในแต่ละหน้า และรูปแบบทั่วไปของหน้าสำคัญ เช่น "หน้าแรก" และ "เกี่ยวกับ"
มันจะง่ายกว่าสำหรับคุณที่จะเห็นภาพหน้าของไซต์ของคุณโดยการสร้างภาพคร่าวๆ ไม่ใช่แค่เงา
ขั้นตอนที่ 3 ใช้การออกแบบที่ใช้งานง่าย
แม้ว่าแนวคิดใหม่มักจะน่าสนใจ แต่การออกแบบพื้นฐานควรเป็นไปตามหลักเกณฑ์ทั่วไปเหล่านี้:
- ตัวเลือกการนำทาง (เช่น หลายแท็บสำหรับหน้าต่างๆ) ควรวางไว้ที่ด้านบนสุดของหน้า
- หากคุณกำลังใช้ไอคอนเมนู (☰) ไอคอนนี้ควรอยู่ที่มุมซ้ายบนของหน้า
- หากคุณกำลังใช้แถบค้นหา ให้วางไว้ใกล้ด้านขวาบนของหน้า
- ลิงก์ที่เป็นประโยชน์ (เช่น ลิงก์ไปยังหน้า "เกี่ยวกับ" หรือ "ติดต่อเรา") ควรอยู่ที่ด้านล่างของหน้า
ขั้นตอนที่ 4. มีความสม่ำเสมอ
ไม่ว่าคุณจะเลือกข้อความ จานสี ธีมของรูปภาพ และการออกแบบใดก็ตาม ตรวจสอบให้แน่ใจว่าคุณใช้การตัดสินใจแบบเดียวกันทั่วทั้งไซต์ของคุณ ผู้ใช้จะประหลาดใจที่เห็นว่าแบบอักษรและรูปแบบสีในหน้า "เกี่ยวกับ" แตกต่างจากที่ใช้สำหรับโฮมเพจอย่างมาก
- ตัวอย่างเช่น หากคุณใช้สีอ่อนสำหรับโฮมเพจของคุณ อย่าใช้สีสว่างในหน้าถัดไป
- โปรดทราบว่าการใช้สีที่สว่างหรือสีตัดกัน โดยเฉพาะอย่างยิ่งสีที่แสดงแบบไดนามิก (หรือเคลื่อนไหว) อาจทำให้เกิดอาการชักหรือชักจากลมบ้าหมูในผู้ใช้ส่วนน้อย หากคุณตัดสินใจที่จะใช้สีดังกล่าว อย่าลืมใส่คำเตือน "ความเสี่ยงในการจับกุม" ไว้ข้างหน้าหน้าที่เป็นปัญหา
ขั้นตอนที่ 5. เพิ่มตัวเลือกการนำทาง
การวางลิงก์โดยตรงไปยังหน้าที่สำคัญเหนือหน้าแรกจะช่วยให้ผู้เยี่ยมชมใหม่เข้าสู่เนื้อหาที่มีความสำคัญต่อพวกเขา ผู้สร้างเว็บไซต์ส่วนใหญ่เพิ่มลิงก์นี้เป็นค่าเริ่มต้น
สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าทุกหน้าของเว็บไซต์สามารถเข้าถึงได้โดยคลิกที่ตัวเลือกภายในเว็บไซต์แทนที่จะเข้าถึงผ่านที่อยู่ของหน้าเท่านั้น
ขั้นตอนที่ 6 ใช้สีที่ตรงกัน
เช่นเดียวกับการออกแบบทุกประเภท การออกแบบเว็บไซต์ต้องอาศัยการผสมสีที่น่าพึงพอใจ ดังนั้นการเลือกสีของชุดรูปแบบที่ตรงกันจึงมีความสำคัญมาก
หากคุณสับสน ให้เริ่มด้วยสีดำ สีขาว และสีเทา
ขั้นตอนที่ 7 พิจารณาการออกแบบที่เรียบง่าย
แนวคิดมินิมัลลิสต์สนับสนุนการใช้โทนสีเย็น กราฟิกที่เรียบง่าย หน้าข้อความสีดำบนพื้นหลังสีขาว และการตกแต่งให้น้อยที่สุด เนื่องจากการออกแบบที่เรียบง่ายต้องใช้องค์ประกอบเพียงเล็กน้อย จึงเป็นตัวเลือกที่ง่ายในการทำให้ไซต์ของคุณดูเป็นมืออาชีพและน่าสนใจโดยไม่ต้องใช้ความพยายามมากเกินไป
- ผู้สร้างเว็บไซต์ส่วนใหญ่มีธีม "เรียบง่าย" ซึ่งคุณสามารถเลือกได้เมื่อสร้างเว็บไซต์
- ทางเลือกที่เรียบง่ายคือ "ความโหดเหี้ยม" ซึ่งใช้คำที่รุนแรงกว่า สีสดใส ข้อความตัวหนา และกราฟิกขั้นต่ำ มีผู้ใช้การออกแบบที่โหดร้ายน้อยกว่ามากเมื่อเทียบกับมินิมัลลิสต์ แต่ถ้าเนื้อหาเหมาะสม การออกแบบนี้อาจเป็นทางเลือกที่ดี
ขั้นตอนที่ 8 ใช้ตัวเลือกที่ไม่ซ้ำ
องค์ประกอบกริดและเส้นตรงเป็นตัวเลือกที่ปลอดภัย แต่สไตล์ที่เป็นเอกลักษณ์บางอย่างจะเพิ่มความเป็นส่วนตัวและทำให้ไซต์ของคุณแตกต่างจากที่เหลือ
- อย่ากลัวที่จะเอาชนะเทรนด์ด้วยการวางองค์ประกอบของไซต์ที่ไม่สมมาตรหรือใช้องค์ประกอบแบบเรียงซ้อนเพื่อสร้างลุคแบบเลเยอร์
- แม้ว่าองค์ประกอบสี่เหลี่ยมจตุรัสที่มีขอบแหลมและสง่างาม (หรือที่เรียกว่าการนำเสนอแบบใช้การ์ด) จะเป็นที่ต้องการน้อยกว่าองค์ประกอบที่โค้งมนและนุ่มนวล
ส่วนที่ 2 จาก 2: การเพิ่มประสิทธิภาพของเว็บไซต์ให้สูงสุด
ขั้นตอนที่ 1 ใช้ประโยชน์จากตัวเลือกการปรับแต่งรถให้เหมาะสม
เบราว์เซอร์มือถือดึงดูดการรับส่งข้อมูลมากกว่าเบราว์เซอร์เดสก์ท็อป ซึ่งหมายความว่าความสนใจที่คุณจ่ายให้กับเวอร์ชันมือถืออย่างน้อยควรเหมือนกับการพัฒนาไซต์เดสก์ท็อป เว็บไซต์ auto-creator ส่วนใหญ่ได้สร้างเวอร์ชันรถยนต์แล้ว แต่โปรดคำนึงถึงข้อมูลต่อไปนี้สำหรับไซต์บนมือถือ:
- ตรวจสอบให้แน่ใจว่าปุ่มต่างๆ (เช่น ไซต์ลิงก์) มีขนาดใหญ่และแตะง่าย
- หลีกเลี่ยงคุณลักษณะที่ไม่สามารถมองเห็นได้บนอุปกรณ์มือถือ (เช่น Flash, Java เป็นต้น)
- พิจารณาสร้างแอปรถสำหรับไซต์ของคุณ
ขั้นตอนที่ 2 อย่าใส่รูปภาพต่อหน้ามากเกินไป
บางครั้งเบราว์เซอร์เดสก์ท็อปและมือถือมีปัญหาในการโหลดหน้าเว็บที่มีรูปภาพหรือวิดีโอจำนวนมาก แม้ว่ารูปภาพจะมีความสำคัญมากในการออกแบบเว็บ แต่สื่อต่อหน้าที่มากเกินไปอาจทำให้โหลดนานขึ้น และทำให้ผู้ใช้ไม่เข้าชมหน้าเหล่านั้น
โดยทั่วไป การโหลดหน้าเว็บควรใช้เวลาน้อยกว่าสี่วินาที
ขั้นตอนที่ 3 เพิ่มหน้า "ติดต่อ"
คุณอาจสังเกตเห็นว่าไซต์ส่วนใหญ่มีหน้า "ติดต่อเรา" ที่มีข้อมูลติดต่อ (เช่น หมายเลขโทรศัพท์และที่อยู่อีเมล) ที่จริงแล้ว บางไซต์มีแบบฟอร์มสอบถามอัตโนมัติในหน้านี้ หน้า "ติดต่อ" เป็นสายตรงของการสื่อสารระหว่างผู้เยี่ยมชมไซต์และคุณ ซึ่งหมายความว่าเป็นวิธีแก้ปัญหาสำหรับคำถามหรือความยุ่งยากของผู้เข้าชม
ขั้นตอนที่ 4 สร้างหน้า 404 ที่กำหนดเอง
เมื่อผู้เยี่ยมชมมาถึงหน้าใดหน้าที่หนึ่งซึ่งไม่ได้สร้างขึ้นหรือไม่มีอยู่จริง หน้า "ข้อผิดพลาด 404" จะปรากฏขึ้น เบราว์เซอร์ส่วนใหญ่มีหน้า 404 ในตัว แต่คุณสามารถปรับแต่งหน้าตาได้จากการตั้งค่าผู้สร้างเว็บไซต์ หากคุณต้องการสร้างเพจ 404 แบบกำหนดเอง ให้ป้อนรายละเอียดต่อไปนี้:
- ข้อความแสดงข้อผิดพลาดที่ตลกขบขันและสนุกสนาน (เช่น "ยินดีด้วย คุณมาถึงหน้าแสดงข้อผิดพลาดแล้ว!")
- ลิงค์กลับหน้าแรก
- รายการลิงค์ที่ผู้เยี่ยมชมมักจะเห็น
- รูปภาพหรือโลโก้ของไซต์ของคุณ
ขั้นตอนที่ 5. ป้อนแถบค้นหาถ้าเป็นไปได้
หากวิธีการสร้างเว็บไซต์ที่คุณใช้รองรับการเพิ่มแถบค้นหา เราแนะนำให้เพิ่ม เพื่อให้แน่ใจว่าผู้ใช้สามารถค้นหาหน้าหรือเนื้อหาที่ต้องการโดยไม่ต้องคลิกผ่านตัวเลือกการนำทางทั้งหมด
แถบค้นหายังมีประโยชน์มากเมื่อผู้เข้าชมต้องการค้นหาคำทั่วไปโดยไม่ต้องเล่นสุ่มในหน้าสุ่ม
ขั้นตอนที่ 6 ให้ความสำคัญกับหน้าแรกมากขึ้น
เมื่อผู้เยี่ยมชมไปที่หน้าแรก พวกเขาควรจะเข้าใจส่วนสำคัญของธีมของเว็บไซต์ของคุณ นอกจากนี้ องค์ประกอบทั้งหมดของหน้าแรกควรโหลดอย่างรวดเร็ว รวมถึงตัวเลือกการนำทางและรูปภาพ หน้าแรกควรให้ข้อมูลต่อไปนี้ด้วย:
- คำกระตุ้นการตัดสินใจ (เช่น ปุ่มสำหรับคลิกหรือแบบฟอร์มเพื่อกรอก)
- แถบเครื่องมือหรือเมนูนำทาง
- กราฟิกเชิญ (เช่น รูปภาพ วิดีโอ หรือรูปภาพหลายรูปพร้อมข้อความเสริม)
- คำหลักที่เกี่ยวข้องกับบริการ หัวข้อ หรือจุดสนใจของไซต์ของคุณ
ขั้นตอนที่ 7 ทดสอบไซต์ของคุณบนเบราว์เซอร์และแพลตฟอร์มต่างๆ
สิ่งนี้สำคัญมากเพราะเบราว์เซอร์ประมวลผลแง่มุมต่างๆ ของเว็บไซต์ด้วยวิธีต่างๆ ก่อนโปรโมตไซต์ของคุณ ให้ลองเปิดและใช้ไซต์ของคุณในเบราว์เซอร์ต่อไปนี้บนแพลตฟอร์ม Windows, Mac, iPhone และ Android:
- Google Chrome
- Firefox
- Safari (เฉพาะ iPhone และ Mac)
- Microsoft Edge และ Internet Explorer (เฉพาะ Windows)
- เบราว์เซอร์เริ่มต้นของโทรศัพท์ Android บางรุ่น (Samsung Galaxy, Google Nexus ฯลฯ)
ขั้นตอนที่ 8 อัปเดตเว็บไซต์อยู่เสมอ
เทรนด์การออกแบบ ลิงก์ รูปภาพ แนวคิด และคำสำคัญเปลี่ยนแปลงอยู่เสมอ ดังนั้น คุณเองก็ต้องทำการเปลี่ยนแปลงเพื่อให้ทันกับเวลาเช่นกัน คุณควรตรวจสอบประสิทธิภาพของไซต์และเปรียบเทียบกับไซต์ที่คล้ายกันอย่างน้อยทุกๆ สามเดือน (ควรให้บ่อยกว่านั้น)
เคล็ดลับ
- การเข้าถึงก็มีความสำคัญไม่แพ้กันในการพัฒนาเว็บไซต์ การเข้าถึงรวมถึงคำอธิบายสำหรับผู้เข้าชมที่มีความบกพร่องทางการได้ยิน คำอธิบายเสียงสำหรับผู้เข้าชมที่มีความบกพร่องทางสายตา และการแจ้งเตือนความไวแสงหากไซต์ของคุณใช้เอฟเฟกต์ที่อาจกระตุ้นให้เกิดการชัก
- ผู้สร้างเว็บไซต์ส่วนใหญ่มีเทมเพลตที่คุณสามารถใช้เพื่อกำหนดเลย์เอาต์และการออกแบบก่อนที่จะเพิ่มองค์ประกอบที่ต้องการ
คำเตือน
- ไซต์สำหรับผู้สร้างส่วนใหญ่นั้นฟรี แต่ถ้าคุณต้องการใช้โดเมนของคุณเอง (เช่น "www.yourname.com" แทน "www.yourname.wordpress.com") คุณจะต้องชำระค่าธรรมเนียมรายเดือนหรือรายปี
- หลีกเลี่ยงการลอกเลียนแบบและเรียนรู้กฎหมายลิขสิทธิ์ทั้งหมด อย่ารวมรูปภาพแบบสุ่มจากอินเทอร์เน็ตหรือองค์ประกอบโครงสร้างโดยไม่ได้รับอนุญาต
