บัญญัติ 8 ประการของกระบวนการออกแบบเว็บ (สำหรับมือใหม่ & ไม่มีโค้ด)
เผยแพร่แล้ว: 2021-11-01
ค้นหาวิธีสร้างเว็บไซต์ที่ประสบความสำเร็จโดยทำตามขั้นตอนการออกแบบเว็บไซต์ที่มีโครงสร้าง
สมมติฐานของเราคือคุณได้พบชื่อโดเมนและผู้ให้บริการโฮสติ้งแล้ว
หากคุณยังไม่ได้เลือกโฮสต์ของคุณ เราขอแนะนำ Cloudways ที่ เป็นพันธมิตร ของ เรา
ในตัวอย่างด้านล่าง มีการนำเสนอขั้นตอนสำหรับกรณีที่คุณกำลังสร้างเว็บไซต์สำหรับตัวคุณเอง หากเว็บไซต์มีไว้สำหรับลูกค้า ขั้นตอนใหม่อาจเกิดขึ้นในแง่ของการวางแผนโครงการ การตั้งค่ากำหนดเวลา สัญญา และอื่นๆ แต่โดยพื้นฐานแล้ว คุณยังต้องปฏิบัติตามขั้นตอนที่แสดงด้านล่าง
ต่อไปนี้เป็นขั้นตอน:
- การระบุขอบเขต : เว็บไซต์ต้องตอบสนองความต้องการอะไรบ้าง? เว็บคุยกับใคร? เป้าหมายและแรงจูงใจของมันคืออะไร? ธุรกิจใดบ้างที่มีขอบเขตและผู้ชมเป้าหมายเดียวกันกับคุณ
- การกำหนดแผนผังไซต์ของเว็บไซต์ : หน้าเว็บและคุณลักษณะใดบ้างที่ช่วยให้ธุรกิจและผู้ชมบรรลุเป้าหมายได้
- การสร้างเนื้อหา : การเตรียมสำเนาสำหรับหน้าของเว็บไซต์
- การสร้างแบรนด์ภาพ : การเตรียมจานสี ฟอนต์ และกราฟิกเพื่อใช้ในการออกแบบเว็บไซต์ของคุณ ซึ่งท้ายที่สุดแล้วจะเป็นการสร้างเอกลักษณ์ทางภาพของคุณ
- Wireframing: ร่างเค้าโครงหน้าเว็บของคุณ
- การออกแบบเว็บไซต์ : การสร้างเว็บไซต์จริง ตระหนักถึงข้อจำกัดของเครื่องมือที่คุณใช้
- การทดสอบ : ตรวจสอบให้แน่ใจว่าทุกอย่างใช้งานได้ตั้งแต่ลิงก์ไปยังแบบฟอร์มและปุ่มต่างๆ ทดสอบเว็บไซต์บนเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้อง
- เปิดตัว: ส่งเสียงก่อนถ่ายทอดสดด้วยกลยุทธ์การสื่อสารที่วางแผนไว้อย่างรอบคอบ
ลองมาดูทีละคน
ขั้นตอนการออกแบบเว็บไซต์
1. การระบุขอบเขต
ในขั้นตอนนี้ คุณและทีมของคุณจะต้องค้นหาคำตอบสำหรับคำถามบางข้อด้านล่างนี้:
- เว็บไซต์สำหรับใคร?
เว็บไซต์ที่สะดุดตาอาจมีข้อดีของมัน แต่ถ้าคุณต้องการให้ผู้เข้าชมเว็บไซต์ของคุณใช้เงินหรือเวลา นั่นหมายความว่าคุณจำเป็นต้องค้นคว้าเพิ่มเติม เพื่อโน้มน้าวพวกเขาว่าคำสัญญานั้นคุ้มค่า คุณจะต้องเข้าใจกลุ่มเป้าหมายของคุณ เข้าใจความต้องการของกลุ่มเป้าหมาย ตัวกระตุ้นภายในและภายนอก
การขุดนี้ยังหมายความว่าคุณจำเป็นต้องสร้างผลิตภัณฑ์ที่มีประโยชน์และแก้ปัญหาความต้องการของใครบางคน
ตัวอย่างเช่น สมมติว่าฉันมีงานอดิเรกทำดอกไม้กระดาษและต้องการนำไปต่อยอดและแปรรูปเป็นธุรกิจ ใครมีดอกไม้กระดาษบ้าง? ฉันจะหาบุคคลเหล่านี้ได้ที่ไหน
ฉันอาจคิดว่านักวางแผนงานแต่งงานและเจ้าสาวในอนาคตอาจต้องการตัวเลือกดังกล่าว
แต่ฉันต้องไปให้ไกลกว่านี้ เจ้าสาวทุกคนต้องการดอกไม้กระดาษหรือเจ้าสาวแบบใดแบบหนึ่งหรือไม่?
ซึ่งหมายความว่าคุณจะต้องทำการวิจัยและตรวจสอบคู่แข่งของคุณ มีพ่อค้าดอกไม้กระดาษรายอื่นอีกไหม? คุณยังแข่งขันกับร้านดอกไม้เก่าที่ดีอีกด้วย ซึ่งจะเป็นมูลค่าเพิ่มของคุณหรือคุณค่าที่เป็นเอกลักษณ์ของคุณ?
- ผู้เข้าชมเว็บไซต์ของคุณคาดหวังอะไรจากเว็บไซต์ของคุณ?
ย้อนกลับไปที่ตัวอย่างของเรา ผู้เยี่ยมชมของคุณอาจต้องการดูผลิตภัณฑ์ สีสัน ข้อมูลการจัดส่งที่หลากหลาย (พวกเขาอาจต้องการการดูแลเป็นพิเศษเนื่องจากดอกไม้กระดาษบอบบาง) ฯลฯ บางคนกล่าวว่ากระดาษรีไซเคิล ? บางทีลูกค้าของคุณอาจตระหนักดีถึงผลกระทบที่มีต่อสิ่งแวดล้อม และพวกเขาก็ใส่ใจในรายละเอียดดังกล่าว
มีใครเช่าดอกไม้ได้บ้าง
แล้วถ้าคุณรวมคำรับรองไว้บ้างล่ะ บางทีคุณอาจออกแบบการจัดดอกไม้กระดาษสำหรับงานแต่งงานของเพื่อนคุณ
ดูว่าฉันจะได้รับที่? คุณต้องทำวิจัยก่อนที่จะกระโดดเข้าสู่การออกแบบเว็บไซต์
- การแปลงมีลักษณะอย่างไร
เรากำลังพูดถึงการลงทะเบียนหลักสูตร การซื้อผลิตภัณฑ์ การสมัครรับจดหมายข่าวหรือไม่?
ในกรณีของวันจันทร์ คุณสามารถคำนวณ Conversion ได้อย่างง่ายดายจากหน้าแรก 
Conversion หลักนั้นชัดเจนจากการเรียกร้องให้ดำเนินการ "เริ่มต้น" ซึ่งอยู่ในตำแหน่งครึ่งหน้าบนตรงกลาง
การแปลงแบบไมโครอีกรูปแบบหนึ่งคือการลงทะเบียนการประชุม ซึ่งคุณสามารถสังเกตได้จากข้อความที่มุมบนซ้าย
micro-conversion อีกอันหนึ่งคือ "ติดต่อฝ่ายขาย"
แล้วเว็บไซต์ของคุณมี Conversion หลักหรือไม่? มีรองบ้างมั้ย?
- การเดินทางของลูกค้ามีลักษณะอย่างไร?
แผนที่การเดินทางของลูกค้าเป็นภาพที่แสดงเส้นทางที่ผู้เยี่ยมชมใช้ผ่านเว็บไซต์ของคุณตั้งแต่ทางเข้าจนถึงเป้าหมายที่ต้องการและจากไป
แผนที่การเดินทางของลูกค้าควรมีข้อมูลเช่น หน้าที่เข้าชม และลำดับ ขั้นตอนที่จำเป็นเพื่อให้ผู้เยี่ยมชมเว็บไซต์บรรลุเป้าหมาย จุดปฏิสัมพันธ์ระหว่างบริษัทของคุณและผู้เยี่ยมชมเว็บไซต์ (แบบฟอร์ม แชท ฯลฯ ) จุดเสียดสีที่อาจเกิดขึ้น
การเดินทางของลูกค้าไม่ได้รับการแก้ไข คุณเริ่มต้นด้วยสมมติฐานแล้วปรับไปพร้อมกัน คุณสามารถใช้เครื่องมือต่างๆ เช่น Google Analytics เพื่อวิเคราะห์พฤติกรรมของเว็บไซต์ และทำการเพิ่มประสิทธิภาพตามข้อมูลเชิงลึกที่แท้จริง
2. การกำหนดแผนผังเว็บไซต์ 
แหล่งที่มา
เมื่อการเดินทางของลูกค้าชัดเจนแล้ว ก็ถึงเวลาสร้างแผนผังเว็บไซต์ แผนผังเว็บไซต์ของเว็บไซต์ใช้เพื่อสร้างสถาปัตยกรรมข้อมูลของเว็บไซต์และอธิบายความสัมพันธ์ระหว่างหน้าต่างๆ
คุณสามารถสร้างแผนผังเว็บไซต์ในเครื่องมือต่างๆ ตั้งแต่ Excel ไปจนถึง Figma
3. การสร้างเนื้อหา 
เมื่อสร้างโครงสร้างของเว็บไซต์แล้ว ก็ถึงเวลาสร้างเนื้อหาสำหรับหน้าแต่ละหน้า
ต่อไปนี้คือแนวทางปฏิบัติที่ดีที่สุดบางประการสำหรับการเขียนคำโฆษณา:
- ใช้คำและแนวคิดที่คุ้นเคยกับผู้ใช้ในอุดมคติของคุณ
- อย่าไปกับปุยและศัพท์แสง
- พยายามสื่อสารแบบที่คุณทำในการเผชิญหน้าแบบเห็นหน้ากันตามปกติ วิธีนี้จะทำให้คุณรู้สึกคุ้นเคย
- เขียนในกาลปัจจุบันและหลีกเลี่ยงเสียงโต้ตอบ
- ตรวจสอบความสามารถในการอ่านของคุณเสมอ สำหรับสิ่งนี้ คุณสามารถใช้เครื่องมือ ต่างๆ เช่น Readable
- ทดสอบหัวข้อข่าวของคุณกับเพื่อน คนแปลกหน้า เพื่อนร่วมงาน ดังที่ David Ogilvy กล่าวไว้:
“โดยเฉลี่ยแล้ว ผู้คนจำนวนมากอ่านพาดหัวข่าวมากกว่าอ่านเนื้อหา 5 เท่า เมื่อคุณเขียนพาดหัวข่าว คุณได้ใช้เงินไปแปดสิบเซ็นต์จากเงินดอลลาร์ของคุณ”
ซึ่งหมายความว่าหัวข้อข่าวมีความสำคัญต่อเว็บไซต์
พยายามเพิ่มประสิทธิภาพเนื้อหาของคุณโดยใช้คำหลักที่เกี่ยวข้องบางคำสำหรับผู้ชมของคุณ (SEO) คุณสามารถใช้เครื่องมือต่างๆ เช่น Google เทรนด์ (ฟรี), Ubersuggest (ฟรี) หรือ Ahrefs (ชำระเงิน)
- ใช้ประโยชน์จากกรอบการเขียนคำโฆษณา AIDA
A – Attention : สร้างเนื้อหาที่ดึงดูดความสนใจ กระตุ้นความอยากรู้ และนั่นทำให้ผู้ชมเชื่อว่าต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับแบรนด์ของคุณ
ฉัน – ดอกเบี้ย : ให้เหตุผลแก่ผู้เข้าชมของคุณที่จะยังคงมีส่วนร่วม กุญแจสำคัญในที่นี้คือการทำให้ปัญหาเป็นเรื่องส่วนตัว เพื่อให้คุณพูดกับผู้มีแนวโน้มจะเป็นลูกค้าเท่านั้น ไม่ใช่คนอื่น
D – ความปรารถนา : นี่คือที่ที่คุณแสดงให้ผู้เยี่ยมชมหน้าแรกของคุณเห็นว่าข้อเสนอของคุณมีวิธีแก้ปัญหา/ความเจ็บปวดของพวกเขาอย่างไร ที่นี่คุณสามารถเริ่มอธิบายคุณลักษณะของผลิตภัณฑ์ของคุณ โดยเน้นที่คุณลักษณะเหล่านั้นสามารถปรับปรุงชีวิตของพวกเขาได้อย่างไร
A – การดำเนินการ : ตอนนี้ถึงเวลาที่จะชักชวนให้ผู้ที่มีแนวโน้มจะเป็นลูกค้าดำเนินการ: ซื้อ สมัครรับข้อมูล ดาวน์โหลด freebie เริ่มทดลองใช้งาน ฯลฯ
4. การสร้างภาพลักษณ์ของแบรนด์
ขั้นตอนนี้ไม่จำเป็นต้องเป็นขั้นตอนที่ 4 เสมอไป คุณสามารถเริ่มต้นได้เร็วกว่านี้ในกระบวนการนี้
เอกลักษณ์ทางภาพหมายถึงวิธีที่คุณกำหนดการรับรู้รอบแบรนด์ของคุณ
นี่เป็นกระบวนการทั้งหมดด้วยตัวเอง
ที่นี่คุณจะต้อง:
- กำหนดลักษณะ กราฟิก ของคุณควรมีลักษณะอย่างไร คุณจะใช้รูปร่าง กราฟิก 3 มิติ ภาพประกอบหรือไม่?
แหล่งที่มา
- กำหนด รูปแบบตัวอักษรของเว็บไซต์ของ คุณ
แหล่งที่มา
- เลือก จานสี จากจานสี คุณสามารถพัฒนาเป็นคู่มือสไตล์ ซึ่งคุณสามารถสร้างสีของลิงก์ พาดหัว ปุ่ม พื้นหลัง ฯลฯ สำหรับสิ่งนี้ คุณสามารถใช้เครื่องมือต่างๆ เช่น วงล้อสี Adobe
แหล่งที่มา
- ปรับ แต่งภาพ ที่บอกเล่าเรื่องราวของแบรนด์ของคุณ
ที่มา: https://convertsquad.com/blog/
- ออกแบบโลโก้ของคุณ
แหล่งที่มา
- เตรียม ทรัพย์สินทางกายภาพ (บรรจุภัณฑ์ของผลิตภัณฑ์ ฯลฯ)
แหล่งที่มา
องค์ประกอบส่วนใหญ่ข้างต้นสามารถใช้เพื่อสร้างบอร์ดอารมณ์ได้ เมื่อคุณรวบรวมแบบอักษร กราฟิก สีในมูดบอร์ด คุณจะสามารถเข้าใจวิสัยทัศน์อารมณ์ของเว็บไซต์โดยรวมได้ดีขึ้น น้ำเสียงและเสียงโดยรวมของคุณจะเป็นอย่างไร: สว่างหรือมืด? เป็นทางการหรือขี้เล่น? 
แหล่งที่มา
5. โครงลวด 
แหล่งที่มา
Wireframes คือภาพสเก็ตช์ของหน้าเว็บหรือแอป คุณสามารถวาดมันด้วยมือ สร้างมันใน Google Docs, Sketch หรือ Figma ขึ้นอยู่กับความซับซ้อนของเว็บไซต์ของคุณ โครงร่างจะใช้เพื่อจัดวางเนื้อหาและการทำงานบนหน้า ควรบอกนักออกแบบว่าเขาควรวางวิดีโอ รูปภาพ พาดหัว บล็อกเนื้อหา ปุ่ม ฯลฯ ไว้ที่ใด การใช้เฟรมเรตก่อนที่จะกระโดดเข้าสู่การออกแบบ ถือเป็นการดีเพราะจะช่วยให้คุณมีความยืดหยุ่นมากขึ้น การแก้ไขโครงสร้างของโครงร่างได้ง่ายกว่าเว็บไซต์ที่ออกแบบพร้อมแล้ว
6. ออกแบบเว็บไซต์ 
แหล่งที่มา
ตอนนี้เรากำลังพูดถึงธุรกิจ!
เรามีเนื้อหา โครงลวด องค์ประกอบภาพ ตอนนี้ได้เวลาทำงานแล้ว
ตามที่กล่าวไว้ในชื่อ คุณไม่จำเป็นต้องเป็นนักออกแบบเว็บไซต์หรือผู้มีความรู้ด้านโค้ดเพื่อสร้างเว็บไซต์ มีเครื่องมือมากมายที่จะช่วยคุณออกแบบเว็บไซต์โดยไม่ต้องใช้โค้ด เรียกว่า Page Builders
ส่วนใหญ่อนุญาตให้คุณปรับแต่งการออกแบบทุกตารางนิ้ว และทำให้ตอบสนองได้
ภายใน WordPress คุณสามารถใช้ตัวสร้าง Colibri หรือ Elementor ของเราได้ นอก WordPress, Wix และ Squarespace เป็นที่นิยมอย่างมาก เครื่องมือเหล่านี้สามารถให้แม่แบบแก่คุณได้ ซึ่งคุณสามารถเพิ่มส่วนต่างๆ ภาพและเนื้อหาของคุณเองได้
ตอนนี้ ถ้าการออกแบบของคุณต้องใช้แอนิเมชั่น เอฟเฟกต์ คุณอาจต้องเพิ่มโค้ด
7. การทดสอบ
ตกลง สมมติว่าเนื้อหาและภาพของคุณพร้อมใช้งานแล้ว งานของคุณยังไม่พร้อม ถึงเวลาที่ต้องตรวจสอบให้แน่ใจว่าทุกอย่างใช้งานได้: คุณไม่มีลิงก์ใด ๆ ที่นำไปสู่ไม่มีที่ไหนเลย (หรือที่เรียกว่าลิงก์เสียหรือ 404) ที่ปุ่มและแบบฟอร์มทั้งหมดของคุณใช้งานได้ เว็บไซต์ดูดีในเบราว์เซอร์และอุปกรณ์ส่วนใหญ่
ก่อนเปิดตัว คุณสามารถทดสอบเล็กน้อยว่าเว็บไซต์ของคุณถูกมองโดยบุคคลภายนอกอย่างไร วิธีนี้จะทำให้คุณสามารถหลีกเลี่ยงการถูกจับในอคติของคุณเองได้ สำหรับสิ่งนี้ คุณสามารถทำวิจัยผู้ใช้อย่างง่าย: การ ทดสอบ 5 วินาที นี่เป็นวิธีการที่ช่วยให้คุณวัดได้ว่าความประทับใจแรกที่ผู้ใช้ได้รับภายใน 5 วินาทีแรกของการดูหน้าแรกคืออะไร เป็นต้น
8. เปิดตัว
ตอนนี้ เมื่อคุณเปิดตัว คุณเพียงแค่กดเผยแพร่ และคุณทำเสร็จแล้ว ไม่ คุณจำเป็นต้องสร้างกระแส เปิดตัวแคมเปญประชาสัมพันธ์ ทำเสียงตะโกนบนโซเชียลมีเดียเพื่อให้คนอื่นรู้ว่าคุณออกไปแล้ว!
และนั่นคือคนห่อ ตอนนี้คุณมีขั้นตอนที่ถูกต้องสำหรับกระบวนการออกแบบเว็บแล้ว
สร้างเว็บไซต์อย่างมีความสุข!
หากคุณชอบบทความนี้ และต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธี ออกแบบเว็บไซต์ WordPress อย่าลืมสมัครรับข้อมูลจาก ช่อง Youtube ของ Colibri และติดตามเราบน Twitter และ Facebook!