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

ความสำคัญและหลักการ ออกแบบเว็บไซต์

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

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

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

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

แนวทางในการออกแบบเว็บไซต์

แนวทางในการออกแบบเว็บไซต์

แนวทางในการออกแบบเว็บไซต์

แนวทางในการออกแบบเว็บไซต์

องค์ประกอบหลักของการออกแบบเว็บไซต์

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

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

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

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

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

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

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

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

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

ตัวอย่างการออกแบบเว็บไซต์ 1

ตัวอย่างการออกแบบเว็บไซต์

ตัวอย่างการออกแบบเว็บไซต์

ตัวอย่างการออกแบบเว็บไซต์

x x – 1024 x

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

กระบวนการและเครื่องมือที่ใช้ในการพัฒนาเว็บไซต์

กระบวนการในการพัฒนาเว็บไซต์  สำรวจปัจจัยสำคัญ (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      

นักพัฒนาเว็บไซต์ควรรู้เครื่องมืออะไรบ้าง

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

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

Q & A