ขั้นตอนการพัฒนาเว็บไซต์
ขั้นตอนที่ 1 กำหนดโครงสร้างของเว็บไซต์
การสร้างเว็บไซต์นั้นควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า Site Map ดังภาพตัวอย่างมีการกำหนดหน้าเว็บเพจ 4 หน้า
ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ
เราต้องกำหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกันเพื่อให้กลับไปกลับมา ระหว่างหน้าต่าง ๆ ได้ โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์กันดังภาพ
ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า
ออกแบบหน้าเว็บเพจแต่ละหน้าให้สวยงาม โดยเฉพาะในเว็บเพจหน้าแรก ซึ่งเรียกว่าโฮมเพจควรออกแบบให้สวยงามเพื่อดึงดูดความสนใจของผู้เข้าชมในขั้นตอนการออกแบบนี้ บางทีอาจเรียกว่าการออกแบบเลย์เอาท์ (Lay Out) สามารถทำได้โดยการเขียนลงในกระดาษ หรือใช้โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบก็ได้
ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า
นำเว็บเพจที่ออกแบบไว้มาสร้างโดยใช้ภาษาhtml หรืออาจใช้โปรแกรมสำเร็จรูป เช่นFrontPage, Macromedia Dreamweaver หรือโปรแกรมสำเร็จรูปอื่น ๆ ตามความถนัด
ขั้นตอนที่ 5 เผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต
เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บุคคลอื่น ๆ สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการก็คือนำเว็บไซต์ที่เราสร้างขึ้นไปไว้บนพื้นที่ ที่ให้บริการ(Web Hosting) ซึ่งมีพื้นที่ ที่ให้บริการฟรี และแบบที่ต้องเสียค่าบริการ
ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์
หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่สำหรับฝากเว็บไซต์แล้ว ให้ใช้โปรแกรมสำหรับอัปโหลด (Upload) เช่นโปรแกรม CuteFTP, Fiezilla เป็นต้นเพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของเราผ่านทางระบบเครือข่ายอินเทอร์เน็ตได้
ส่วนประกอบของเว็บไซต์ที่ดี
สำหรับคนที่เริ่มต้นออกแบบเว็บไซต์ในครั้งแรกไม่รู้ว่าจะเริ่มอย่างไรดี ในเนื้อหานี้จะแนะนำวิธีการในการออกแบบเว็บไซต์ที่เว็บทั่วไปควรมี ดังรูปที่เห็นด้านล่างเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้
Containing block
โดยปรกติเราจะเขียน <div> หรือ <table> ต่อจาก <body> เพื่อเอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะมีข้อดีอยู่ตรงที่ สามารถทำให้ปรับเปลี่ยนขนาดในการแสดงผลของเนื้อหาได้ หรือตำแหน่งการแสดงผลของเว็บไซต์ได้เช่น จัดกลาง ชิดซ้าย หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทำได้ยากมาก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง
Logo
เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทำให้ลูกค้าหรือผู้ใช้งานจดจำเราได้ ด้วยเหตุนี้เองทำให้การออกแบบเว็บไซต์นั้นจำเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตำแหน่งที่ควรจะวางโลโก้ไว้คือตำแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งานจำได้ และสะดุดตา เรื่องที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนำไปสู่หน้าแรกของเว็บไซต์เสมอ
Navigation
เป็นส่วนที่จะนำผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์ โดยสามารถทำให้อยู่ในแนวนอน หรือแนวตั้งก็ได้ หากสังเกต www.glongchalk.com เราจะทำในแนวนอน ตำแหน่งที่ควรจะวาง navagation เอาไว้คือสีเขียวทั้งหมด ถ้าสังเกตดูจะพบว่าการวางตำแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของเว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่ควรวางไว้ในตำแหน่งที่ผู้ใช้จะต้องเลื่อนขึ้นลง ซ้ายขวา
Content
ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สำคัญมากที่สุด หากผู้ใช้งานไม่สามารถเข้าถึงได้โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ทันที ตำแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตำแหน่งอื่นๆที่คิดว่าจะทำให้ผู้หาเจอได้โดยไม่ลำบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มีโฆษณาที่มากจนเกินไป ทำให้ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการออกแบบที่ผิดพลาด
Footer
คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ต่างๆเอาไว้ หรือเป็นเนื้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่าจำเป็นต้องมีหรือไม่ บอกได้ว่าจำเป็นอย่างยิ่ง footer จะเป็นตัวบอกผู้ชมว่าส่วนนี้คือล่างสุดของหน้าที่กำลังแสดงอยู่แล้วนะ ไม่มีเนื้อหาเพิ่มเติมแล้ว ทำไมต้องบอกเนื่องจากการแสดงเว็บไซต์ในบางครั้งนั้นหน้านั้นอาจโหลดได้ไม่หมด อาจแสดงได้แค่เนื้อหาภายใน หากเราออกแบบให้มี footer ตั้งแต่แรกผู้ใช้งานก็จะรู้ได้ทันทีว่าหน้าที่แสดงผลนี้อาจแสดงได้ไม่สมบูรณ์เพราะยังไม่เห็น footer และยังมีผลต่อภาพลักษณ์ของเว็บไซต์โดยตรง เราจะสังเกตได้ว่าเมื่อเข้าไปดูเว็บไซต์ที่ไม่มี footer จะรู้สึกเหมือนกับว่าเว็บไซต์นั้นยังทำไม่เสร็จ หรือขาดอะไรบางอย่าง
Whitespace
พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็นความสำคัญของการเว้นพื้นที่ว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทำให้เว็บดูสวยงามขึ้น หรือใช้พื้นที่มีมีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คำนึงว่าต้องมีพื้นที่ว่างอยู่ในเว็บไซต์ จะทำให้เว็บของเรานั้นดูอึดอัดทันที การเว้นช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่างระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทำให้เว็บของเราดูสบายตาขึ้นแล้ว ยังทำให้เราสามารถกำหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจในจุดนั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนำภาพหรือตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้นจะเป็นที่สนใจของผู้ใช้ทันที
ข้อคิดในการออกแบบเว็บไซต์ เพื่อการใช้งานที่ง่ายสำหรับผู้ใช้
ผู้ใช้เว็บไซต์ หรือผู้เข้าชมเป็นส่วนประกอบสำคัญที่สุดของเว็บไซต์ ถึงแม้ว่าเว็บไซต์จะดีเพียงใดถ้าไม่มีผู้ใช้งานก็ไม่มีประโยชน์ ในเนื้อหานี้จะพูดถึงวิธีในการออกแบบโดยคำนึงถึงผู้ใช้งาน ให้สามารถใช้งานได้ง่ายที่สุด
การออกแบบเว็บไซต์นั้นมีความแตกต่างกับการออกแบบสิ่งพิมพ์ทั่วไป ถึงแม้ว่าจะมีจุดประสงค์เพื่อใช้ตัวหนังสือ รูปภาพเพื่อสื่อสารกับผู้ใช้เหมือนกันก็ตาม ดังนั้นเราต้องคำนึงถึงส่วนประกอบต่างๆว่าสิ่งใดควรมีในเว็บไซต์ หรือไม่ควรมีในเว็บไซต์ โดยสิ่งที่ควรคำนึงถึงมีหัวข้อหลักๆดังนี้
– จำไว้เสมอว่าผู้เข้าชมเว็บไซต์นั้นใจร้อนไม่มีความอดทนในการอ่านอะไรมากมาย ไม่สามารถอ่านทุกข้อความที่เราเขียนในเว็บไซต์ ทุกคนจะทำเพียงแค่อ่านผ่านๆไปเพื่อให้ได้ข้อมูลที่ต้องการเท่านั้น
– การมีรูปแบบที่แน่นอนของเว็บไซต์มีความสำคัญมาก ในหน้าทุกหน้าของเว็บไซต์ควรมีความคล้ายกัน เพื่อให้ผู้ใช้งานยังรู้ว่าอยู่ในเว็บไซต์เดิม และส่วนของเมนูก็ควรว่างไว้ในตำแหน่งที่เหมือนเดิม หรือไม่ต่างจากหน้าอื่นๆมากนักเพื่อให้ผู้ใช้งานเกิดความคุ้นเคยการใช้งานเว็บไซต์
– เว็บไซต์ควรดูเป็นมิตร เช่นไม่ควรใส่เนื้อหาที่เป็นตัวหนังสือทั้งหมด อาจมีการแทรกรูปภาพ หรือพื้นที่ว่างๆไว้ในเว็บไซต์บ้าง เพื่อเป็นจุดพักสายตาของผู้ใช้
หลักที่กล่าวไปทั้ง 3 ข้อนั้นสามารถปฏิบัติเป็นขั้นตอนง่ายๆ ดังนี้
1. เว็บไซต์ของเราต้องสามารถโหลดหน้าเว็บได้อย่างรวดเร็ว และง่ายต่อการอ่านผ่านๆ แต่ละหัวข้อต้องแบ่งให้ชัดเจน เพื่อให้ผู้ใช้สามารถแบ่งเนื้อหาส่วนต่างๆออกกันได้
2. ผู้ใช้งานเว็บไซต์แต่ละคนนั้นเข้ามาในเว็บเพื่อต้องการข้อมูลที่แตกต่างกัน เราควรให้ผู้ใช้งานหาข้อมูลที่ต้องการได้โดยง่ายที่สุด นั้นคือการเข้าถึงข้อมูลไม่ควรให้ผู้ใช้คลิกมากเกินไป
3. การออกแบบงานกราฟิกควรจะสอดคล้องกับเนื้อหาที่นำเสนอ หลายครั้งที่ภาพประกอบในเนื้อหาเบี่ยงเบนความสนใจจากเนื้อหา และทำให้ผู้อ่านเข้าใจเพราะภาพไม่ตรงกับเนื้อหา ผู้ใช้งานอาจข้ามผ่านเนื้อหาส่วนนั้นไป เพราะเห็นว่าภาพที่แสดงอยู่ไม่เกี่ยวข้องกับความต้องการ
4. ชนิดของตัวหนังสือ (font) และสี ทั้งสีของพื้นหลัง และสีของตัวหนังสือเอง จะต้องทำให้ง่ายต่อการอ่านมากที่สุด วิธีการพิจารณาคือให้พื้นหลังเป็นสีสว่าง ส่วนสีตัวอักษรจะต้องเป็นสีทึบ หรือสีเข้ม
5. ตัวหนังสือหรือภาพที่มีการขยับ ปิดๆดับ (Blink) ไม่ควรนำมาใช้งานเพราะจะทำให้ผู้ใช้เกิดความรำคาญ และทำให้ผู้ใช้งานสนใจภาพที่ขยับมากว่าตัวเนื้อหา
6. ลิงค์ที่ใช้งานไม่ได้ หรือลิงค์ที่อยู่ระหว่างการปรับปรุง ไม่ควรนำมาแสดงผล
7. สร้างความแตกต่างกันในแต่ละส่วนของเว็บไซต์ เช่นส่วนของเนื้อหาและเมนู ควรมีความแตกต่างกันอย่างเห็นได้ชัด
8. เนื้อหาสำคัญที่สุด เว็บไซต์นั้นตัวเนื้อหามีความสำคัญมากที่สุด ต่อให้ออกแบบเว็บไซต์ได้สวยงามขนาดไหนก็ตามแต่ถ้าเนื้อหาไม่มี คุณภาพ ก็ไม่สามารถดึงดูดผู้ใช้งานได้ แต่ถ้าเว็บไซต์ถูกจัดให้เป็นระบบและมีเนื้อหาที่มีคุณภาพย่อมทำให้เว็บไซต์นั้นมีคุณค่ามากกว่า
9. อย่าให้ความสนใจกับกราฟิกในเว็บไซต์มากเกินไป ควรให้ความสำคัญกับการจัดว่างตำแหน่งของส่วนต่างๆในเว็บไซต์มากกว่า
10. อย่าให้ title <title> ของแต่ละหน้ามีความเหมือนกัน รวมทั้งหัวข้อหลัก <h1> ของแต่ละหน้าอย่าให้ซ้ำกัน เพราะส่วนนี้จะเป็นส่วนที่สะดุดตากับผู้ใช้งานมากที่สุด ถ้าหากเปิดหน้าใหม่มาแล้วมีหัวข้อแสดงเหมือนกัน ผู้ใช้งานอาจเข้าใจว่าเป็นหน้าเดิม หรือมีเนื้อหาซ้ำกัน ทำให้ไม่สนใจอ่านต่อไปได้
11. ความถูกต้องของภาษาที่ใช้ หากเป็นเว็บไซต์ที่เป็นทางการเช่นเว็บไซต์บริษัท การใช้เขียนผิด สะกดผิดทำให้หมดความน่าเชื่อถือได้
12. เนื้อหาที่มีความเกี่ยวข้องกันควรมีการแสดงผลเป็นลิงค์อยู่ใกล้เคียงกัน เพื่อให้ผู้ใช้เข้าถึงได้ง่าย
13. ควรให้ความสำคัญกับหน้าแรก ข้อมูลที่เราคิดว่าสำคัญควรมีไว้ในหน้าแรก หากผู้ใช้งานเว็บไซต์เปิดเข้ามาดูและพบว่าไม่เกี่ยวข้อกับเรื่องที่ตนต้องการ ผู้ใช้งานจะปิดหน้าเว็บไซต์ของเราทันที
จำไว้เสมอว่าการออกแบบเว็บไซต์ควรให้มีจุดสนใจในแต่ละหน้า เพื่อให้ผู้ใช้งานสามารถเข้าถึงข้อมูลในหน้านั้นๆได้ง่ายที่สุด ส่วนประกอบเว็บไซต์จะต้องชัดเจน ในส่วนของเมนู Navigation ความมีความชัดเจน การทำเว็บไซต์นั้นเราควรทำให้เกิดความน่าเชื่อถือการใส่ภาพที่มากเกินไป, pop up, ไฟล์ flash นอกจากจะทำให้เว็บของเราโหลดช้าแล้วยังส่งผลเสียต่อความน่าเชื่อถืออีกด้วย
อ้างอิง : hellomyweb.com . “การออกแบบเว็บไซต์”. www.hellomyweb.com/index.php/main/tutorial . 2553
โรงเรียนบ้านแจ่มใสวิทยาคม7. “หลักในการออกแบบเว็บไซต์”. school.obec.go.th/banharnseven/m5/www.html
Comments are closed.