Principle of Web Design

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

โดย ดร.กิตติก์ าญจน์ ปฏิพันธ์

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

Web designing 1. เพื่อศึกษาความหมาย ประเภทและองค์ประกอบทั่วไปของเว็บ 2. เพื่อศึกษาหลักการออกแบบเว็บ 3. เพื่อศึกษามาตรฐานในการออกแบบเว็บ 4. เพื่อศึกษาข้อมูลหลักที่ควรมีในเว็บ 5. เพื่อศึกษาแนวคิดการสร้างจุดขายให้กับการออกแบบและพัฒนาเว็บ

1. อธิบายความหมาย ประเภทและองค์ประกอบทั่วไปของเว็บได้ 2. อธิบายหลักการออกแบบเว็บได้ 3. อธิบายมาตรฐานในการออกแบบเว็บได้ 4. อธิบายข้อมูลหลักที่ควรมีในเว็บได้ 5. อธิบายแนวคิดการสร้างจุดขายให้กับการออกแบบและพัฒนาเว็บได้ เว็บหมายถึงหน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ที่รวมสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ โดยจัดเก็บไว้ในเวิลด์ไวด์เว็บ โดยมีหลักการออกแบบและพัฒนาเว็บคือ มีการออกแบบโครงสร้างที่ชัดเจน มี การออกแบบหน้าเว็บที่ดี และ มีการกาหนดเป้าหมายที่ชัดเจน โดยมีมาตรฐาน ในการออกแบบคื อ มี ค วามเรี ย บง่ า ย มี ค วามเป็ น เอกลั ก ษณ์ เนื้ อ หาเป็ น ประโยชน์และทันสมัย มีคุณภาพในการออกแบบ และมีมาตรฐานเดียวกัน .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

Web designing 1

Web

งานออกแบบเว็บกลายเป็ นส่วนหนึ่งในชีวิตประจาวันของคนหลายคน และมี จานวนมากขึ้ นเรื่อ ย ๆ สิ่งหนึ่ งที่ เป็ น ปั จจั ยหลั ก ในการสร้างเว็บ ก็ คื อ ความสวยงาม มี ก ารส ารวจกั น ว่ า การออกแบบหน้ า ตาของเว็ บ (Web Interface Design) ได้ ดี แ ละน่ า สนใจ จะมี อิ ท ธิ พ ลต่ อ การดึ งดู ด ใจ ผู้ ท่ อ ง อินเทอร์เน็ตให้เข้าชมเว็บของเรา ดังนั้นอาชีพนักออกแบบเว็บ จึงเป็นที่ต้องการ ของตลาดแรงงานเป็นอย่างมาก แต่ก่อนที่จะเรียนรู้หลักการออกแบบเว็บ มา ศึกษาความหมายของเว็บดังต่อไปนี้ เว็บคือแหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ บนระบบอินเทอร์เน็ตของแต่ละบริษัทหรือหน่วยงานหรือบุคคล โดยเรียกเอกสารต่าง ๆ เหล่านี้ว่า เว็บเพจ และเรียกเว็บหน้าแรกของแต่ละ เว็บไซต์ว่า โฮมเพจ หรืออาจกล่าวได้ว่า เว็บก็คือเว็บเพจอย่างน้อยสองหน้าที่มี ลิงค์ถึงกัน บุญเลิศ อรุณพิบูลย์ (2550) กล่าวไว้ว่า เว็บ เป็นบริการหนึ่งจาก หลาย ๆ บริก ารบนระบบอิ น เทอร์ เน็ ต นอกเหนื อ จากการรั บ -ส่ งจดหมาย อิเล็กทรอนิกส์ การสนทนาผ่านเครือข่าย การอภิปรายผ่านกระดานข่าว การ อ่านข่าว การค้นข้อมูล และการถ่ายโอนแฟ้มข้อมูล เว็บคือข้อมูลข่าวสารในรูป เอกสารไฮเปอร์เท็กซ์ (หมายถึงการเชื่อมโยงเอกสารไปยังเอกสารอื่น ๆ ที่ อยู่ ต่างกัน) และมีไฮเปอร์มีเดีย (รวมไปถึงไฮเปอร์เท็กซ์และสื่อหลากหลาย ที่ได้ จากการเชื่อมโยงเครือข่าย) ที่ใช้อินเทอร์เน็ตเป็นเครื่องมือในการติดต่อรับ -ส่ง ข้อมูล วิกิพีเดีย สารานุกรมเสรี (2555) ได้กล่าวไว้ว่า เว็บ หมายถึง หน้าเว็บ เพจหลายหน้ า ซึ่ งเชื่อ มโยงกั น ผ่ านทางไฮเปอร์ลิ ง ค์ ส่วนใหญ่ จั ดท าขึ้น เพื่ อ .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

นาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของ เว็บที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บโดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดีย วกัน บางเว็บจาเป็ นต้อ งมีการสมัครสมาชิกและเสียค่าบริ การ เพื่อที่จะดูข้อมูล ในเว็บนั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ สรุปโดยรวมได้ว่า เว็บ คือ หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่าน ทางไฮเปอร์ลิงค์ ทีร่ วมสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ โดยจัดเก็บไว้ ในเวิ ล ด์ ไวด์ เว็ บ หน้ า เว็ บ เพจแรกของเว็ บ ที่ ป รากฏภายหลั ง สื บ ค้ น ได้ แ ล้ ว เรียกว่า โฮมเพจ ส่วนเว็บเพจ ใช้เรียกหน้ าอื่ นๆ ดังนั้ นค าว่า เว็บ จึงเป็ นค า กลางๆ ในการเรียกทั้งโฮมเพจและเว็บเพจ 1.1 ความรู้พื้นฐานเกี่ยวกับเว็บ การใช้ ง านอิ น เทอร์ เน็ ต ในยุ ค แรก ๆ ส่ ว นใหญ่ ยั งจ ากั ด อยู่ ใ นวงการ ศึกษาวิจัย และการทหารเป็นหลัก ไม่ได้มีการใช้ในเชิงพาณิชย์อย่างกว้างขวาง เหมือนในปัจจุบัน จุดเปลี่ยนนั้นเกิดขึ้นเมื่อปี ค.ศ. 1995 นักวิทยาศาสตร์แห่ง ศูนย์ค้นคว้าวิจัยทางฟิสิกส์ CERN ในประเทศสวิตเซอร์แลนด์ต้อ งการพัฒ นา เทคโนโลยี ในการแลกเปลี่ ยนข้ อ มูล ข่ าวสาร ระหว่ างศู น ย์ ลูก ข่ ายที่ ตั้ งอยู่ใน ประเทศต่าง ๆ ทั่วยุโรปให้สะดวกและรวดเร็วขึ้น โดยอาศัยระบบอินเทอร์เน็ตที่ มีอยู่เดิม เพียงแต่มีวิธีติดต่อผู้ใช้ ที่ใช้ง่ายขึ้น เทคโนโลยีดังกล่าวอาศัยพื้นฐาน การทางานที่เรียกว่า ไฮเปอร์เท็ก ที่สามารถเชื่อมโยงเอกสารที่อยู่หลาย ๆ แห่ ง ซึ่งอาจอยู่บนคอมพิวเตอร์คนละเครื่อ งเข้าด้วยกัน คล้ายกับว่ามีเอกสารอยู่ที่ เดียว ภาษาคอมพิวเตอร์ที่ใช้ถูกเรียกว่า HTML ในเวลาต่อมาได้มีการเชื่อมโยง .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

สื่ออื่น ๆ ที่ไม่ใช่เอกสารเช่น ภาพนิ่ง ภาพเคลื่อนไหว เสียง ฯลฯ จนเกิดเป็น ลั ก ษณะของ Hypermedia ขึ้ น จากการที่ ร ะบบดั งกล่ าว สามารถเชื่ อ มโยง เอกสารจากหลาย ๆ แห่งเข้าด้วยกัน จึงถูกขนานนามว่า World Wide Web หรือเรียกง่าย ๆ ว่า เว็บ ในปัจจุบันด้วยสถาปัตยกรรมที่แยกเนื้อ หา กับส่วน เข้ า ถึ ง เนื้ อ หาออกจากกั น ท าให้ เ ว็ บ ยั ง คงความเป็ น ระบบเปิ ด ได้ เหมื อ น อินเทอร์เน็ต กล่าวคือส่วนของ เบราว์เซอร์สามารถแยกพัฒนาได้ต่างหากจาก การพัฒนาเนื้อหา จึงทาให้มีความอิสระและมี ความคล่องตัวสูง เบราว์เซอร์ตัว แรกที่สั่นสะเทือนวงการมีชื่อว่า โมเซคนั้นมีความสามารถในการแสดงผลทาง กราฟิก รวมทั้งยังสามารถใช้งานได้บนเครื่องคอมพิวเตอร์หลายแบบและหลาย รุ่น เป็นซอฟต์แวร์ที่หามาใช้งานได้ง่ายโดยไม่ต้องเสียเงิน มีผลให้เว็บได้รับความ นิยมมากขึ้นอย่างรวดเร็ว จนกระทั่งปลายปี 1997 มีการประเมินว่า 80 % ของ การใช้งานบนอินเทอร์เน็ตเป็นการใช้บริการของ เว็บด้วยประสิทธิภาพในการ ส่งข้ อมูล ซึ่ งสามารถส่ งข้ อ มูล ได้ทั้ งข้อ ความ รูป ภาพ เสี ยง ภาพเคลื่ อนไหว ตลอดจนข้อมูลแบบอื่น ทาให้การใช้งานในเชิงพาณิชย์เริ่มเป็นผลนับแต่นั้น มี การประยุกต์ เพื่อการค้าหลากหลายรูปแบบ เช่น การโฆษณาประชาสัมพันธ์ การโปรโมทสินค้า การติดต่อคู่ค้า การบริการลูกค้า (Customer Supports & Customer Services) การซื้อขายและสั่งสินค้า การสารวจและวิจัยตลาด การ ให้การศึกษาและให้ข้อมูลในตัวสินค้าต่อกลุ่มเป้าหมาย เป็นต้น ในช่วงเริ่มแรก นั้ น การใช้ ง านในเชิ ง พาณิ ช ย์ มี ลั ก ษณะเป็ น การหว่ า นเพื่ อ พั ฒ นาตลาด (Seeding the Market) ด้วยบริการที่ไม่คิดเงิน เพื่อที่จะทาให้ตลาดเติบโตใน ลั ก ษณ ะ Spiral-Up คื อ เมื่ อ ยิ่ ง มี ผู้ ใ ช้ ก็ ยิ่ ง มี บ ริ ก ารมากขึ้ น เช่ น บริ ษั ท NETSCAPE ได้ทาการแจก เบราว์เซอร์ฟรีไม่คิดเงินเพื่อให้คนใช้ เว็บมาก ๆ เมื่อ .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

ตลาดมีศักยภาพสูงขึ้นจึงค่อ ยหารายได้จากการบริการใหม่อื่น ๆ ในปัจจุบัน อินเทอร์เน็ตมีขนาดใหญ่ ไม่ใช่เพียงเพื่อใช้เป็นสื่อโฆษณาเท่านั้น ในประเทศ สหรัฐอเมริกากาลังมีความตื่นตัวในการใช้เงินตราอิเล็กทรอนิกส์ (Electronic or Digital Money) จะถู ก น ามาใช้ แ ทนธนบั ต รกระดาษ สามารถใช้ ซื้อ ขาย แลกเปลี่ยนบนอินเทอร์เน็ตได้ทันที มีการคาดการณ์กันว่าเงินตราอิเล็กทรอนิกส์ จะสร้างผลกระทบต่อธุรกิจทั่วโลก และจะก่อให้ เกิดการปรับตัวเปลี่ยนแปลง ครั้งใหญ่ของธุรกิจ ทั่วโลกหลังปี ค.ศ. 2010

เว็บของวิทยาลัยอาชีวศึกษาขอนแก่น

1.2 ความสาคัญของเว็บ ในปัจจุบันเว็บได้กลายเป็นสื่อที่มีความสาคัญและมีบทบาทอย่างมาก ใน เรื่องการโฆษณาและประชาสัมพันธ์ เนื่องจากเว็บสามารถนาเสนอ เผยแพร่ ข้อมูลข่าวสาร ได้อย่างไร้ขีดจากัด ทั้งในเรื่องเวลาและระยะทาง ทุกคนสามารถ คลิกเข้ามาเปิดดูได้ตลอดเวลา 24 ชั่วโมง ด้วยข้อดีดังกล่าว บริษัท ห้างร้าน สถานประกอบการเกือบทุกแห่งทั้งภาครัฐและเอกชน หรือแม้แต่บุคคลทั่วไป ต่างก็มีความต้องการจัดทาเว็บขึ้นเพื่ อเป็นช่องทางการสื่อสารรูปแบบใหม่ และ ยังนาไปใช้ในการเผยแพร่ข้อมูล ข่าวสาร ไปสู่กลุ่มเป้าหมายอย่างรวดเร็ว เช่น การโฆษณาขายสินค้าและบริการ ในรูปแบบต่าง ๆ ที่มีจุดมุ่งหมายในเชิงธุรกิจ .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

หรื อ การใช้ เ ว็ บ เป็ น ช่ อ งทางเผยแพร่ ข้ อ มู ล ข่ า วสารขององค์ ก ร เพื่ อ ประชาสัมพันธ์องค์กรให้เป็นที่รู้จัก และเพื่อหวังผลในการสร้างภาพลักษณ์ของ องค์กรให้เป็นที่ยอมรับ ซึ่งเว็บนั้นเป็นสื่อที่มีประสิทธิภาพเป็นอย่างมากในการ สนองภารกิจดังกล่าว ประโยชน์และความสาคัญของเว็บสามารถสรุปได้ดังนี้ 1. เป็นสื่ออิเล็กทรอนิกส์ทางอินเทอร์เน็ต ใช้เพื่อการโฆษณา ประชาสัมพันธ์ ให้ข้อมูลข่าวสาร และสร้างภาพลักษณ์ที่ดีแก่องค์กร 2. สามารถนามาใช้เป็นร้านค้าออนไลน์เพื่อจาหน่ายสินค้าและบริการ 3. มีประสิทธิภาพในการสื่อสาร เข้าถึงกลุ่มเป้าหมายได้ทั่วโลก 4. เสียค่าใช้จ่ายในการผลิตต่ากว่าสื่ออื่นๆ แต่มีอายุการใช้งานยาวนาน 5. กลุ่มเป้าหมายสามารถเข้าถึงสื่อได้โดยสะดวกและรวดเร็วผ่าน อินเทอร์เน็ตได้ตลอดเวลา ดังนั้นในโลกยุคปัจจุบันที่มีความเจริญก้าวหน้าในเรื่องเทคโนโลยี อย่างไม่หยุดยั้ง การใช้เว็บเพื่อเป็นช่องทางในการสื่อสาร เพื่อเพิ่มประสิทธิภาพ ในการประชาสัมพันธ์ให้กับองค์กร จึงเป็นเรื่องที่ไม่สามารถที่จะมองข้ามไปได้ 1.3 โปรแกรมที่ใช้ในการออกแบบและพัฒนาเว็บ - Macromedia DreamweaverCS3 สามารถออกแบบหน้ า เว็ บ ได้ อย่างสะดวกโดยอาศัยเครื่อ งมือ ต่าง ๆ โดยไม่จาเป็นต้อ งรู้เกี่ยวกับภาษา HTML มี ห น้ าจอในการแสดงผลหน้ า จอการออกแบบและหน้ า จอค าสั่ ง ทางานจากรูปภาพแล้วแปลงไปเป็นโค้ดคาสั่งได้ทันที

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

- Microsoft FrontPage ลักษณะการทางานใกล้เคียงกับโปรแกรมอื่น ๆ ที่อยู่ในชุด Office มีระบบอานวยความสะดวกแบบ Wizard - Allaire HomeSite ช่วยในการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติ ที่ เรีย กว่ า Tag Insight และ Function Insight ซึ่ งจะแสดงแอตตริบิ ว ต์ ที่ เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กาลังเขียนเหมาะสาหรับนักออกแบบ เว็บที่ถนัดในการใช้ภาษา HTML - NetObjects Fusion ลักษณะการทางานใกล้เคียงกับโปรแกรมทั่วไป ด้านการออกแบบ กราฟิก หรือออบเจ็ค จะมีระบบอานวยความสะดวก แบบ Wizard ช่วยในการทางานอย่างง่าย - EditPlus คือ text editor ตัวหนึ่งที่ใช้ในการพัฒ นาสคริปต์โปรแกรม ต่าง ๆ ไม่ว่าจะเป็น HTML, PHP,JAVA ซึ่งเป็นเครื่องมือที่เขียนโค้ดคาสั่งต่าง ๆ

เว็บสำคัญอย่ำงนี้ ต้องศึกษำแล้วค่ะ

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

2 ในการออกแบบและพัฒนาเว็บ จาเป็นที่จะต้องมีการกาหนดจุดประสงค์ ที่แน่นอนก่อนว่า ต้องการสื่อถึงอะไร และกลุ่มไหนที่เป็นเป้าหมายที่ชัดเจน จึง จะสามารถเริ่มออกแบบสร้างเว็บได้และสิ่งเหล่านี้เองที่จะเป็นตัวจาแนก ประเภทต่าง ๆ ของเว็บ ขณะที่ ปิยะบุตร สุทธิดารา (2551) ได้จาแนก ประเภทของเว็บไว้ว่าสามารถแบ่งได้เป็น 5 ประเภทดังต่อไปนี้ 2.1 ประเภทส่วนตัว เป็นเว็บที่ออกแบบและสร้างขึ้นเพื่อนาเสนอข้อมูลของเจ้าของเว็บเป็น หลั ก ส่ ว นใหญ่ มั ก จะ น าเสนอผลงานหรื อ เรี ย กง่ า ย ๆ ว่ า แฟ้ ม สะสมงาน จุดประสงค์ห ลั กของเว็บ ลั กษณะนี้จ ะใช้ เ พื่ อ การสมั ค รงานหรือ ต้ อ งการโชว์ ผลงาน หรือ อุดมการณ์ของตัวเองให้แก่ผู้เข้าชม และให้ผู้เข้าชมสามารถเข้ามา มีส่วนร่วม หรือมีกิจกรรมโต้ตอบกันได้ ตัวอย่างเว็บส่ วนตัว (เว็บนายกิตติ์กาญจน์ ปฏิพนั ธ์ )

http://kit.kvc.ac.th

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

2.2 ประเภทบันเทิง เป็ น เว็ บ ที่ เน้ น ความบั น เทิ ง เป็ น หลั ก ที่ น าเสนอข่ า วเกี่ ย วกั บ ดารา ภาพยนตร์ เพลง กลุ่มของผู้เข้าชมส่วนมากจะเป็นกลุ่มวัยรุ่น หรือ คนที่ทางาน เกี่ยวกับวงการบันเทิง จะเป็นขาประจา และต้องเข้ามาเป็นกิจวัตรประจาวัน และเนื้อหาก็ต้องปรับปรุงตลอดเวลา

2.3 ประเภทให้ความรู้

เว็บบันเทิง ( www.ch7.com และ www.sanook.com)

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

ตัวอย่างเว็บให้ความรู้ (เว็บ www.pantip.com และ www.microsoft.com) .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

2.4 ประเภทให้บริการ เป็นเว็บที่ให้บริการเกี่ยวกับเรื่องราวต่างๆเช่นเว็บเกี่ยวกับการท่องเที่ยว เว็บเครือข่าย โทรศัพท์มือถือ การซื้อ -ขาย สินค้าบนระบบอินเทอร์เน็ต การ บริการให้คาปรึกษา ฯลฯ

ตัวอย่างเว็บให้บริการ (เว็บ www.teedinn.com และ www.yellowpages.co.th)

2.5 ประเภทค้นหาข้อมูล (Search Engine) เว็บยอดนิยมที่ใช้กันมากที่สุด เพราะช่วยให้ผู้ใช้เว็บสามารถสืบค้นข้อมูล จากเว็ บ ทั่ ว โลก ไม่ ว่ า จะเป็ น รู ป ภาพ เว็ บ หรื อ โปรแกรมต่ า ง ๆ เช่ น www.google.com , www.being.com

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

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

รูปภาพแสดงตัวอย่างโลโก้ 3.2 ส่ วนหั ว ของเว็บ เพจ (Header) เป็ น ส่วนที่ นั กออกแบบและพั ฒ นาเว็ บ สามารถออกแบบกราฟิกและแอนนิเมชั่นได้ อย่างเต็มที่เพราะเป็นการสร้างแรง บั น ดาลใจหรื อ ความประทั บ ใจให้ กั บ ผู้ เข้ าชมเว็ บ ส่ ว นใหญ่ มั ก จะเป็ น ภาพ เกี่ยวกับตัวแทนของเว็บไซต์หรือกิจกรรมต่าง ๆ

ส่วนหัวเว็บมือถือโนเกีย (www.nokia.co.th)

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

3.3 ส่วนเมนูหลัก (Link Menu) เมนูหลักหรือลิงค์ เป็นจุดเชื่อมโยงไปสู่ ส่วน ของเนื้อหาเว็บ ไซต์ส่วนมากจะเป็น แนวตั้งด้านซ้ายของเว็บ แต่แนวนอนก็ มี หรือบางครั้งอาจจะเป็นปุ่มก็ได้

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

แสดงส่วนเนื้อหา

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

3.5 ส่วนล่างสุด (Footer) เป็นส่วนที่อยู่ด้านล่างสุดของเว็บไซต์ ส่วนมากจะ เป็น ลิขสิทธิ์ คาแนะนาในการเข้า ชมเว็บไซต์ หรือที่อ ยู่ สาหรับติดต่อกลับ เป็นต้น

แสดงส่วนท้ายของเว็บไซต์ www.hunsa.com 3.6 แบนเนอร์ (Banner) เป็ น ส่ วนประชาสั ม พั น ธ์ หรือ ไว้ส าหรั บ เช่ า พื้ น ที่ โฆษณา ส่วนมากจะเป็นภาพเคลื่อนไหว เพื่อดึงดูดใจผู้เข้าชมเว็บไซต์

แสดงส่วนของการประชาสัมพันธ์ หรือ ลงโฆษณา

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

4 การออกแบบและพัฒนาเว็บเพจในแต่ละหน้าจะมีส่วนประกอบที่สาคัญ คือ โลโก้ ส่วนหัว ส่วนเนื้อหา เมนู และส่วนท้ายของเว็บ การแบ่งพื้นที่ของ หน้ า เว็ บ เพจให้ เป็ น หมวดหมู่ มี จุ ด เด่ น เน้ น จุ ด สนใจ เพื่ อ ให้ ถู ก หลั ก การ ดังต่อไปนี้ ❖



  

รูปภาพ แสดงการแบ่งพื้นที่ของเว็บเพจ การแบ่งพื้นที่ของแต่ละเว็บเพจ สามารถแบ่งได้ดังนี้  Logo สัญลักษณ์หรือ สือ่ แทนองค์กร ❖ Header ส่วนหัวสาหรับออกแบบกราฟิกหรือภาพเคลื่อนไหว  Body ส่วนเนื้อหา เพื่อนาเข้าสูร่ ายละเอียดต่าง ๆ  Menu ส่วนสาหรับลิงค์ไปยังเนื้อหาต่าง ๆ .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

 Footer ส่วนท้ายบอกลิขสิทธิ์หรือที่อยู่สาหรับติดต่อกลับ

5

Web Design Principle

ในการออกแบบเว็ บ ที่ ดี ห ลั ง จากที่ เ รามี ค วามรู้ ความสามารถ ประสบการณ์ที่ดีแล้วขั้นตอน ต่อ ไปจะเป็นกระบวนการออกแบบและพั ฒ นา เว็บไซต์ ซึ่งมีปัจจัยหลักอยู่ 3 ปัจจัยคือ 1.

2.

3.

มีการออกแบบโครงสร้างที่ดี มีการออกแบบหน้าของเว็บที่ดี มีการกาหนดเป้าหมายของเว็บที่ชัดเจน

5.1 การออกแบบโครงสร้างเว็บที่ดี ก่อนที่เราจะทาการออกแบบโครงสร้างของเว็บไซต์ เรามาทาความเข้าใจ กับ Site Map ก่อน ปรัชนันท์ นิลสุข (2548) กล่าวว่า Site Map คือ การ วางแผนเนื้อหาของเว็บไซต์ เพื่อเป็นโครงสร้างในการจัดหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ ทาให้เราเห็นโครงสร้างทั้งหมดของเว็บ

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

ในส่วนของ site map ไม่ได้มองเฉพาะในเรื่องเว็บไซต์เท่านั้น แต่ยัง ประยุกต์เข้ากับการทางานทุกชนิดได้ โดยเฉพาะในงาน CAI (Computer Aided Instruction) หรือคอมพิวเตอร์ช่วยสอน และงานผลิตสื่อรูปแบบอื่น ๆ 5.1.1 ลักษณะโครงสร้างของเว็บไซต์ การออกแบบและพัฒนาเว็บสามารถทาได้หลายระบบขึ้นอยู่กับลักษณะ ของข้อมูลหลักการของผู้พัฒนา ตลอดจนกลุ่มเป้าหมายที่ต้องการนาเสนอ เช่น หากกลุ่ ม เป้ าหมายเป็ น เด็ ก วัย รุ่น และน าเสนอข้ อ มู ล เกี่ ย วกั บ ความบั น เทิ ง ปรัชนันท์ นิลสุข (2548) กล่าวว่า การออกแบบเว็บ อาจจะออกแบบให้มีทิศ ทางการไหลของหน้าเว็บที่หลากหลายใช้ลูกเล่นได้มากกว่าเว็บที่นาเสนอด้าน วิชาการ ทั้งนี้หลักการออกแบบเว็บ สามารถแบ่งได้ตามโครงสร้างของเว็บไซต์ ได้ 3 ลักษณะ 5.1.1.1 แบบลาดับขั้น (Hierarchy) เป็นการจัดแสดงหน้าเว็บเรียง ตามลาดับเป็นกิ่งก้านแตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว เหมาะสาหรับ การนาเสนอข้อมูลที่มีการแบ่งเป็นหมวดหมู่ที่ไม่มากนัก และมีข้อมูลย่อยไม่ลึก มาก Home Page

Web Page

Web Page

Web Page

Web Page

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

รูปภาพ โครงสร้างเว็บไซต์แบบลาดับขั้น 5.1.1.2 แบบเชิงเส้น (Linear) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่อง ไปในทิศทางเดียว เหมาะสาหรับการนาเสนอข้อมูลที่เป็นรูปภาพ เช่น นาเสนอ สิ่งต่างๆ Home Page

Web Page

Web Page

Web Page

รูปภาพ 2.16 โครงสร้างเว็บไซต์แบบเชิงเส้น 5.1.1.3 แบบผสม (Combination) เป็นการจัดหน้าเว็บผสมระหว่าง แบบลาดับขั้นและแบบเชิงเส้น มักจะเป็นแบบที่นิยมใช้กันอย่างแพร่หลายใน ปัจจุบัน เนื่องจากสามารถควบคุมการนาเสนอและการเรียกดูได้สะดวก และ รวดเร็ว Home Page

Web Page

Web Page

Web Page

Web Page

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

รูปภาพ โครงสร้างเว็บไซต์แบบผสม

5.2 มีการออกแบบหน้าของเว็บที่ดี ในการที่ เราจะออกแบบหน้ า เว็ บ นั้ น เราควรค านึ ง ถึ ง เป้ า หมายและ จุด ประสงค์ รวมไปถึ ง ข้ อ ความ สี ภาพกราฟิ ก ภาพเคลื่ อ นไหว และการมี ความคิดสร้างสรรค์ที่จะสร้างหน้าเว็บขึ้นมาให้มีจุดเด่น จนทาให้ผู้ชมประทับใจ หน้าเว็บของเราได้ ดังต่อไปนี้ 5.2.1 การเลือกใช้สีให้เหมาะสม เนื่องจากแต่ละสีมีผลต่ออารมณ์และ ความรู้สึกมีความเป็นเอกลักษณ์ เรียบง่ายไม่สลับซับซ้อนจนเกินไป สามารถ แสดงผลได้อย่างรวดเร็ว

5.2.2 มีการออกแบบกราฟิกที่สวยงาม สื่อความหมายได้อย่างลงตัว มี เอกลักษณ์ ผสมผสานทั้ง เนื้อหา, รูปภาพ, ภาพเคลื่อนไหว ได้เป็นอย่างดี

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

รู ปภาพ เว็บรถยนต์ และงานศิลปะ

5.3 การกาหนดเป้าหมายเว็บไซต์ที่ชัดเจน

การกาหนดเป้าหมายสาหรับการออกแบบเว็บไซต์เป็นหัวใจสาคัญในการ ออกแบบเว็บไซต์ เราควรกาหนดเป้าหมายของเว็บไซต์ให้ชัดเจนก่อนที่จะทา การออกแบบและพัฒนาเว็บ ขณะที่ พันจันทร์ ธนวัฒนเสถียร(2551) กล่าว ว่าการกาหนดเป้าหมายจะเป็นตัวกาหนดขอบเขตและการทางานของเว็บไซต์ ซึ่งกาหนดเป้าหมายเป็น 2 ระยะเป้าหมายคือ 1. เป้าหมายระยะสั้น 2. เป้าหมายระยะยาว ซึ่งจะมีประโยชน์คือ เพื่อ ให้ง่ายต่อการประเมินผล ซึ่งเราสามารถแบ่ง เป้ า หมายออกเป็ น กลุ่ ม ตามความส าคั ญ ได้ 3 กลุ่ ม หลั ก ๆ ด้ ว ยกั น คื อ จาเป็นต้องมี อยากให้มี รอได้ และเพื่อให้ผู้สร้างหรือทีมผู้พัฒนาเว็บได้แ บ่งว่า ส่วนใดมีความสาคัญมากน้อยเพียงใด ควรพัฒนาจุดใดก่อน การกาหนดเป้าหมายนั้นอาจไม่ได้มาจากเพียงคนเดียว แต่อาจจะมาจาก บุคคลหลายฝ่ายที่มีส่วนเกี่ยวข้อง ซึ่งเป้าหมายที่ได้จากแต่ละฝ่ายนั้น อาจจะมี .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

เยอะมาก เราเรียกสิ่งเหล่านั้นว่า “รายการที่ปรารถนา” ซึ่งผู้สร้างเว็บ อาจจะ ต้องนาเป้าหมายดังกล่าวมาระบุความชัดเจน ลาดับความสาคัญของเป้าหมาย และในที่สุดเป้าหมายที่ได้ก็จะเป็นปัจจัยที่สาคัญในการสร้างเว็บ

6 ในการออกแบบเว็บ ปัจจุบันแม้จะไม่มีความรู้ในการใช้ภาษา HTML ก็ สามารถสร้างเว็บได้สวยงามเพราะมีโปรแกรมในการสร้างและบริหารเว็บที่ใช้ งานง่ า ย ธวั ช ชั ย ศรี สุ เทพ (2547) กล่ า วว่ า การออกแบบเว็ บ ที่ ดี ค วรจะมี มาตรฐานที่ ดี น าไปสู่ก ารออกแบบและพั ฒ นาเว็บ ที่ ป ระสบความสาเร็จ ซึ่ ง ประกอบไปด้วยมาตรฐานดังต่อไปนี้ 6.1 ความเรียบง่าย (Simplicity) การออกแบบและพัฒนาหน้าเว็บที่เรียบง่าย ไม่ ซั บ ซ้ อ น แ ต่ สาม ารถ สื่ อ ส ารเนื้ อ ห า ให้ ผู้ เ ข้ าช ม เข้ าใจได้ ดี เช่ น www.google.co.th , www.sony.com

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

รูปภาพเว็บ www.google.co.th และ www.sony.com 6.2 ความเป็นเอกลักษณ์ (Identity) สิ่งที่สาคัญที่สุดในการออกแบบคือต้อง ค านึ ง ถึ งเอกลั ก ษณ์ ที่ เป็ น จุ ด เด่ น ขององค์ ก ร เพื่ อ ให้ เว็บ สามารถสะท้ อ นถึ ง องค์กรนั้น ๆ ได้ เช่นเว็บสถาบันการศึกษาไม่ควรจะมีแหล่งอบายมุขหรือสถาน เริ งรมย์ หรือ เว็บ ของธนาคารต้ อ งไม่ เหมื อ นสวนสนุ ก การออกแบบควรจะ เหมาะสมและลงตัวทั้งการใช้สี รูปภาพ และภาพเคลื่อนไหว 6.3 เนื้อหามีประโยชน์และทันสมัย (Useful And Update Content) หัวใจที่สาคัญที่สุดของเว็บคือเนื้อหาที่มีประโยชน์ ถูกต้อง ครบถ้วน สมบูรณ์ ทันสมัยต่อเหตุการณ์เสมอ

6.4 มี ค วามสม่ าเสมอ มาตรฐานเดี ย วกั น (Consistency Standard Theme) แต่ ล ะหน้ าเว็บ ควรจะออกแบบภายใต้ ม าตรฐานเดี ยวกัน รูป แบบ .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

เดียวกัน เพื่อทาให้ผู้ชมไม่หลงทางหรือเข้าใจผิดว่าได้ อื่นแล้ว

เข้าชมเว็บหลงไปเว็บ

รู ปภาพ เว็บมาตรฐานเดียวกัน

6.5 มีคุณภาพและมาตรฐานในการออกแบบ (Design Stability) การที่จะทา ให้ผู้ชมรู้สึกว่าเว็บมีคุณภาพ ถูกต้อง เชื่อถือได้ การออกแบบเป็นปัจจัยหลักใน การออกแบบและพัฒ นาเว็บ เช่นการจัดวางเนื้อหาและรูปภาพ การคัดกรอง เนื้อหาให้ถูกต้อง รอบคอบ 7

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

เว็บไซต์ที่ไม่ประสบความสาเร็จส่วนมากจะออกแบบและพัฒนาตามใจ ของผู้สร้างเว็บไม่ได้คานึงผู้กลุ่มเป้าหมาย ทาให้จะเกิดปัญหาต่าง ๆ 7.1 การแสดงผลช้า (Slow Display) การเน้นงานกราฟิก ทาให้ไฟล์มี ขนาดใหญ่ส่งผลให้ใช้เวลาในการโหลดเพื่อแสดงผล จากงานวิจัยของต่างชาติ ระบุมาตรฐานในการแสดงผลหน้าแรกไม่ควรจะเกิน 8 วินาที ถ้ามากกว่านั้น ผู้ใช้จะไปชมเว็บอื่น (แต่ประเทศไทยอยู่ประมาณ 15 วินาที)

7.2 ข้อมูลเก่า ไม่ทันสมัย (No Update Data) เมื่อผู้เข้าชมพบว่าข้อมูล เก่า ไม่ทันต่อเหตุการณ์ปัจจุบัน ก็จะเกิดความไม่เชื่อถือและไม่อยากกลับมาชม อีก 7.3 ใช้เทคโนโลยีสูงโดยไม่จาเป็น (High Technology) บางครั้งคุณไม่ จาเป็นต้องใช้เทคโนโลยีสูงเพื่อแสดงฝีมือหรือดึงดูดความสนใจจากผู้ใช้ เพราะ จะทาให้เกิดอุปสรรคและความยุ่งยากในการติดตั้งโปรแกรมเพิ่มเติม ที่สาคัญ ผู้ใช้บางคนมีคอมพิวเตอร์ที่ความเร็วต่าไม่สามารถรองรับโปรแกรมดังกล่าว

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

รู ปภาพ เว็บ www.central.com และ www.hardcoregraphic.com

7.4 ใช้ ตั ว หนั ง สื อ หรื อ ภ าพ เคลื่ อ นไหวตลอดเวลา (Dynamic Animations) สิ่งเหล่านี้จะสร้างความราคาญและรบกวนสายตาให้กับผู้เยี่ยมชม

รูปภาพ เว็บ www.animationfactory.com/en/ และ www.dekd.com/mytoon/ 7.5 สี ไม่ เหมาะสม (No Compatible Color) หลัก การออกแบบหรือ ทฤษฏีสีต่าง ๆ จะถูกออกแบบให้ตรงกับลักษณะองค์กร เช่นองค์กรเกี่ยวกับป่า ไม้ ก็จะใช้สีเขียว องค์กรเกี่ยวกับวัดจะใช้ สีเหลือง และที่สาคัญควรจะมีความ แตกต่างระหว่างสีของหัวข้อและเนื้อหา .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

7.6 ชื่อของเว็บยาว ซ้าซ้อน (Long Name Website) ทาให้ยากต่อการ จดจา และสะกดผิด หรือการใช้ตัวอักษรพิมพ์เล็กและพิมพ์ใหญ่ผสมกันเป็นต้น รู ปภาพ ตัวอย่างชื่อเว็บที่ตั้งยาว 1. http://webhosting.devshed.com/c/a/ WebHosting-Articles/ 2. http://www.techsupportforum.com/ networking-forum/networking-support/ 3. http://www.irishwebmasterforum.com/servertechnical-administration-tips-and-queries/

8 จากการสารวจความต้องการของกลุ่มคนทั่วไป ธวัชชัย ศรีสุเทพ (2547) ได้สรุปข้อมูลหลักที่ควรมีอยู่ในเว็บได้ 5 ส่วน ซึ่งจัดเป็นกลุ่ม ๆ และหมวดหมู่ .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

จากความต้องการพื้นฐานทั่วไป แต่อย่างไรก็ตามข้อมูลเหล่านี้อาจจะใช้ไม่ได้กับ ทุก ๆ เว็บไซต์ 8.1 ข้อมูลเกี่ยวกับองค์กร (About the Organization) โดยปกติ แ ล้ ว จะต้ อ งมี ก ารแจ้ ง ข้ อ มู ล บริ ษั ท เช่ น ที่ อ ยู่ เบอร์ โ ทร คณะกรรมการดาเนินงาน หรือสถานะด้านการเงินของบริษัท เพื่อสร้างความ เชื่อมั่นในเสถียรภาพของบริษัท การบริการและคุณภาพของสินค้า หรือกรณี ลูกค้าจะติดต่อกลับกรณีมีข้อสงสัย

รูปภาพ ส่วนท้ายของเว็บไซต์แสดงรายละเอียดที่อยู่ และสถานที่ติดต่อ เกี่ยวกับองค์กร/บุคคล

8.2 รายละเอียดผลิตภัณฑ์หรือกิจกรรมต่าง ๆ (Product Information or Activity Personal) ผู้ เข้ าชมหรือ ลู ก ค้ าต้ อ งการรู้ข้ อ มู ล และรายละเอี ย ดต่ า ง ๆ ก่ อ นที่ จ ะ

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

ตัดสินใจ ดังนั้นข้อมูลต่าง ๆ ที่จะเป็นตัวช่วยในการสนับสนุนการขายสินค้า จึ ง จาเป็นอย่างยิ่ง

รูปภาพ แสดงรายละเอียดของผลิตภัณฑ์ต่าง ๆ ทั้งเป็นเนื้อหาและแบบวิดีโอแนะนา

8.3 ข่าวสารใหม่ ๆ หรือโปรโมชัน่ ต่าง ๆ (News or Promotion) ลูกค้าหรือผู้เข้าชมบางกลุ่มติดตามความเคลื่อนไหวและผลิตภัณฑ์ใหม่ ๆ ของบริษัทฯ ถ้าเราไม่แจ้งข่าวสารหรือผลิตภัณฑ์ใหม่ ๆ ให้ทราบ อาจจะทาให้ผู้ เข้าชมไม่เข้ามาเยี่ยมเว็บนี้อีกเลย

8.4 การมีส่วนร่วม (Cheer And Share)

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

การให้ ผู้ เ ข้ า ชมหรื อ ลู ก ค้ า มี ส่ ว นร่ ว มในการติ ช ม หรื อ แชร์ ค วามรู้ เหมือนกับเป็นส่วนหนึ่งในองค์กรหรือ ผลิตภัณ ฑ์นั้น ๆ เป็นการทาให้ลูกค้ามี ความสาคัญเช่น เว็บบอร์ดหรือสมุดเยี่ยม ฯลฯ

รู ปภาพ แสดงเว็บบอร์ ด ซึ่ งเป็ นการเปิ ดโอกาสให้ ผ้ เู ข้ าชมมีส่วนร่ วม

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

9 (จากประสบการณ์ตรงของผู้เขียน) ในโลกแห่งการแข่งขัน ธุรกิจรับออกแบบและพัฒ นาเว็บเป็นที่ต้องการ ของตลาดแรงงานและนิยมอย่างยิ่งในปัจจุบัน การรับออกแบบและพัฒนาเว็บ บริห ารจัดการเว็บ ประชาสัมพั นธ์และโปรโมทเว็บ เป็น กลยุทธ์ที่ทุ กคนต้อ ง สร้างขึ้นเพื่อให้ธุรกิจประสบความสาเร็จ จึงสรุปแนวคิดจากประสบการณ์ของ ผู้เขียนดังนี้ 9.1 แสวงจุดร่วม สงวนจุดต่าง สรรค์สร้างจุดเด่น ในโลกแห่ งการแข่ งขั น ที่ ทั้ ง สั งคม เศรษฐกิ จ การเมื อ ง การศึ ก ษาที่ หลากหลายมิติ การแข่งขันด้านราคาและการบริการ จะเป็นเป้าหมายหลักที่ ผู้ประกอบการธุรกิจรับออกแบบและพัฒนาเว็บส่วนใหญ่ใช้เป็นประเด็นในการ จูงใจลูกค้าให้เข้ามาใช้บริการออกแบบและพัฒนาเว็บของตนเองส่งผลให้การ แข่งขัน ในภาพรวม ของธุรกิจเกิดเป็น สงครามราคาแข่งขันกั น การดึงความ สนใจของลูกค้าด้วยการแสวงจุดร่วม สงวนจุดต่าง สรรค์สร้างจุดเด่น ที่ช่วย สร้างสรรค์รูปแบบใหม่ให้กับการสร้างเว็บ เช่น “การสร้างความรวดเร็วในการ สร้ า งเว็ บ และขายความรู้ ใ ห้ บ ริ ก ารลู ก ค้ า ” น าไปสู่ จุ ด ขายด้ า นการสร้ า ง ความรู้สึกที่ประทับใจที่แตกต่างและหาไม่ได้จากบริษัทอื่นๆ ซึ่งในส่วนนี้จะเป็น สิ่งที่จะช่วยให้ลูกค้าตัดสินใจใช้บริการออกแบบและสร้างเว็บอย่างรวดเร็ว ส่วน ที่บริษัทอื่นมี เราก็มีให้ดีและเหมือนเขา แต่สิ่งที่เขาไม่มี เราต้องสรรค์สร้างให้ เด่นและเป็นจุดขายสาหรับเรา .ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

รูปภาพแนวคิดแสวงจุดร่วมสงวนจุดต่างสร้างสรรค์จุดเด่น www.doctorkit.com

9.2 สร้างสรรค์ ความครบวงจร ในโลกของธุรกิจบนเว็บที่หลากหลายมิติ การสร้างสรรค์เว็บที่ครบวงจร ก็เป็นทางเลือกหนึ่งที่สาคัญ เช่นการสร้างศูนย์บริการวิชาการด้านเว็บ คู่ไปกับ การออกแบบและพัฒนา การสร้างอาณาจักรรับสร้างเว็บให้ครบวงจร การให้มี ทั้งบริการสร้างเว็บไซต์เฉพาะธุรกิจ , เว็บไซต์สาเร็จรูป , ออกแบบสิ่งพิมพ์ และ ศูนย์อบรมสาหรับสร้างเว็บ เว็บโปรแกรมมิ่ง เว็บขายสินค้า เว็บให้บริการฟรีอัพ โหลดและโปรโมทฟรี เป็นคาตอบที่ลูกค้ามาแล้วตัดสินใจได้เลย

รู ปภาพ แนวคิดการสร้ างสรรค์ เว็บที่ครบวงจร www.doctorkitt.com

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

9.3 คุณภาพและมาตรฐาน “คุณ ภาพและมาตรฐาน” เป็นหัวใจหลักที่ลูกค้าจะพิจารณาตัดสินใจ เริ่มตั้งแต่ คุณภาพด้านการให้บริการ การสรรค์สร้างงาน และการส่งมอบงาน ซึ่งสามารถจาแนกได้ดังนี้ 1. ด้านการให้บริการ เริ่มตั้งแต่การสร้างความประทับใจแรกพบ การรับ งาน วิเคราะห์งาน การให้บริการก่อนและหลังการติดต่อประสานงาน 2. ด้านการสรรค์สร้างงาน เริ่มต้นจากระบวนการที่ดี การสอบถามความ ต้องการของลูกค้า การวิเคราะห์งาน การออกแบบและสร้างสรรค์งานอย่างมี คุณภาพและเป็นระบบ 3. การส่งมอบงาน ควรจะติดต่อประสานงานให้ดี มีสอบถามและบริการ หลังส่งมอบงาน

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”

หลักการออกแบบและพัฒนาเว็บไซต์ โดย ดร.กิตติ์กาญจน์ ปฏิพันธ์

10 Homepage Design of The Brain สิ่งแรกที่ผู้เข้าชมจะได้เห็นในการเปิ ด ประตู เข้าสู่เว็บ นั้น ๆ ก็คื อ “หน้ าเว็บ ” หรือ พูด ง่าย ๆ ก็ คือ ถ้ าเป็ น มนุษ ย์ ก็ เปรี ย บเสมื อ นรู ป ร่ าง หน้ าตา และบุ ค ลิ ก ภาพแรกพบนั่ น เอง หลั ก ในการ ออกแบบหน้าเว็บให้สะดุดตา น่าเข้าชมก็คือการผสม ผสานระหว่างรูปภาพ เนื้อหา ภาพเคลื่อนไหว โดยมีเป้าหมายสาคัญเพื่อสื่อความหมายให้ชัดเจนและ น่าสนใจ ในหลักการออกแบบที่สร้างสรรค์ 10.1 มีความคิดสร้างสรรค์ กล้านาเสนอรูปแบบใหม่ ๆ ที่มีความแตกต่าง อย่ายึดติดกับรูปแบบเดิม ๆ เช่นนาระบบมัลติมีเดีย หรือภาพกราฟิกนาเสนอ กลุ่มเป้าหมายต้องชัดเจน กล้านาเสนอจุดเด่นที่แตกต่างอย่างสร้างสรรค์

รู ปภาพ โฮมเพจสร้ างสรรค์

10.2 เรียนรู้และออกแบบจากเว็บต่าง ๆ บางทีการด้อยประสบการณ์ที่จะตกผลึกไป สู่การออกแบบที่ดีเลิศยังน้อยนิด วิธีที่จะเรียนรู้อย่าง รวดเร็วคือการสารวจเว็บที่ประสบความสาเร็จ รู ปภาพ เว็บที่ออกแบบถูกหลักการ ยอดนิยม ถูกหลักการออกแบบ จากเว็บต่าง ๆ กล้ านาเสนอความเหมือนที่แตกต่ าง มาผสม ผสานบูรณาการ นาไปสู่การออกแบบหน้าเว็บอย่างลงตัว

.ยิ่งขยันมาก ยิ่งมีโอกาส คนประสบความสาเร็จจะขยันมุ่งมั่น ทุ่มเท เอาจริง เอาจัง”