UI Design
Last updated
Was this helpful?
Last updated
Was this helpful?
ออกแบบเป็นสีขาว-ดำก่อนเพื่อเป็นการจัดวาง UI Element ต่าง ๆ ให้เข้าที่ และคิดวิธีที่ให้ตัวเว็บไซต์ออกมาสวยและใช้งานง่าย หลังจากนั้นค่อยใส่สีไปทีละนิด และทุกสีที่เราใส่เข้าไปต้องมีจุดประสงค์ในการใส่ แต่การ Design แบบนี้จะไม่ค่อยเป็นที่นิยมสำหรับการ Design ที่ต้องการความฉูดฉาดหรือการ์ตูน
รูปพื้นหลังต้องสีเข้ม และมีจุดสีที่ตัดกันไม่เยอะ
ตัวหนังสือต้องสีขาว เพื่อให้ตัดกับภาพพื้นหลังได้ชัดเจน
ต้องลองทดสอบทุกขนาดหน้าจอว่าถ้าเราย่อ-ขยายหน้าจอแล้วจะมีหน้าจอไหนที่ตัวอักษรไม่แสดงหรือไม่
วางพื้นฐานการออกแบบของปุ่มให้ดี
ทำปุ่มเวอร์ชันสลับสีเตรียมไว้ด้วย สำหรับใช้กับพื้นหลังหลายแบบ
ปุ่มหลัก 1 ปุ่มต่อ 1 หน้า
ออกแบบปุ่มไว้รองรับหลาย State ด้วย
ออกแบบให้ยืดหยุ่นสำหรับการใส่รายละเอียดในปุ่ม
ระวังอย่าให้ปุ่มรองสีเด่นไป หรือไม่เด่นจนเหมือนกดไม่ได้
หลีกเลี่ยงการใช้ปุ่มแบบ Ghost Button
ออกแบบปุ่มเตรียมไว้ให้ครบทุกขนาด
แยกการออกแบบปุ่มกับลิงก์ให้ชัดเจน
ลองจัดวางปุ่มไว้ในดีไซน์หลาย ๆ แบบ
เปลี่ยนขนาดตัวหนังสือ (ไม่ควรเล็กกว่า 6 Points)
เปลี่ยนสีตัวหนังสือ
ปรับตัวอักษรหนา-บาง
ใช้ตัวอักษรพิมพ์เล็ก-พิมพ์ใหญ่
ใช้ตัวเอียง
เปลี่ยนระยะห่างตัวหนังสือ (หรือ CSS letter-spacing นั่นเอง)
ฟอนต์เป็นตัวกำหนด Mood & Tone ของงานดีไซน์ที่สำคัญมาก ฟอนต์แต่ละแบบจะให้ความรู้สึกที่แตกต่างกันไป
ก่อนที่จะเริ่มใส่สีในเว็บไซต์เราควรมีการกำหนด ชุดสีที่เราต้องการไว้เพื่อไม่ให้ตัวเว็บไซต์ของเราไม่หลุดธีมและช่วยให้การทำงานเป็นธีมมีความเข้าใจกันมากขึ้น
– เทคนิคการใช้สีที่บอกว่า สีดำเข้ม 100% ไม่ควรถูกใช้ในงานออกแบบ และเราควรใช้สีเทาเฉดไหนในการทำให้ออกแบบมามีน้ำหนักและดูดี
– เครื่องมือสำหรับหา Palette สีสวย ๆ หรือสร้าง Palette สีใหม่ (มีแอพมือถือที่เอารูปในมือถือเรามาสร้าง Palette สีได้ด้วย)
– เว็บไซต์รวม Palette สีสวย ๆ และสร้าง Palette สีใหม่ได้ง่าย แชร์ให้เพื่อนก็ได้ เหมาะกับคนที่ต้องการศึกษาเรื่องสีสุด ๆ
– เว็บไซต์รวมงานออกแบบสวย ๆ ชื่อดัง ซึ่งอยู่ในลิสต์ ด้วย โดยเราสามารถค้นหางานตามสีที่ต้องการได้ เพื่อดูว่าดีไซเนอร์คนอื่น ๆ ใช้สีนี้คู่กับสีอะไรกันบ้าง
