7 วิธีการออกแบบ UI ให้สวยงาม

เพราะปัญหาใหญ่ของโปรแกรมเมอร์ หรืออาชีพอื่นที่ไม่ได้เกี่ยวกับด้าน Designer เมื่อไหร่ที่ทำเว็บไซต์ / App นั่นก็คือ ขาดเซ้นส์ทางด้านดีไซน์ ไม่ว่าจะทำอย่างไรก็ไม่สวย ไม่ถูกใจ เลือกสีไม่ได้ เลือกฟ้อนต์ไม่เป็น เป็นต้น แน่นอนว่าบทความนี้อาจทำให้ดูน่าเบื่อเกินไปสำหรับผู้ที่มีพื้นฐานในการออกแบบหรือเป็น UI (User Interface) Designer แต่บทความนี้นั้นเหมาะมากกับโปรแกรมเมอร์ และ UX Designer ส่วนเนื้อหาจะเป็นอย่างไร สามารถติดตามได้ดังต่อไปนี้

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

เริ่มด้วย ขาว-ดำ เสมอ
การเริ่มต้นออกแบบด้วยสีขาวและดำก่อน จากนั้นค่อยใส่สีเข้าไปทีละนิด วิธีการนี้จะช่วยให้ UI ที่ซับซ้อนออกมาได้ง่ายขึ้น และจะทำให้เราโฟกัสกับเรื่องของการจัดช่องว่าง แะการวาง Layout ก่อนด้วย และปัจจุบัน UX Designer มักจะออกแบบด้วยวิธี Mobile-First โดยออกแบบจากขนาดหน้าจอมือถือ แล้วขยับไปหน้าจอที่ใหญ่ขึ้นเรื่อยๆ เพราะการออกแบบเว็บหรือแอพที่ใช้ได้ง่ายบนหน้าจอเล็ก ๆ นั้นลำบากกว่าการออกแบบให้ใช้ได้ง่ายบนหน้าจอใหญ่

เพิ่ม Whitespace เป็น 2 เท่า 
Whitespace หมายถึงพื้นที่โล่งรอบๆ ทุกจุดในงานดีไซน์ สังเกตได้จาก Web Design สมัยก่อนที่ดูติดกันน่าอึดอัด นั่นเพราะว่าเป็นเทรนด์ในสมัยนั้น แตกต่างจากปัจจุบันที่เว็บไซต์เน้นความเรียบง่าย สบายตา เรื่องของ Whitespace จึงโดดเด่นในยุคสมัยนี้

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

เพิ่ม - ลด ความเด่นของตัวหนังสือ
บางครั้งการเลือกน้ำหนักให้ตัวหนังสืออย่างเหมาะสมนั้นยากกว่าการวางตัวหนังสือลงไปในรูปภาพอีก และวิธีการต่อไปนี้จะช่วยให้ตัวหนังสือของเราเด่นขึ้น
- เปลี่ยนขนาดของตัวหนังสือ
- เปลี่ยนสีตัวหนังสือ
- ปรับตัวหนา-บาง
- ใช้ตัวพิมพ์เล็ก-ใหญ่
- ใช้ตัวเอียง
- เปลี่ยนระยะห่างของตัวหนังสือ (CSS letter-spacing)
- เปลี่ยนระยะห่างของกล่อง (Margin ใน CSS อาจจะไม่เกี่ยวกับตัวหนังสือโดยตรง แต่ก็ทำให้เกิด Whitespace ที่ทำให้ตัวหนังสือดูดีได้)
- การใช้ตัวหนังสือมีหาง (Serif), ไม่มีหาง (Sans-serif) สำหรับภาษาไทยอาจเป็นแบบไม่มีหัว

เลือกใช้ฟ้อนต์ให้เหมาะสม
ฟ้อนต์นั้นเป็นตัวกำหนด Mood & Tone ของงานดีไซน์ที่สำคัญ ความแตกต่างของฟ้อนต์ก็ได้ให้อารมณ์และความรู้สึกที่แตกต่างกันไป หรือถ้าเราอยากทำงานดีไซน์ให้ดู Modern, Clean ก็ต้องเลือกฟ้อนต์ที่ให้สื่อไปในทางเดียวกัน

ขโมยอย่างศิลปิน
คำว่าขโมยอาจจะดูน่ากลัวไปสักหน่อย แต่ในที่นี้หมายถึงว่า ให้ลองศึกษาจากเว็บไซต์อื่นๆ เว็บไซต์ต่างประเทศ และเว็บไซต์ที่แนะนำ คือ Dribbble, Flat UI Pinboard บน Pinterest, และ Pttrns เป็นต้น 

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

ที่มา : designil