unit 1-การออกแบบและพัฒนาเว็บไซต์

WEB DESIGN การออกแบบเว็บไซต์



ศิลปะและการออกแบบ (Art & Design) ศิลปะ (Art) คือศาสตรแ์ หง่ การแสดงออก จากจนิ ตนาการและอารมณ์ เพ่อื ความสุขทาง จติ ใจ “การสื่อความหมาย จงึ เปน็ สงิ่ สาคัญสุดใน งานศลิ ปะ”

ศลิ ปะและการออกแบบ (Art & Design)  การออกแบบ (Design) คอื ศาสตรแ์ ห่ง การความคดิ การแก้ไขปัญหาท่มี อี ยู่ เพือ่ สนองต่อจดุ ม่งุ หมาย และนากลับมาใชง้ านได้ อย่างพึงพอใจ 1) ความสวยงาม 2) มีประโยชนใ์ ช้สอยท่ีดี 3) มีแนวความคดิ ในการออกแบบที่ดี “Be Graphic : โสรชัย นันทวัชรวบิ ูลย์”

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

พื้นฐานในการออกแบบเวบ็ ไซตท์ ่ดี ี สะดวก เนอ้ื หา Web Site เวลา การจดั การ

แนวทางในการออกแบบเวบ็ ไซต์ http://www.rookienet.com

แนวทางในการออกแบบเว็บไซต์ http://www.rookienet.com

แนวทางในการออกแบบเวบ็ ไซต์ http://www.mazda2life.com

แนวทางในการออกแบบเว็บไซต์ http://www.amazon.fr



1. ความเรียบงา่ ย มรี ปู แบบทเี่ รยี บงา่ ย ไมซ่ บั ซอ้ น และใช้งาน ได้สะดวก ไม่มกี ราฟกิ หรือตัวอักษรท่ีเคลื่อน ไหวอยตู่ ลอดเวลา ชนิดและสีของตวั อักษรไม่ มากจนเกินไปทาใหว้ ุ่นวาย

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

3. ความเปน็ เอกลกั ษณ์ การออกแบบเวบ็ ไซตค์ วรคานึงถึงลกั ษณะของ องค์กร เพราะรปู แบบของเวบ็ ไซต์จะสะทอ้ นถงึ เอกลกั ษณแ์ ละลกั ษณะขององค์กรนน้ั ๆ เชน่ ถา้ เปน็ เวบ็ ไซต์ของทาง ราชการ จะต้องดนู า่ เชื่อถอื ไม่เหมือนสวนสนกุ ฯลฯ

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

5. ระบบเนวเิ กชนั ท่ใี ชง้ านงา่ ย ต้องออกแบบใหผ้ ู้ใชเ้ ขา้ ใจง่ายและใช้งานสะดวก ใชก้ ราฟกิ ทีส่ อ่ื ความหมายร่วมกบั คาอธบิ ายท่ี ชัดเจน มีรปู แบบและลาดับของรายการที่สมา่ เสมอ เช่น วางไว้ ตาแหนง่ เดยี วกนั ของทกุ หนา้

6. ลักษณะทีน่ า่ สนใจ หน้าตาของเว็บไซตจ์ ะตอ้ งมีความสมั พนั ธก์ บั คณุ ภาพขององคป์ ระกอบตา่ งๆ เชน่ คณุ ภาพของ กราฟิกที่จะตอ้ งสมบรู ณ์ การใช้สี การใชต้ ัวอกั ษร ที่อา่ นงา่ ย สบายตา การใชโ้ ทนสที เี่ ขา้ กนั ลกั ษณะหน้าตาทนี่ า่ สนใจนั้นข้ึนอยูก่ บั ความชอบ ของแต่ละบุคคล

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

8. คุณภาพในการออกแบบ คุณภาพในการออกแบบ การออกแบบและเรยี บ เรียงเน้ือหาอยา่ งรอบคอบ สร้างความรสู้ กึ ว่า เว็บไซตม์ ีคุณภาพ ถกู ตอ้ ง และเชื่อถอื ได้

9. ระบบการใช้งานทถี่ ูกต้อง การใชแ้ บบฟอรม์ สาหรบั กรอกข้อมูลต้องสามารถ กรอกได้จริง ใช้งานไดจ้ ริง ลิงคต์ ่างๆ จะต้อง เชือ่ มโยงไปหน้าที่มีอยจู่ ริงและถูกตอ้ ง ระบบการ ทางานต่างๆ ในเวบ็ ไซต์จะต้องมีความแน่นอนและ ทาหน้าทไ่ี ด้อย่างถกู ตอ้ ง

ตวั อย่างการออกแบบเว็บไซต์ 1 http://www.daddy.fr/

ตวั อย่างการออกแบบเว็บไซต์ 1 32 http://www.logicbombmedia.com/blog

ตัวอย่างการออกแบบเว็บไซต์ 1 23 http://www.clickfarminteractive.com/

ตัวอย่างการออกแบบเวบ็ ไซต์ 1 2 4 3 http://www.amazon.fr

ตัวอย่างการออกแบบเว็บไซต์ 1. 800 x 600 2. 1024 x 768 3. 800 – 1024 x 600 - 768

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



กระบวนการในการพฒั นาเวบ็ ไซต์  สารวจปัจจยั สาคญั (Research)  พฒั นาเน้อื หา (Site Content)  พัฒนาโครงสรา้ งเว็บไซต์ (Site Structure)  ออกแบบและพัฒนาเวบ็ ไซต์ (Visual Design)  พฒั นาและดาเนนิ การ (Production and Operation)

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

ขน้ั ตอนท่ี 2 : พัฒนาเนื้อหา (Site Content) หลังจากการศกึ ษาข้อมลู เบื้องตน้ และกาหนด วัตถปุ ระสงค์ของเวบ็ ไซต์แลว้ จะสามารถกาหนด แนวทางในการออกแบบเวบ็ ไซต์ ขอบเขตเนื้อหา และการใช้งาน เพื่อรวบรวมขอ้ มลู และเน้อื หาของ เว็บไซตต์ ่อไป

ข้นั ตอนท่ี 3 : พฒั นาโครงสร้างเว็บไซต์ (Site Structure) ในขัน้ ตอนนี้ จะนาข้อมลู ท่ีรวบรวมได้มาจดั ระบบ ขอ้ มลู โดยจัดทาแผนผงั โครงสร้างข้อมูล และ ออกแบบระบบ Navigation เพอื่ ออกแบบการใช้ ข้อมูลและแนวทางการท่องเว็บท่จี ะพฒั นา

ข้นั ตอนท่ี 3 : พฒั นาโครงสร้างเวบ็ ไซต์ (Site Structure)

ขนั้ ตอนที่ 4 : ออกแบบและพัฒนาหน้าเวบ็ (Visual Design) ในขัน้ ตอนน้ี จะทาการออกแบบลักษณะหนา้ ตาของ เว็บเพจตามหลกั การออกแบบเว็บท่ีดี มกี ารจดั แบง่ พืน้ ที่ในหนา้ เว็บเพจ และมรี ปู แบบโครงสร้างขอ้ มลู อยใู่ นหนา้ เว็บทีอ่ อกแบบนี้ ในข้นั ตอนน้ี จะได้เวบ็ เพจต้นแบบทจี่ ะใชพ้ ฒั นาเป็นเว็บไซต์ตอ่ ไป

ข้นั ตอนท่ี 4 : ออกแบบและพฒั นาหนา้ เว็บ (Visual Design)

ข้นั ตอนท่ี 4 : ออกแบบและพฒั นาหนา้ เว็บ (Visual Design)

ขน้ั ตอนท่ี 5 : พฒั นาและดาเนินการ (Production and Operation) ในข้นั ตอนนี้ จะทาการพัฒนาเว็บเพจที่ออกแบบ เปน็ เว็บไซตท์ ี่สมบูรณ์ จนถงึ การ upload เวบ็ ไซต์สู่เคร่อื งแม่ข่ายเพือ่ เผยแพรส่ ู่ อินเทอรเ์ นต็ และกาหนดแนวทางการดแู ลเนอ้ื หา และพฒั นาตอ่ ไป

Free Web Hosting www.thport.com www.krubpom.com www.ispace.in.th www.thmy4.com www.thaiwebmasterserver.org www.thaifreebox.com

นกั พฒั นาเวบ็ ไซตค์ วรร้เู ครอ่ื งมืออะไรบา้ ง Webmaster Macromedia Dreamweaver 8 Adobe Photoshop 7.0 Web Site Developer Adobe ImageReady 7.0 System Administrator Macromedia Flash 8 Macromedia Contribute 3 Internet Information Service Apache Appserv

เคร่ืองมอื และภาษา ภาษา :  Microsoft : ASP, ASP.NET, VB, ASP.NET, XML WEB SERVICE  JAVA  PHP

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

Q&A