UI Design

UI Design เทคนิคการออกแบบ

🖍 การออกแบบ Website ควรเริ่มต้นด้วยโทน ขาว-ดำ เสมอ

ออกแบบเป็นสีขาว-ดำก่อนเพื่อเป็นการจัดวาง UI Element ต่าง ๆ ให้เข้าที่ และคิดวิธีที่ให้ตัวเว็บไซต์ออกมาสวยและใช้งานง่าย หลังจากนั้นค่อยใส่สีไปทีละนิด และทุกสีที่เราใส่เข้าไปต้องมีจุดประสงค์ในการใส่ แต่การ Design แบบนี้จะไม่ค่อยเป็นที่นิยมสำหรับการ Design ที่ต้องการความฉูดฉาดหรือการ์ตูน

🖍 เทคนิคการวางตัวอักษรบนรูป

1. รูปพื้นหลังต้องสีเข้ม และมีจุดสีที่ตัดกันไม่เยอะ

2. ตัวหนังสือต้องสีขาว เพื่อให้ตัดกับภาพพื้นหลังได้ชัดเจน

3. ต้องลองทดสอบทุกขนาดหน้าจอว่าถ้าเราย่อ-ขยายหน้าจอแล้วจะมีหน้าจอไหนที่ตัวอักษรไม่แสดงหรือไม่

🖍 เทคนิคการออกแบบปุ่มสำหรับ UI Design

• วางพื้นฐานการออกแบบของปุ่มให้ดี

• ทำปุ่มเวอร์ชันสลับสีเตรียมไว้ด้วย สำหรับใช้กับพื้นหลังหลายแบบ

• ปุ่มหลัก 1 ปุ่มต่อ 1 หน้า

• ออกแบบปุ่มไว้รองรับหลาย State ด้วย

• ออกแบบให้ยืดหยุ่นสำหรับการใส่รายละเอียดในปุ่ม

• ระวังอย่าให้ปุ่มรองสีเด่นไป หรือไม่เด่นจนเหมือนกดไม่ได้

• หลีกเลี่ยงการใช้ปุ่มแบบ Ghost Button

Ghost Button คือปุ่มที่ไม่มีสีพื้นหลัง มีแต่เส้นขอบกับตัวหนังสือ

• ออกแบบปุ่มเตรียมไว้ให้ครบทุกขนาด

• แยกการออกแบบปุ่มกับลิงก์ให้ชัดเจน

• ลองจัดวางปุ่มไว้ในดีไซน์หลาย ๆ แบบ

🖍 ปุ่ม Pop-up Menu ที่แนะนำ

🖍 การเพิ่ม-ลด ความเด่นของตัวหนังสือ

• เปลี่ยนขนาดตัวหนังสือ (ไม่ควรเล็กกว่า 6 Points)

• เปลี่ยนสีตัวหนังสือ

• ปรับตัวอักษรหนา-บาง

• ใช้ตัวอักษรพิมพ์เล็ก-พิมพ์ใหญ่

• ใช้ตัวเอียง

• เปลี่ยนระยะห่างตัวหนังสือ (หรือ CSS letter-spacing นั่นเอง)

🖍 เลือกใช้ Fonts ให้เหมาะสมกับงาน

ฟอนต์เป็นตัวกำหนด Mood & Tone ของงานดีไซน์ที่สำคัญมาก ฟอนต์แต่ละแบบจะให้ความรู้สึกที่แตกต่างกันไป

🖍 Theme Color

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

เครื่องมือแนะนำที่จะช่วยให้น้องๆเลือกสีได้ง่ายขึ้น

• Never Use Black – เทคนิคการใช้สีที่บอกว่า สีดำเข้ม 100% ไม่ควรถูกใช้ในงานออกแบบ และเราควรใช้สีเทาเฉดไหนในการทำให้ออกแบบมามีน้ำหนักและดูดี

• Adobe Color CC – เครื่องมือสำหรับหา Palette สีสวย ๆ หรือสร้าง Palette สีใหม่ (มีแอพมือถือที่เอารูปในมือถือเรามาสร้าง Palette สีได้ด้วย)

• Colour Lovers – เว็บไซต์รวม Palette สีสวย ๆ และสร้าง Palette สีใหม่ได้ง่าย แชร์ให้เพื่อนก็ได้ เหมาะกับคนที่ต้องการศึกษาเรื่องสีสุด ๆ

• Dribbble search-by-color – เว็บไซต์รวมงานออกแบบสวย ๆ ชื่อดัง ซึ่งอยู่ในลิสต์ 5 เว็บไซต์หา Inspiration ที่ Web Designer เก่ง ๆ เข้าทุกวันด้วย โดยเราสามารถค้นหางานตามสีที่ต้องการได้ เพื่อดูว่าดีไซเนอร์คนอื่น ๆ ใช้สีนี้คู่กับสีอะไรกันบ้าง