Web Design มาทำเว็บไซต์อย่างเป็นขั้นตอนกันเถอะ
มาทำเว็บไซต์อย่างเป็นขั้นตอนกันเถอะ
Thursday, 05 August 2010 13:10
ไม่ได้อัพเดทบทความ Web Design ซะนานเลย ทั้งๆ ที่เป็นเรื่องหลักของบล็อกแห่งนี้ซะด้วย ^_^ แล้ววันนี้ผมก็มีเรื่องราวดีๆ มาแบ่งปันให้กับเพื่อนๆ ชาว เว็บดีไซน์ หรือคนที่กำลังสนใจจะทำอาชีพ Web Design ในอนาคตนะครับ
เมื่อเพื่อนๆ เริ่มต้นคิดจะทำเว็บไซต์ซักเว็บนึง สิ่งแรกที่คุณนึกถึงคืออะไรกันบ้างเอ่ย? สำหรับผมแล้ว ในวันแรกที่ผมเริ่มต้นทำเว็บ ผมเริ่มจากเปิดโปรแกรม Dreamweaver ครับ แล้วผมก็นั่งเทียน คิดเอาว่าอยากจะทำเว็บให้ออกมาเป็นอย่างนั้นอย่างนี้ แต่ผลสุดท้ายที่ได้คืออะไรน่ะหรอ? หุหุุหุ... ได้รูปถ่ายหน้าตัวเอง 1 รูป บนหน้า html แล้วผมก็ต้องปิดโปรแกรม Dreamweaver ไป เฮ้อ... สงสัยจะไม่รุ่งล่ะมั้งเนี่ย? นี่คือเหตุการณ์ตอนที่ผมคิดจะทำเว็บเล่นๆ ซักเว็บนึงเมื่อครั้งอดีตกาลนู่น...แน่ะ
แต่เพื่อนๆ ทราบมั้ยครับว่าแท้จริงแล้วนั้น การออกแบบเว็บไซต์มันมีขั้นตอนของมันอยู่ครับ เรียกว่าเป็นทฤษฎีกันเลยทีเดียว แต่ผมคงไม่ร่ายทฤษฎีทั้งหมดในบทความเดียวนี้หรอกนะครับ มันยาววววววววว... ผมจะทำเป็นขั้นๆ ให้เพื่อนๆ ได้ดูกันไปทีละเรื่องก็แล้วกัน เพื่อนๆ สามารถติดตามอ่านได้เรื่อยๆ ในบล็อกแห่่งนี้นะครัึบ ซักวันนึงหวังว่าคงจะร่ายทฤษฎีการทำเว็บได้หมด ^^ อิอิ
ขั้นตอนหลักๆ ของการออกแบบเว็บไซต์ทั่วไป
- ขั้นที่ 1: วางแผน (Planing) ขั้นตอนนี้แหละครับ ที่หลายๆ คนมักจะไม่ทำ หรือไม่ทันคิด หรือมองข้ามไปเลยด้วยซ้ำ แต่ที่จริงแล้ว เป็นขั้นตอนที่สำคัญที่สุดเลยก็ว่าได้ เพราะถ้าไม่วางแผนแล้ว ก็จะเหมือนเหตุการณ์ข้างบนที่ผมเล่าไปแล้ว คือเอาภาพมาแปะในเว็บแล้วก็จบ ทำอะไรต่อไม่ได้แล้ว สิ่งที่คุณจะต้องวางแผนมีอะไรบ้างเรามาดูกันครับ
- เป้าหมายของเว็บไซต์ (Goals) ทำไมต้องทำเว็บนี้?, สิ่งที่คุณต้องการให้ผู้ชมได้รับ?, สิ่งที่จะดึงดูดผู้ชมเข้าเว็บ?
- รายละเอียดของเว็บไซต์ (Site Description) ชื่อเว็บ, โดเมนเนม, ประเภทของเว็บ, ฟีเจอร์ที่ควรมี
- กลุ่มเป้าหมาย (Target Audience) ใคร?, สิ่งที่กลุ่มเป้าหมายต้องการ?
- เนื้อหา (Content) ขอบเขตเนื้อหา, ใครจัดทำเนื้อหา? (คุณ/ผู้ร่วมงาน/ลูกค้า/ผู้รับจ้างทำเว็บ), ภาพประกอบ
- ทรัพยากร (Resources) บุคคลากร, งบประมาณ, ระยะเวลา, เซิร์ฟเวอร์/โฮสติ้ง, โปรแกรมที่ใช้, เครื่องคอมพิวเตอร์, อุปกรณ์เสริมอื่นๆ (กล้องดิจิตอล/Printer/Scanner)
- การดูแลและปรับปรุง (Update and Maintenance) ใครรับผิดชอบ, เนื้อหาส่วนไหนที่จะอัพเดทบ่อยๆ, ความถี่ในการอัพเดท, วิธีโปรโมท
- ลักษณะหน้าตาเว็บ (Look and Feel) โลโก้, กราฟิกสไตล์, โทนสี, องค์ประกอบภาพ, เลย์เอาท์ (บริเวณของเนื้อหา/บริเวณของแบนเนอร์/บริเวณที่เหมือนกันในแต่ละหน้า)
- ขั้นที่ 2: ออกแบบข้อมูล (Information Design) ประกอบไปด้วย
- การสร้างเนื้อหา (Create Content)
- การจัดระบบเนื้อหาในเว็บครับ (Organize Content)
- ขั้นที่ 3: ออกแบบหน้าเว็บ (Page Design) ตั้งแต่ขั้นที่ 3 ถึง ขั้นที่ 4 คุณต้องใช้เครื่องมืออะไรบ้างนั้น คงต้องกลับไปดูบทความ สร้างเว็บไซต์อย่างไรให้ถูกวิธี? ซึ่งผมได้เขียนเอาไว้แล้วครับ การออกแบบหน้าเว็บนั้น มี 3 ขั้นตอน ประกอบไปด้วย
- ออกแบบกราฟิก (Graphic Design) เช่น การเลือกใช้สี, เลือกใช้, Font, สีของเมนู, ลิ้งค์, ปุ่มต่างๆ, หรือ ออกแบบโลโก้
- ออกแบบหน้าเว็บ (Interface Design) เป็นการจัดวาง Layout ของหน้าเว็บ ซึ่งอาจจะใช้โปรแกรม Photoshop หรือ Firework ก็ได้แล้วแต่ถนัดครับ เพราะสามารถจัดวางได้อย่างอิสระด้วยคุณสมบัติเลเยอร์ (Layer) ของโปรแกรมนั่นเอง
- เอ็กซ์พอร์ตกราฟิก (Export Graphics) คือการทำภาพที่ออกแบบไว้แล้ว ให้อยู่ในรูปแบบที่สามารถแสดงผลบนเบราเซอร์ได้ดี เช่น GIF (.gif), JPEG (.jpg), และ PNG (.png) ขึ้นอยู่กับความเหมาะสม แต่ถ้าเพื่อนๆ มีภาพประเภท BMP (.bmp) ก็ควรจะ Export เป็นไฟล์ประเภท GIF, JPEG หรือ PNG ก่อนนะครับ
- ขั้นที่ 4: พัฒนาเว็บ (Web Authoring) ขั้นตอนนี้แหละครับ ที่เพื่อนๆ จึงจะเริ่มจับโปรแกรม Dreamweaver หรือโปรแกรม Web Editor ตัวอื่นๆ กันได้แล้ว
- สร้างเว็บเพจ (Create Web Pages)
- ตรวจสอบความถูกต้อง (Qualy Assurance) เช่น การอ่านทั้งเว็บเพื่อหาคำผิด ทดสอบลิ้งค์ต่างๆ ว่าใช้งานได้ถูกต้องดีหรือไม่ ใช้ได้กับ เบราเซอร์หลากหลายรุ่น เช่นทดสอบกับ IE7, IE8, Firefox, Opera, Chrome, Safari หรืออาจจะมีอย่างอื่นอีกก็ได้ตามใจคุณครับ แต่ผมคงจะทดสอบแค่นี้แหละ ^_^
- ขั้นที่ 5: เปิดตัว (Going Live) ถึงเวลาเผยแพร่เว็บไซต์ออกสู่สายตาชาวโลกแล้วครับ เริ่มด้วยการ
- อัพโหลดเว็บไซต์ ขึ้นโฮสติ้งที่คุณเตรียมไว้ ด้วยโปรแกรม FTP ครับ
- ทดสอบออนไลน์ โดยการคลิกทุกลิ้งค์ เข้าทุกหน้า ทดสอบการแสดงผลรูปภาพ, วีดีโอ, javascript, และไฟล์ต่างๆ ว่าแสดงผลถูกต้องดีแล้วหรือยัง?
- โปรโมทเว็บไซต์... เรื่องนี้ก็สำคัญอีกเรื่องนึงเลยทีเดียวครับ ที่หลายๆ คนมักจะพลาดกัน คุณต้องตระหนักไว้อย่างนึงว่า "เว็บสวย เลิศ อลังการ แต่ไม่มีคนเข้า ก็ไร้ประโยชน์" ดังนั้นอย่ามัวแต่ตกแต่งเว็บจนลืมโปรโมทกันด้วยนะครับ ถ้าพูดถึงเรื่องการโปรโมทเว็บไซต์แล้วล่ะก็ เขียนเป็นตำราได้อีกเต็มชั้นวางหนังสือกันเลยทีเดียวล่ะครับ
- อัพเดทและดูแลรักษาอยู่เสมอ... เว็บไซต์ที่ทำเสร็จแล้วทิ้งไว้เฉยๆ ไม่ต่างอะไรกับ เว็บที่ตายแล้ว คุณควรจะอัพเดทเว็บไซต์ของคุณเองเรื่อยๆ ครับ ยิ่งคุณอัพเดทบ่อยมากเท่าไหร่ โอกาสที่ผู้ชมจะกลับเข้ามาเยี่ยมชมเว็บของคุณก็มีมากขึ้นเท่านั้นครับ เพราะเว็บคุณจะดูไม่น่าเบื่อ
เป็นอย่างไรกันบ้างครับ พอรู้ขั้นตอนในการออกแบบเว็บไซต์แบบนี้แล้ว เพื่อนๆ ก็คงพอจะมีหลักในการออกแบบเว็บไซต์กันบ้างแล้วนะครับ ขั้นตอนต่างๆ เหล่านี้อาจนำไปประยุกต์ใช้กับเว็บสำเร็จรูปอื่นๆ ก็ได้ ส่วนรายละเอียดต่างๆ ในแต่ละเรื่องนั้น ผมก็จะทยอยนำมาเขียนบทความอีกเรื่อยๆ นะครับ
แล้วพบกันครั้งหน้่าครับ ^o^
Article by: Nattaphon
-
บทความนี้น่าติดตามและน่าศึกษาที่สุดเลยครับ
สมกับเป็นเทพแห่งเว็บดีไซน์เลยเนาะล้านแต้มครับ แจกกันไปเลย
-
เว็บพี่เกงนี่เปิดเผยหมดเปลือกเลยนะครับ ไม่มีเม้มข้อมูลหรือกั๊กไว้ให้คาใจเล่นๆเลยล่ะครับ จะติดตามเรื่อยๆนะครับ
ปัญหาที่ผมเจอเกี่ยวกับ K-cyber banking เนี่ย คงจะจบยากแล้วล่ะครับ เพราะจากที่พี่แนะนำให้ถามเจ้าหน้าที่ให้หมดเปลือก ปรากฏว่า แม้แต่เข้าหน้าที่ยังไม่เข้าใจว่า ระบบมันทำไมถึงไม่ผูกบัญชีของผมให้เข้ากับบัตรATM ที่ผมใช้ ผมจึงคิดที่จะตัดปัญหา โดยจะไปเปิดบัญชี บแงกรุงเทพ แล้วสมัครบัตร BeFirst แทนดีกว่า ผมว่าน่าจะได้รับความสะดวกมากที่สุดแล้วไม่ยุ่งยากด้วยน่ะครับ พี่เห็นว่ายังไงแนะนำผมด้วยนะครับ จะได้ทำ GDI กับพี่สักทีครับ
Free SiteBuilder
Unlimited Disk Space
Unlimited Bandwidth