ออกแบบและพัฒนาหน้าเว็บ
หน้าเว็บเป็นหน้าแรกเป็นส่วนที่สำคัญมากเพราะมีหน้าที่เป็นสื่อกลางของผู้ใช้เข้าถึงระบบงานของเว็บ
หลักการสำคัญ
คือการใช้รูปภาพและองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะหน้าตาของเว็บให้น่าสนใจ
แนวคิด
· เรียนรู้จากเว็บไซด์อื่นๆ
· ประยุกต์จากสิ่งพิมพ์
· ใช้แบบจำลองเปรียบเทียบ
· ออกแบบอย่างสร้างสรรค์
หลักการออกแบบ
· สร้างลำดับชั้นความสำคัญขององค์ประกอบ
แสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับควรจัดวางสิ่งสำคัญไว้ส่วนบนหรือด้านซ้ายเพื่อให้มองเห็นสะดวก
· สร้างรูปแบบ บุคลิก และสไตล์
เลือกรูปแบบที่เหมะสมจะช่วยให้สร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
· สร้างความสม่ำเสมอตลอดทั้งเว็บไซด์
จะช่วยทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บล่วงหน้าได้เราสามารถใช้เทคนิคทาง CSS ได้
· การวางองค์ประกอบสำคัญไว้ส่วนบนของหน้าเสมอ
ชื่อเว็บ,ชื่อหัวเรื่อง,สิ่งสำคัญที่เราจะโปรโมท,ระบบเนวิเกชัน
· สร้างจุดสนใจด้วยความแตกต่าง
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บได้
· จัดแต่งหน้าเว็บให้เป็นระเบียบ
ควรแยกเป็นสัดส่วนไม่แน่นจนเกินไป ดูเรียบร้อย
· ใช้กราฟิกอย่างเหมาะสม
ควรใช้กราฟิกที่เป็นไอคอนเพื่อลดความยุ่งเหยิงไม่เป็นระเบียบ
เลือกใช้สีสำหรับเว็บไซต์
การเลือกใช้สีเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เพราะอย่างแรกที่ผู้ใช้มองเห็นคือสี ของเว็บไซด์
ประโยชน์ของสีในเว็บไซต์
· สามารถชักนำสายตาอ่านในไปยังข้อมูลได้
· สามารถเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
· สามารถแยกส่วนต่างๆออกจากกันได้ง่าย
· สามารถดึงดูดความสนใจของผู้อ่าน ช่วยสร้างระเบียบให้คับข้อความต่างๆ
การผสมสี(Color Mixing)
มี 2แบบ
มี 2แบบ
o การผสมแบบบวก เป็นการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ นำไปใช้กับ จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
o การผสมแบบลบ เป็นการผสมไม่เกี่ยวกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ การนำไปใช้งาน ภาพวาดของศิลปิน
รูปแบบชุดสีสามารถจัดเป็นกลุ่มง่ายดังนี้
o ชุดสีร้อน
ประกอบไปด้วยสีม่วงแกมแดง แดงแกมม่วง แดง ส้ม เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความอบอุ่น สบาย
o ชุดสีเย็น
ประกอบด้วยสีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินแกมเขียว และสีเขียว ชุดสีเย็นให้ความรู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย
o ชุดสีแบบเดียว
เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่งเพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่างๆ ชุดสีนี้จะค่อนข้างมีความกลมกลืนเห็นหนึ่งเดียว
o ชุดสีแบบสามเส้า
เป็นชุดสีที่อยู่มีมุมของสามเหลี่ยมด่านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
o ชุดสีที่คล้ายคลึงกัน
ประกอบด้วยสี 2 หรือ 3สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ5 สีก็ได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
o ชุดสีตรงข้าม
คือสีคู่ที่อยู่ตรงข้ามกันในวงล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างสดใส
o ชุดสีตรงข้ามข้างเคียง เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มีความสดใส สะดุดตา และเข้ากันของสีลดลงด้วย
o ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
ดัดแปลงมาจากชุดสีตรงข้างเช่นกัน แต่สีตรงข้างทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน จะมีความสดใส แต่ความกลมกลืนของสีลดลง
ออกแบบกราฟิกสำหรับเว็บ
กราฟิกเป็นองค์ประกอบสำคัญอย่างหนึ่งของเว็บช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้รวมถึงความสวยงามด้วย
ปัญหาที่มักเกิดขึ้นกับการฟิกคือ การเลือกใช้รูปแบบกราฟิกที่ไม่เหมาะสมกับลักษณะของรูปโดยไม่รู้จักความแตกต่างของรูปแบบกราฟิก
รูปแบบกราฟิกสำหรับเว็บ
· GIF ย่อมาจาก Graphic Interchange Format
o ได้รับความนิยมในยุคแรก
o มีระบบสีขนาด 8 บิตมีสีมากสุด 256 สี
o มีการบีบอัดข้อมูลตามแนวของพิกเซล
· JPG ย่อมาจาก Joint Photographic Experts Group
o มีข้อมูลสีขนาด 24 บิตแสดงสีได้ถึง 16.7 ล้านสี
o ใช้ระบบบีบอัดที่มีลักษณะที่สูญเสีย
o ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่าย
· PGN ย่อมาจาก Portable Network Graphic
o สนับสนุนระบบสีได้ 8 บิต 16 บิต 24 บิต
o มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย
o มีระบบควบคุมค่าแกมม่า ความโปร่งใส
โปรแกรมกราฟิกสำหรับเว็บ
· AdobePhotoshop
· AdobeImageReady
· Firework
คำแนะนำในการออกแบบกราฟิก
· ใช้ชุดสีสำหรับเว็บ
· ใช้รูปแบบกราฟิกที่เหมาะสม
· ตัดแบ่งออกเป็นส่วนย่อย
