หากคุณต้องการออกแบบและสร้างหน้าเว็บ กระบวนการนี้จะง่ายขึ้นมากหากคุณวางแผนล่วงหน้า ในขั้นตอนการวางแผน ผู้ออกแบบและลูกค้าสามารถทำงานร่วมกันเพื่อค้นหารูปแบบและเค้าโครงที่เหมาะสมกับความต้องการของพวกเขา กระบวนการวางแผนส่งผลต่อสไตล์หรือรูปแบบของไซต์ คุณอาจพูดได้ว่านี่เป็นส่วนที่สำคัญที่สุดในการออกแบบเว็บ โดยเฉพาะอย่างยิ่งหากเป็นเพื่อวัตถุประสงค์ทางธุรกิจ
ขั้นตอน
ส่วนที่ 1 จาก 4: การสร้างโครงสร้างพื้นฐาน
ขั้นตอนที่ 1 กำหนดหน้าที่ของเว็บไซต์
หากคุณกำลังสร้างไซต์ส่วนบุคคล คุณอาจรู้คำตอบอยู่แล้ว อย่างไรก็ตาม หากคุณกำลังสร้างไซต์สำหรับองค์กร บริษัท หรือบุคคลอื่น คุณต้องค้นหาสิ่งที่พวกเขาต้องการและฟังก์ชันการทำงานของไซต์ ทุกสิ่งที่คุณระบุที่นี่จะมีผลเมื่อหน้าเว็บเสร็จสิ้น
- เว็บไซต์จำเป็นต้องมีหน้าร้านหรือไม่? ผู้ใช้ควรแสดงความคิดเห็นหรือไม่? ผู้ใช้จะต้องสร้างบัญชีในภายหลังหรือไม่? เป็นบทความเว็บไซต์หรือไม่ หรือเน้นภาพ? คำถามเหล่านี้และคำถามอื่นๆ จะช่วยคุณในการออกแบบและออกแบบเว็บไซต์
- กระบวนการวางแผนนี้สามารถวาดเป็นรูปวาดได้ โดยเฉพาะอย่างยิ่งหากเป็นสำหรับบริษัทขนาดใหญ่และผู้คนจำนวนมากมีส่วนร่วมในการสร้างโครงการนี้
ขั้นตอนที่ 2 สร้างไดอะแกรมแผนผังเว็บไซต์ (แผนผังเว็บไซต์)
ไดอะแกรมแผนผังเว็บไซต์คล้ายกับแผนผังลำดับงาน ซึ่งแสดงให้เห็นว่าผู้ใช้ย้ายจากหน้าหนึ่งไปยังหน้าถัดไปอย่างไร คุณไม่จำเป็นต้องมีหน้าเว็บในขั้นตอนนี้ เพียงแค่ใช้แนวคิดทั่วไปเท่านั้น คุณสามารถใช้โปรแกรมคอมพิวเตอร์เพื่อสร้างไดอะแกรมหรือร่างของคุณเองบนกระดาษ ใช้ไดอะแกรมนี้เพื่อสาธิตแนวคิดของการจัดเรียงตามลำดับชั้นและการเชื่อมต่อหน้าเว็บ
ขั้นตอนที่ 3 ลองใช้วิธีการร่างบัตร
วิธีหนึ่งที่ได้รับความนิยมในการพัฒนาเว็บแบบกลุ่มคือการใช้การ์ดจำนวนหนึ่งเพื่อค้นหาความคาดหวังของทุกคน จดบันทึกย่อจำนวนหนึ่งและจดเนื้อหาพื้นฐานของหน้าเว็บในแต่ละอัน จัดเรียงการ์ดเหล่านี้ร่วมกับทีมของคุณเพื่อค้นหาแนวคิดที่ดีที่สุด วิธีนี้เหมาะสำหรับใช้เมื่อคุณทำงานร่วมกับผู้อื่นในการสร้างหน้าเว็บ
ขั้นตอนที่ 4 ใช้กระดาษและกระดานข่าวหรือกระดานไวท์บอร์ด
นี่เป็นวิธีการวางแผนดั้งเดิมโดยใช้งบประมาณเพียงเล็กน้อย คุณสามารถลบหรือเปลี่ยนเนื้อหาและเปลี่ยนโฟลว์ได้อย่างรวดเร็ว วาดการออกแบบเว็บของคุณลงบนกระดาษ จากนั้นต่อกระดาษด้วยด้ายหรือวาดเส้นบนกระดาน วิธีนี้เหมาะมากสำหรับใช้ในการระดมความคิด
ขั้นตอนที่ 5. สร้างคลังเนื้อหา
อันที่จริงแล้ว มีแนวโน้มว่าจะใช้ในการออกแบบเว็บใหม่มากกว่าในการออกแบบเว็บใหม่ แทรกเนื้อหาหรือหน้าเว็บที่ทำเสร็จแล้วลงในสเปรดชีต จดบันทึกวัตถุประสงค์ของเนื้อหาหรือหน้าแต่ละส่วน โดยใช้รายการนี้เพื่อกำหนดว่าจะนำสิ่งใดออกและสิ่งที่จะเก็บไว้ คุณสามารถลดความซับซ้อนของโครงสร้างของเว็บและทำให้กระบวนการออกแบบใหม่ง่ายขึ้นในภายหลัง
ส่วนที่ 2 จาก 4: การสร้างโครงร่าง HTML พื้นฐาน
ขั้นตอนที่ 1 สร้างโครงลวดเพื่อสร้างลำดับชั้นของหน้าเว็บ
เทมเพลต HTML พื้นฐานคือพิมพ์เขียวของไซต์ที่คุณจะสร้าง โดยใช้แท็กพื้นฐานและเนื้อหาตัวอย่าง (บล็อก/เทมเพลต) เท่านั้น กรอบนี้ตอบคำถามว่า “สิ่งที่ปรากฏบนเว็บและที่ใด” การจัดรูปแบบและการจัดรูปแบบไม่จำเป็นในการสร้างโครงร่างนี้
- คุณสามารถดูโครงสร้างและแผนผังลำดับงานของเนื้อหาด้วยโครงร่างพื้นฐานก่อนที่คุณจะเลือกการตั้งค่าสไตล์
- เทมเพลต HTML พื้นฐานไม่คงที่เหมือน PDF หรือรูปภาพ คุณสามารถปัดผ่านตัวอย่างเนื้อหาเพื่อสร้างโครงสร้างใหม่ได้อย่างรวดเร็ว
- เฟรมเวิร์กพื้นฐานเป็นแบบโต้ตอบซึ่งเป็นประโยชน์ต่อทั้งนักพัฒนาเว็บและลูกค้า เนื่องจากเฟรมเวิร์กพื้นฐานนี้เขียนด้วยโค้ด HTML อย่างง่าย คุณยังคงสามารถไปยังส่วนต่างๆ ของเฟรมเวิร์กและรู้ว่าการสลับหน้าเว็บทำงานอย่างไร ไม่สามารถทำได้ด้วย PDF
ขั้นตอนที่ 2 ลองใช้วิธีกล่องสีเทา
บล็อกหรือเน้นเนื้อหาหน้าเว็บของคุณใน Grey Box เนื้อหาที่สำคัญที่สุดอยู่ที่ด้านบนสุด จัดเรียงเนื้อหาในคอลัมน์เดียว ตัวอย่างเช่น หากหน้าคือ “เกี่ยวกับบริษัท” ข้อมูลโดยละเอียดเกี่ยวกับบริษัทจะอยู่ที่ด้านบนสุด ตามด้วยรายชื่อพนักงาน ข้อมูลติดต่อ ฯลฯ
ไม่รวมส่วนหัวและส่วนท้าย กล่องสีเทาคือการแสดงภาพของเนื้อหาที่จะปรากฏบนเว็บ
ขั้นตอนที่ 3 ลองใช้โปรแกรมสร้างโครงร่างพื้นฐาน
มีโปรแกรมต่างๆ ที่คุณสามารถใช้ในกระบวนการสร้างเว็บเฟรมเวิร์กพื้นฐานได้ จำนวนโค้ดการเขียนโปรแกรมเว็บ (ภาษา) ที่คุณต้องใช้จะแตกต่างกันไปในแต่ละโปรแกรม บางโปรแกรมที่ค่อนข้างเป็นที่นิยม ได้แก่:
- แพทเทิร์นแล็บ. ไซต์นี้จัดทำขึ้นเพื่อ "การออกแบบปรมาณู" โดยเนื้อหาแต่ละรายการถือเป็น "โมเลกุล" ที่ประกอบด้วยหน้าเว็บที่ใหญ่ขึ้น
- ผังย่อ หน้าเว็บนี้ให้บริการวางแผนและจัดทำกรอบทางเว็บ ไซต์เหล่านี้ได้รับเงินและต้องสมัครสมาชิก แต่คุณสามารถสร้างเฟรมเวิร์กเว็บได้อย่างรวดเร็วโดยไม่ต้องเชี่ยวชาญโค้ดการเขียนโปรแกรมเว็บเป็นจำนวนมาก
- ไวร์ฟาย. Wirefy เป็นอีกไซต์หนึ่งที่นำเสนอ "การออกแบบปรมาณู" นักพัฒนาเว็บสามารถรับเครื่องมือนี้ได้ฟรี
ขั้นตอนที่ 4 ใช้มาร์กอัป HTML อย่างง่าย
เทมเพลตพื้นฐานที่ดีจะแปลงเป็นไซต์ดั้งเดิมได้อย่างง่ายดาย อย่าคิดมากเกี่ยวกับการจัดรูปแบบเว็บในระหว่างขั้นตอนการสร้างเทมเพลตนี้ ใช้มาร์กอัปที่เข้าใจและเปลี่ยนแปลงได้ง่าย
กรอบพื้นฐานที่เรียบง่ายดีกว่ามาก จุดประสงค์ของการสร้างมาร์กอัปคือการสร้างโครงสร้าง รูปลักษณ์ภายนอกสามารถปรับได้ในภายหลังด้วย CSS และมาร์กอัปขั้นสูง
ขั้นตอนที่ 5 สร้างโครงร่างพื้นฐานสำหรับแต่ละหน้าเว็บ
คุณอาจถูกล่อลวงให้จัดหน้าเว็บทุกหน้าด้วยโครงร่างพื้นฐานเพียงอันเดียว อันที่จริง นี่จะทำให้เว็บไซต์ของคุณธรรมดาและน่าเบื่อเท่านั้น สร้างโครงร่างที่แตกต่างกันสำหรับแต่ละหน้า คุณจะเข้าใจว่าแต่ละหน้าต้องมีการออกแบบของตัวเอง
ส่วนที่ 3 จาก 4: การสร้างเนื้อหา
ขั้นตอนที่ 1. เตรียมเนื้อหาก่อนสร้างเว็บเพจ
คุณจะเห็นตัวอย่างการดูเว็บได้ง่ายขึ้นมาก หากคุณมีเนื้อหาจริงอยู่แล้วแทนที่จะใช้ตัวอย่างหรือตัวยึดตำแหน่ง คุณไม่จำเป็นต้องมีเนื้อหามากเกินไป แต่ม็อคอัพของคุณจะดูดีขึ้นมากหากคุณใช้สำเนาของภาพต้นฉบับ
คุณไม่จำเป็นต้องมีเนื้อหาบทความทั้งหมด แต่อย่างน้อยควรมีหัวข้อจริง
ขั้นตอนที่ 2 จำไว้ว่าเนื้อหาที่ยอดเยี่ยมไม่ใช่แค่ข้อความ
อินเทอร์เน็ตซับซ้อนกว่าหน้าเว็บที่มีข้อความธรรมดามาก คุณต้องมีเนื้อหาที่หลากหลายเพื่อสร้างเว็บไซต์ที่ยอดเยี่ยมเพื่อดึงดูดและเชิญผู้เยี่ยมชม ตัวอย่างเช่น:
- รูปภาพ.
- เสียง.
- วิดีโอ
- การส่งเว็บหรือเว็บสตรีม (Twitter)
- การรวม Facebook
- RSS
- เว็บฟีด
ขั้นตอนที่ 3 ขอความช่วยเหลือจากช่างภาพมืออาชีพ
หากคุณต้องการใส่รูปภาพลงในไซต์ของคุณ ความประทับใจแรกที่คุณจะได้รับจากเว็บไซต์ของคุณจะดีกว่ามากหากเต็มไปด้วยภาพถ่ายระดับมืออาชีพ ภาพถ่ายที่ดีหนึ่งภาพมีค่ามากกว่าภาพถ่ายคุณภาพต่ำยี่สิบภาพ
มองหาบัณฑิตใหม่ของศิลปะการถ่ายภาพเป็นวิธีแก้ปัญหาที่ถูกกว่าช่างภาพมืออาชีพที่อยู่ในธุรกิจนี้มาเป็นเวลานาน
ขั้นตอนที่ 4 เขียนบทความที่มีคุณภาพ
เนื้อหาที่เป็นลายลักษณ์อักษรบนหน้าเว็บจะเป็นตัวกำหนดปริมาณการเข้าชมเว็บของคุณ แม้ว่าคุณจะไม่ต้องกังวลกับการสร้างเนื้อหามากเกินไปในกระบวนการออกแบบนี้ แต่ก็ไม่เจ็บที่จะเริ่มคิดเกี่ยวกับเรื่องนี้ เพราะคุณจะต้องใช้เนื้อหาเป็นประจำเมื่อไซต์ของคุณเริ่มทำงาน
นอกจากเนื้อหาบทความแล้ว ยังมีเนื้อหาที่เป็นลายลักษณ์อักษรที่คุณจำเป็นต้องมีในกระบวนการรวบรวมหน้าเว็บด้วย ตัวอย่างเช่น ข้อมูลติดต่อ ชื่อบริษัท หรือสิ่งอื่นใดที่จะใช้บนเว็บไซต์หลายครั้ง
ส่วนที่ 4 จาก 4: การเปลี่ยนแนวคิดให้เป็นเว็บไซต์
ขั้นตอนที่ 1 จัดเรียงองค์ประกอบพื้นฐาน
การจัดเรียงองค์ประกอบนี้ใช้กับทุกหน้าในไซต์ของคุณ เช่น ส่วนหัว เชิงอรรถ และเมนูการนำทาง ตั้งค่าในสไตล์ที่เรียบง่ายเพื่อให้คุณสามารถตรวจสอบได้ว่าหน้าทั้งหมดมีลักษณะอย่างไร สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณเข้าสู่กระบวนการจัดวางเว็บ
อย่ากังวลกับรายละเอียดมากเกินไป ลองดูตัวอย่าง (ดูตัวอย่าง) ว่าส่วนหัวมีลักษณะอย่างไร
ขั้นตอนที่ 2 สร้างเค้าโครงอย่างง่าย
เริ่มต้นด้วยการเปลี่ยนตำแหน่งนาฬิกาจากคอลัมน์โครงร่างฐานไปยังตำแหน่งจริงบนหน้า ตัวอย่างเช่น คุณอาจต้องการย้ายเมนูการนำทางตัวอย่างไปทางด้านซ้ายของหน้าและรายการของพาดหัวไปทางขวา
ทำการทดลองกับเค้าโครงเว็บสำหรับหลายๆ หน้า ก่อนที่คุณจะไปยังขั้นตอนถัดไป ให้คนอื่นดูเพื่อดูว่าเลย์เอาต์ที่คุณสร้างนั้นดูมีชีวิตชีวาหรือไม่
ขั้นตอนที่ 3 สร้างแบบจำลอง
ใช้โปรแกรมเช่น Photoshop เพื่อสร้างแบบจำลองหรือหน้าตัวอย่างเว็บไซต์ของคุณ ใช้เค้าโครงที่คุณได้รวบรวมไว้เป็นแนวทาง คุณสามารถสร้างม็อคอัพได้เร็วขึ้นและได้ผลลัพธ์ที่คุณต้องการด้วยโปรแกรมประมวลผลภาพ ผลลัพธ์ของรูปภาพเหล่านี้สามารถใช้เป็นข้อมูลอ้างอิงในกระบวนการเขียนโค้ดโปรแกรมเว็บได้ในภายหลัง
ใส่เนื้อหาจริงลงในม็อคอัพเพื่อให้ดูดี
ขั้นตอนที่ 4 แทนที่แนวคิดตัวอย่างด้วยเนื้อหาดั้งเดิม
เพิ่มเนื้อหาและองค์ประกอบลงในหน้าเว็บ อย่าเพิ่งเบื่อกับการตั้งค่ารูปแบบเว็บ เพียงวางทุกอย่างไว้ในตำแหน่งที่ถูกต้อง วิธีนี้จะช่วยคุณตรวจสอบการเปลี่ยนแปลงรูปแบบเว็บที่คุณทำในภายหลัง
ขั้นตอนที่ 5. สร้างคู่มือสไตล์เว็บ
สิ่งสำคัญคือต้องรักษาสไตล์ที่ผสมผสานกันไว้ โดยเฉพาะอย่างยิ่งสำหรับไซต์ขนาดใหญ่ หากไซต์มีจุดประสงค์เพื่อวัตถุประสงค์ทางธุรกิจและมีแบรนด์หรือรูปแบบเป็นของตัวเองอยู่แล้ว ควรรวมสิ่งนี้เข้ากับการออกแบบไซต์ สิ่งที่ต้องพิจารณาเมื่อสร้างคู่มือสไตล์หน้าเว็บ:
- การนำทาง
- หัวบันทึก
- ย่อหน้า
- ตัวเอียง
- ตัวละครตัวหนา
- ลิงค์ (ใช้งาน, ไม่ใช้งาน, โฮเวอร์)
- การใช้ภาพ
- ไอคอน
- ลูกบิด
- รายการ
ขั้นตอนที่ 6 ใช้สไตล์เว็บ
เมื่อคุณพบสไตล์และการออกแบบที่เหมาะสมแล้ว ให้นำไปใช้ CSS เป็นหนึ่งในวิธีที่ง่ายที่สุดในการนำสไตล์ไปใช้บนเว็บเพจหรือทั่วทั้งไซต์ ดูคำแนะนำต่อไปนี้เพื่อทำความเข้าใจรายละเอียดการใช้ CSS ให้ดีขึ้น
