เทคนิคการออกแบบ ไอคอน บนเว็บไซต์
หลังจาก “คลุกวงใน” อยู่กับการออกแบบเว็บไซต์มาหลายปีในประเทศไอซ์แลนด์ ดิฉันพบว่าหนี่งในองค์ประกอบที่น่าสนใจของ “เว็บไซต์” คือ การออกแบบไอคอน (Icon design) ไอคอนที่ว่านี้คือภาพกราฟฟิกเล็กๆ ที่เป็นสัญลักษณ์แทนข้อมูลหรือบริการต่างๆ เพื่อจะสื่อให้ผู้ใช้เว็บ “เข้าถึง” และ “จดจำได้ง่าย” (ด้วยการใช้ภาพแทนตัวอักษร) ภาพ “เล็กๆ” ที่ดูเหมือน “ง่ายๆ” เหล่านี้แท้จริงต้องผ่านกระบวนการออกแบบที่ “ไม่ได้เล็ก” และ “ไม่ได้ง่าย” อย่างที่คิด มันเป็นศาสตร์การออกแบบอีกศาสตร์หนึ่งเลยทีเดียว
มีบทความดีๆ จากเว็บไซต์ต่างประเทศมากมายเกี่ยวกับการออกแบบไอคอน
แต่ที่ดิฉันอยากจะเล่าถึงในครั้งนี้เป็นข้อมูลที่ได้รวบรัดมาจากประสบการณ์ ตรงโดยเฉพาะ หลักการง่ายๆ ของการออกแบบไอคอนที่ต้องจับให้แม่น มีดังต่อไปนี้
1. จับโจทย์ให้ได้ก่อนว่าเขาต้องการให้เราสื่ออะไร จากนั้นก็ทำรูปแบบให้ชัดเจนตรงประเด็น
2. ออกแบบให้เรียบง่ายที่สุด เพราะการที่เราใส่รายละเอียดในภาพเยอะจะทำให้กวนตา และยากต่อการจดจำ
3. สี เฉดสี แสงเงา และขนาดของเส้นกราฟฟิก ควรมีขนาดที่เหมาะสม ตรงนี้ดีไซเนอร์ต้องขยันเช็คย่องานดู ส่วนมากงานไอคอนที่ปรากฏบนหน้าเว็บไซต์จะมีขนาดเล็ก ฉะนั้นงานที่เราออกแบบในขนาดปกติ 500 พิกเซล เมื่อถูกย่อเป็นขนาด 15 พิกเซลบนหน้าเว็บแล้ว มันควรจะต้องดูดีอยู่ เช่น ไม่เบลอ เส้นไม่หนาจนดูตัน หรือไม่บางจนเกินไป (ในการออกแบบไอคอนเพื่อใช้งานจริงบนเว็บ จุดนี้ถือเป็นเรื่องที่สำคัญมาก)
4. ถ้าต้องการออกแบบไอคอนให้เป็นเซ็ต (Set) เพื่อใช้ในงานเดียวกัน ดีไซเนอร์ต้องคำถึง “รูปแบบ” ที่สอดคล้องกันด้วย (Consistency) ไม่ว่าจะเป็นเรื่องสี เส้น หรือมุมมอง (Perspective)
5. ภาพเล็กๆ ภาพเดียวอาจแทนคำพูดได้มากมาย ฉะนั้นดีไซเนอร์ควรคิดอย่างรอบคอบ เพื่อให้การออกแบบของเรามีความหมายแทนคำพูดได้หลายคำหรือหลายประโยคจริงๆ ดิฉันขอนำเสนอตัวอย่างการออกแบบไอคอนที่มีประสิทธิภาพในเชิงการสื่อสารดัง ต่อไปนี้ หวังว่าคงดูสนุกและเป็นประโยชน์ไม่มากก็น้อย
แก้ไขครั้งที่ 1 เมื่อ 28 กันยายน 2555 / 09:57
แสดงความคิดเห็น