การออกแบบเว็บไซด์

  
 

                ก็นำความรู้เล็กๆ น้อยๆ มาอธิบายให้ฟังเกี่ยวกับการออกแบบเว็บไซด์ มันง่าย ไม่มีอะไรซับซ้อน หรือต้องหาข้อมูลจำนวนมาก แต่ข้อมูลมีอยู่ให้เราศึกษาอยู่ทั่วไปตามเทคโนโลยีปัจจุบัน ฉะนั้นจึงนำแนวคิดการออกแบบเว็บไซด์ที่ค่อนข้างจะทันสมัย ฉีกแนวจากการออกแบบปัจจุบัน เพื่อให้ทันยุคทันสมัยของสังคมที่เปลี่ยนแปลงไปตามเทคโนโลยี การออกแบบจะอาศัยความเป็นไปของเทคโนโลยีที่เป็นปัจจุบัน ผนวกกับแนวศิลป์ที่มีอยู่ แต่ทั้งนี้ก็ให้อยู่ในความถูกต้องของกฎหมาย ศีลธรรม และความสวยงามที่สังคมยอมรับ ทฤษฎีของการลอกเลียนแบบโดยอาศัยจากเว็บคู่แข่งค่อนข้างจะล้าสมัยในการนำมาออกแบบ และรูปแบบตามตำราที่เรียนรู้กันมาตามตำรา หรือการเรียนตามหลักสูตร มันก็จะออกมาในรูปแบบใกล้เคียง หรือเหมือนคล้ายกันหมดตามวิธีการของนักออกแบบ
                หลักการออกแบบโดยทั่วไปส่วนมากจะศึกษาจากเว็บของคู่แข่ง เพื่อให้เว็บของตนเอง มีศักยภาพเหนือกว่าทั้งในเนื้อหา สาระ ผู้มุ่งหวังที่จะเข้ามาชมเว็บไซด์ หลักการออกแบบทั่วไปจะได้แก่ การกำหนดวัตถุประสงค์ของเว็บไซด์ ความต้องการทางด้านตลาดของผู้เยี่ยมชมเพื่อให้บรรลุนโยบายของเว็บไซด์ จึงไม่มีอะไรที่นอกเหนือจากตำราที่ได้กล่าวไว้ ลักษณะรูปแบบของเว็บไซด์จึงออกมาในลักษณะละม้ายคล้ายคลึงกันเป็นส่วนใหญ่เพื่อแย่งชิงส่วนแบ่งทางด้านการตลาดที่แข่งขันอยู่
หมายเหตุ
การออกแบบเว็บไซด์ที่จะนำมาอธิบายถึงขั้นตอนตั้งแต่วิธีการเริ่มต้นการออกแบบ และแนวคิดบางอย่างนี้ ไม่ได้มีวัตถุประสงค์ให้ผู้เรียนรู้การออกแบบนำไปเป็นแนวทางในการออกแบบเว็บไซด์ แต่เพื่อเป็นการศึกษาเรียนรู้วิธีการเขียนเว็บไซด์เท่านั้นเอง
                เมื่อเริ่มที่จะคิดมีเว็บไซด์สักเว็บหนึ่ง เราต้องรู้ว่ามีไปทำอะไร เพื่อใคร ประโยชน์อะไร มีการตอบรับอย่างไร ผลที่ได้จากเว็บไซด์เป็นอย่างไร ฉะนั้นเราจึงต้องกำหนดวัตถุประสงค์ เป้าหมาย จุดมุ่งหมายการตอบรับจากผู้ชม เนื้อหาที่จะไปนำเสนอซึ่งมีส่วนสำคัญในการตัดสินใจของผู้ชมเว็บ ต่อไปนี้จะยกตัวอย่างการออกแบบเว็บไซด์เกี่ยวกับสถานบันเทิง ซึ่งจะนำแนวทางในการออกแบบจากเว็บไซด์ที่ให้บริการด้านอาบอบนวด นวดแผนโบราณ หรือสถานบริการที่ให้ความผ่อนคลายโดยทั่วไป
                ลำดับแรก เราต้องทราบว่าคู่แข่งที่เปิดเว็บไซด์อยู่มีลักษณะเป็นอย่างไร (ตามตำราที่บอกไว้) ฉะนั้นเราต้องออกแบบให้เหนือคู่แข่งทั้งในด้านเนื้อหา สาระ การจูงใจในการเข้าชมตั้งแต่เริ่มเห็นเว็บ อันนี้สำคัญมาก
                ก่อนอื่นหลังจากเรากำหนดวัตถุประสงค์ เป้าหมาย ความต้องการของเว็บไซด์แล้ว เราจะมากำหนดชื่อเว็บไซด์ที่จะสื่อไปยังผู้เข้าชม ก็สำคัญมากทีเดียว ชื่อเว็บที่จะนำไปใช้ให้ผู้คนจดจำง่าย รู้ทันที และเข้าใจความหมายเป็นอย่างดี การกำหนดโดยทั่วไปไม่ควรจะมีอักขระ ตัวอักษรเยอะจนเกินความจำเป็น
                ตัวอย่างจะเป็นเว็บเกี่ยวกับสถานบันเทิงอาบอบนวด ซึ่งมีแค่ 4 ตัวอักษรเอง แต่ให้ความหมายของผู้ที่ต้องการอย่างชัดเจน (อันนี้ยกเว้นเฉพาะผู้คิดออกแบบ) มีขั้นตอนดังนี้

1. ขั้นแรกเรากำหนดชื่อเว็บไซด์ก่อน เช่น www.cgpx.com  ซึ่งสอดคล้องกับวัตถุประสงค์ เป้าหมาย และการตลาดแล้ว เราก็มาตรวจสอบว่าชื่อเว็บจะใช้ได้หรือไม่ โดยการตรวจสอบชื่อโดเมนตามเว็บไซด์ที่ให้บริการทั่วไป ดังรูป

  
     
       
 

2. เมื่อเราได้ชื่อเว็บไซด์ที่ต้องการแล้วก็มาเตรียมโฟลเดอร์ไว้สำหรับรองรับข้อมูลที่จะนำมาออกแบบ ส่วนมากแล้วจะมีอยู่ 2 ส่วนด้วยกันคือ ที่อยู่ของข้อมูลการออกแบบ (เก็บไว้เพื่อนำมาแก้ไขในภายหลัง) และข้อมูลของเว็บไซด์ที่จะนำไปใช้ในเว็บไซด์

  
               
     
       
 

3. เมื่อเราได้ชื่อเว็บไซด์แล้ว เราก็มาคิดเนื้อหาของเว็บไซด์โดยสอดคล้องกับวัตถุประสงค์ เป้าหมาย และความต้องการของลูกค้า เรานำเนื้อหาเหล่านั้นมากำหนด Main Menu ซึ่งจะเป็นหัวช้อหลักในการเยี่ยมชมเว็บไซด์ และรายละเอียดปลีกย่อยจะอยู่ใน Main Menu ต่อไป นอกจากเราคิด Main Menu แล้ว เราต้องคิดต่อไปว่าจะทำอย่างไรให้ผู้เยี่ยมชมสนใจที่จะเข้าไปดูเนื้อหาในเว็บไซด์ของเรา ซึ่งเราต้องอาศัยแนวศิลป์ ประสบการณ์ หรือลักษณะการนำเสนอของเว็บไซด์คู่แข่งมาเป็นแนวคิด จากตัวอย่างที่นำมาเป็นแนวคิดในการออกแบบ ซึ่งเป็นเว็บไซด์ด้านบันเทิง สถานบริการต่างๆ จะนำเอารูปผู้หญิงมาเป็น Main Menu กำหนดหัวข้อหลักอยู่ในตัวของผู้หญิงนี้เพื่อให้ผู้เยี่ยมชมคลิ๊กเข้าไปชมเนื้อหาต่อไป ซึ่งเราจะนำหัวข้อหลักมาใส่ไว้ตามรูป การกำหนดขนาดจะเป็นสิ่งสำคัญในการออกแบบต่อไป เราต้องกำหนดขนาด จำนวนคอลัมถ์ แถว ในการออกแบบและเขียนเว็บไซด์ในขั้นต่อไป ดูตามรูป

  
     
     
       
 

สำหรับตัวอย่างนี้ผู้เขียนได้ออกแบบใน Ilustrator CS3 แทนการออกแบบรูปแบบในกระดาษก่อน หรือจะออกแบบใน Photoshop ก็ได้ แล้วแต่ความสะดวก การออกแบบจะแบ่งออกเป็น 2 ส่วนคือ Main Menu และอีกส่วนสำหรับเนื้อหาและรูปภาพประกอบซึ่งขึ้นอยู่กับข้อมูลเหล่านี้ที่จะนำเสนอ
                จากตัวอย่างตามรูป จะกำหนด Main Menu เป็น Home, Our Model, Room&Bath, Rate&Promotion, Contact us ตามเนื้อหาที่ได้เตรียมไว้ และสอดคล้องกับเว็บที่ตั้ง www.cgpx.com

  
 

4. ตัวอย่างนี้เราจะนำแบบที่เราได้กำหนดไว้มาทำใน Photoshop CS3 ซึ่งไม่ได้นำการออกแบบไปกำหนดใน
Flash Player หรือโปรแกรมอื่นๆ เพื่อให้ง่ายต่อการเข้าใจ
แบบที่เราร่างไว้ใน Illustrator CS3 เราก็นำมากำหนดให้ได้สัดส่วนตามแบบร่างที่เรากำหนดไว้ใน Photoshop CS3 ซึ่งจะให้รายละเอียดที่แม่นยำกว่าที่เราร่างไว้ ซึ่งความผิดพลาดในการออกแบบที่ดีที่สุดคือ 0 Pixel แม้จะพลาด 1 Pixel ก็จะเห็นได้ในเว็บไซด์
ตามรูปเราจำกำหนด Guide ให้ชัดเจน ใน Photoshop จะใช้กำสั่ง Menu View > New Guide…
- Horizontal คือตามแนวนอน
- Vertical คือตามแนวตั้ง

  
       
     
 

 

  
  การวางเส้น Guide ต้องให้ตรงกับที่เรากำหนดไว้ในแบบร่าง ซึ่งจะแบ่งพื้นที่ชัดเจนให้เรานำไปออกแบบในขั้นตอนต่อไป ตามรูป ซึ่งจะนำ Main Menu มาวางไว้ตามแบบที่เราร่างไว้ก่อนหน้า  
       
 

 
5. ต่อไปเราจะทำการตัดรูปที่นำมาวางออกเป็นส่วนๆ โดยใช้เครื่องมือ Slice Tool  เพื่อนำไปออกแบบในขั้นตอนต่อไป และง่ายต่อการโหลดภาพจากเว็บไซด์เมื่อเข้าชม ควรจะแบ่งออกตามความเหมาะสมตามเนื้อหาและความต้องการในการออกแบบ
   
 

 
ข้อสังเกต การแบ่งส่วนที่ถูกต้องจะเรียงลำดับตามหมายเลข ถ้าท่านแบ่งผิดอาจจะข้ามเลขบางตัวไป ซึ่งแสดงว่าแบ่งไม่ถูกต้อง
    6. เมื่อแบ่งเสร็จแล้วเราจะทำการบันทึกรูปตามส่วนต่างๆ ที่เราได้แบ่งไว้โดยใช้ Menu File > Save for Web & Devices…
   

 
 
เมื่อคลิ๊กคำสั่งแล้ว จากรูปให้เราทำการลากเม้าส์เลือกส่วนต่างๆ ที่เราต้องการบันทึกตามที่ได้แบ่งไว้ จากตัวอย่างเราจะบันทึกเป็นไฟล์ GIF เพื่อให้เห็นส่วนว่างเปล่าทางด้านหลังของรูป
 

 
 

เมื่อบันทึกแล้วจะได้เป็นไฟล์ตามที่เราตั้งชื่อไว้ซึ่งจะแยกส่วนต่างๆ ตามที่เราได้แบ่งไว้ก่อนหน้านี้ ดังรูป
 

 
 
    7. ต่อไปเราจะทำภาพซ้อน Roll over Image เมื่อนำไปใช้ใน Dreamweaver ซึ่งต้องเข้าใจคำสั่งนี้
    Roll over Image คือคำสั่งใน Dreamweaver ที่กำหนดให้ภาพแรกที่เราเห็นเป็นภาพที่ 1 เมื่อเราเอา Mouse ไปคลิ๊กจะเปลี่ยนเป็นภาพที่ 2 นี่จะเป็นลักษณะของ Roll over Image
    ซึ่งเราจะเอาส่วนที่เป็น Main Menu มาทำภาพให้แตกต่างจากภาพหลักที่มองเห็นปกติ เราจะออกแบบให้ผู้ชมได้รู้และอยากจะเข้าไปดูรายละเอียดข้างใน นี่จะเป็นการออกแบบหลักในการดึงดูดความสนใจ
    ก่อนออกแบบเราต้องเลือกส่วนที่ต้องการออกแบบมาแยกเป็นไฟล์ภาพต่างหาก เพื่อให้ง่ายในการออกแบบและการแก้ไข ในที่นี้เราจะใช้ Crop Tool ในการแยกส่วนที่เราต้องการออกแบบเพื่อนำไปทำ Roll over Image
 

 
 
การ Crop ที่ถูกต้องจะต้องได้สัดส่วนที่เราได้ร่างแบบไว้ก่อนหน้า ตามพื้นที่ของส่วนนั้นๆ ซึ่งจะดูได้ที่ Menu Image > Image Size
 

 
 
เราควรจะบันทึกรูปที่ Crop แล้วมาเป็นไฟล์ใหม่ เพื่อง่ายต่อการแก้ไข และควรจะบันทึกเป็นนามสกุล .PSD เพื่อง่ายในการแก้ใช
 
 
 

เมื่อออกแบบเสร็จแล้วก็ให้บันทึกชื่อไฟล์ตามนามสกุลต้นฉบับ หรือแล้วแต่ความเหมาะสม โดยจะบันทึกให้ง่ายต่อการนำไปใช้ซึ่งจะดูจากไฟล์แรกที่บันทึกไป
 

 
 
ต่อไปจะเป็นการนำไฟล์ที่ได้ทำไว้ใน Photoshop หรือโปรแกรมอื่นตามที่เราออกแบบไว้ มาวางในโปรแกรม Dreamweaver ซึ่งจะใช้ Macromedia Dreamweaver 8 ในการออกแบบ
1. เมื่อเปิดโปรแกรมแล้วเราจะต้องทำการสร้าง New Site… เพื่อกำหนดที่อยู่ของเว็บไซด์ให้ง่ายต่อการออกแบบ โดยใช้คำสั่ง Menu Site > New Site
 

 
 
แล้วเราทำการใส่ข้อมูลตามเว็บไซด์ที่ได้ตั้งชื่อไว้ก่อนหน้านี้ตามรูป
 

 
 
2. เมื่อกำหนดเสร็จแล้ว เราก็มาสร้างเอกสารใหม่ในการออกแบบ โดยใช้คำสั่ง Menu File > New…
 

 
 

กำหนดการสร้างเอกสารโดยทั่วไปใช้ HTML

 

 
 
3. ทำการสร้างตารางสำหรับการออกแบบ ซึ่งจะกำหนดตามที่ได้ร่างแบบไว้ก่อนหน้านี้ ให้เปิดแถบ Common ใช้ไอคอน Table ในการสร้างตาราง
 

 
 
กำหนดขนาดตาราง
- จำนวน Rows, Columns (จะสามารถเปลี่ยนได้ในภายหลัง)
- Table Width กำหนดตามที่ออกแบบไว้ โดยทั่วไปจะใช้ 800 Pixels (มาตรฐานความละเอียดของจอที่ใช้กัน) ซึ่งอาจจะใช้มากกว่านี้ก็ได้แล้วแต่ความต้องการของลูกค้าและเนื้อหา
ส่วนค่าอื่นๆ ให้กำหนดตามต้องการตามรูป
 
 
 
4. เมื่อสร้างตารางเสร็จแล้วให้กำหนดการจัดวางตารางตามที่ต้องการ ส่วนมากจะใช้ Center ซึ่งจะอยู่ตรงกลางหน้าจอไม่ว่าจอจะขนาดเท่าไหร่ตามที่แสดงในหน้าเว็บไซด์
 
 
 

5. ทำการแบ่งตารางหลักเป็นตารางย่อยตามที่ได้ออกแบบไว้ก่อนหน้านี้
 
 
 
การกำหนดจำนวน Rows, Columns, Table width จะขึ้นอยู่กับการออกแบบที่เราได้ร่างไว้ก่อนหน้านี้
 
 
 
จากรูปจะเป็นการกำหนดตารางที่สร้างใหม่จากตารางหลักให้อยู่ในจุดที่เราต้องการ
 
 
 

6. เมื่อสร้างตารางเสร็จแล้ว เราจะนำรูปมาวางในช่องตารางต่างๆ ตามที่ได้แบ่งส่วนไว้ก่อนหน้านี้ เมื่อลากไปวางจะมีคำถามขึ้นมา เพื่อความสะดวกให้เรากด OK เพื่อเป็นการเสร็จสิ้นการวางรูป
 
 
 
สำหรับช่องที่เป็น Main Menu เราได้ออกแบบให้เป็นการวางรูปแบบ Roll Over Image ก็ให้ไช้คำสั่งนี้ในแถบ Common คลิ๊กเลือกตามรูป
 
 
 
กำหนดรูปที่เป็นรูปหลักในการแสดงในหน้าจอ Original image และรูปที่คลิ๊กเม้าส์เลือกคำสั่ง Rollover image
 
 
 
คลิ๊ก Browse… เลือกรูปตามต้องการ
 
 
 
เราสามารถใส่ข้อความได้ใน Alternate text เมื่อคลิ๋กเม้าส์เลือกที่เมนูนั้นๆ
 
 
 
เราจะวางรูปให้เหมือนกับที่เราได้ร่างแบบไว้ก่อนหน้านี้
 
 
 
กรณีที่ตารางในส่วนอื่นที่ไว้ไม่ได้อยู่ตามจุดที่เราต้องการสามารถเลือกโดยใช้แถบด้านล่างในการคลิ๊กเลือก
 
 
 
ซึ่งจะสามารถกำหนดให้ตารางอยู่ส่วนที่เราต้องการได้โดยคลิ๊กเลือกคำสั่งด้านล่าง
 
 
 

เพื่อง่ายต่อการจัดวางตำแหน่งรูป ข้อความให้ได้สัดส่วน เราควรจะสร้าง image ที่เป็นพื้นที่ว่างเปล่าใน Photoshop โดยเลือกพื้นหลังเป็น Transparent
 
 
 
ทำการบันทึกไฟล์เป็นนามสกุล GIF
 
 
 
การสร้าง Style ตัวอักษรให้กำหนดรูปแบบตัวอักษรเหมือนการสร้างตัวอักษรในโปรแกรมทั่วไป
 
 
 
7. ทำการจัดวางเนื้อหาให้ครบตามรูปแบบที่เราได้ร่างไว้ก่อนหน้านี้
 
 
 
8. เมื่อทำเสร็จแล้วก็ทำการบันทึกไฟล์ตามรูปแบบที่เราได้ร่างไว้ก่อนหน้านี้ ซึ่งโปรแกรมจะกำหนดนามสกุลไว้อัตโนมัติ
 
 
 
9. การกำหนด Link กับ Main Menu ที่เราได้สร้างไว้ เพียงเราลากไปยังไฟล์ html ที่เราสร้างไว้ หรือในกรณีให้ลิ้งก์รูป หรือไฟล์ต่างๆ ก็ให้ลากไปยังที่อยู่ของไฟล์นั้น หรืออาจจะใช้กล่องไฟลเดอร์ใกล้ๆ คลิ๊กเลือกหาที่ต้องการลิ้งก์ก็ได้
 
 
 
ในการ Link ข้อความก็ทำเช่นเดียวกันเพียงคลิ๊กเลือกข้อความแล้วลากไปยังที่ต้องการ หรือจะหาจากกล่องโฟลเดอร์ก็ได้
 
 
 
การกำหนดอื่นๆ เช่น กำหนด Background image ให้กด Ctrl + J แล้วไปเลือกคำสั่งที่ต้องการ
 
 
 
จากรูปด้านล่างเป็นการกำหนด Links เมื่อคลิ๊กเม้าส์ผ่าน
 
 
 
การแสดงผลของการออกแบบที่ได้สร้างในเอกสาร Dreamweaver ให้กด F12 เพื่อทำการแสดงผล
 
 
 
มาดูเว็บที่เราออกแบบเสร็จแล้ว www.cgpcx.com
 
ก็ไม่ยากสำหรับการออกแบบเว็บไซด์มาใช้งานขอให้เรามีพื้นฐานด้านกราฟิก ด้านการตลาด และความคิดด้านศิลป์ เราก็มาออกแบบเว็บได้แล้ว
ขอให้สนุกกับการออกแบบเว็บไซด์
 
 
เทวินทร์ ประสิทธิ์เสริฐ
สงวนลิขสิทธิ์
การคัดลอกให้ก๊อปปี้ link ลงไปด้วย
http://www.cgpcenter.com/webdesin/webdesign.html