การออกแบบและพัฒนาเว็บไซต์ สำหรับการบริการสารสนเทศ WEBPAGE DESIGN AND DEVELOPMENT FOR INFORMATION SERVICES
Review Internet vs Web site
Internet - ความหมาย - ISP - สถาปัตยกรรม Client-Server Review Internet - ความหมาย - ISP - สถาปัตยกรรม Client-Server
Web site - Web browser - URL - Hypertext transfer protocol - Domain name - IP address Review
Web site (cont.) - Web site - Web page - Home page Review
Hypertext Markup Language (HTML) - ลักษณะเด่น คือ <คำสั่ง> เรียกว่า tag ตัวอย่าง เช่น <strong> อักษรตัวหนา </strong> <p align=“left”> ประโยคข้อความ </p> Review attribute tag
Review โครงสร้างพื้นฐาน <html> <head> <title> Web title </title> </head> <body> Web content </body> </html>
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
Review การแสดงผล <html> <head> <title> Web title </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <strong>Hello World</strong> </body> </html>
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 1. ความเรียบง่าย (Simplicity) - มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก - สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบ เสริมที่จำเป็นเท่านั้น
Chaos design
Chaos design
Chaos design
Bad design
Simplicity design
Simplicity design
Simplicity design
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 2. ความสม่ำเสมอ (Consistency) - สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี * หากลักษณะของเว็บเพจแต่ละหน้าในเว็บไซต์เดียวกัน มีความแตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 3. ความเป็นเอกลักษณ์ (Identity) - การออกแบบต้องคำนึงถึงลักษณะขององค์กร - รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร
Bad Identity
Bad Identity
Good Identity
Good Identity
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 4. เนื้อหาที่มีประโยชน์ (Useful Content) - ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ - ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 5.ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Naviagtion) - ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน - มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ
โครงสร้างเว็บเพจ (Web Page Structure)
Bad Navigation
Bad Navigation
Good Navigation
Good Navigation
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 6. มีลักษณะที่น่าสนใจ (Visual Appeal) - ความน่าสนใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 7. การใช้งานอย่างไม่จำกัด (Compatibility) - ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด - ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้เบราเซอร์ชนิดใดชนิดหนึ่ง - สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา
Web safe area for Screen Resolution 1024 x 768
Other Screen Resolution Web safe area for Other Screen Resolution http://www.designerstoolbox.com/designresources/safearea/compare/ Or searching with keyword : “web safe area”
องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ 8. ระบบการใช้งานที่ถูกต้อง (Functional Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น ควรมีการตรวจสอบการทำงานอยู่เสมอ
9. คุณภาพในการออกแบบ (Design Stability) ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูลให้มีลักษณะเป็นไปในทิศทางเดียวกันทั้งเว็บไซต์ องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์
Web Gallery http://www. dbcut. com http://www. rookienet
Web design and Development Resources www.smashingmagazine.com
ตัวอักษรบนเว็บ Typography on the Web
รูปแบบการใช้งาน heading content list
ควรเลือกใช้รูปแบบตัวอักษร(font)ที่เครื่องคอมพิวเตอร์ทุกเครื่องมีการใช้งาน Web Safe font