Learn UI Design

บทความน่าอ่านสำหรับผู้เริ่มด้าน UI Design (Uesr interface Design)

UI คืออะไร?

• UI designer คืออะไร? ต่างจาก UX designer อย่างไร

เรียนรู้การใช้สี และจิตวิทยาการออกแบบ

• [Color Theory] การเลือกสีของแบรนด์เว็บไซต์ดัง ๆ ทั่วโลก
• [Graphic Design] กราฟฟิกดีไซน์กับจิตวิทยามนุษย์ (part I)
• ทฤษฎีสี HSL ออกแบบเว็บไซต์ UI อย่างมือโปร
• เครื่องมือออนไลน์ช่วยเลือกสีสำหรับ การทำเว็บไซต์
• Tool ช่วยออกแบบสี Leonardocolor

การทำ UI เรียนรู้กันตั้งแต่ออกแบบไปทีละชิ้นส่วน

• เรียนรู้เรื่องของการออกแบบปุ่มและออกแบบชิ้นส่วนใน UI
• 17 UI เทคนิคลับสำหรับออกแบบ Form บนเว็บไซต์
• 7 กฎการออกแบบ UI Design ให้สวยงาม สำหรับ Non-Designer
• 7 กฎการออกแบบ UI Design ให้สวยงาม สำหรับ Non-Designer (ตอน 2)
• 7 สูตรลับ ดีไซน์เว็บแบบ Low Calorie UI ใช้งานยังไงก็ไม่เหนื่อย
• 6 วิธีการออกแบบโลโก้ที่ดี พร้อมตัวอย่างประกอบ
• UI (น่า) ค้นหา ภาคต้น
• UI (น่า) ค้นหา 2 – เรียนรู้ UI Design จากเว็บ E-Commerce ชื่อดัง
• สร้าง UI รักษ์โลก (Environmentally-Friendly UI) ด้วย 5 วิธีสุดแสนง่าย
• Pixel Perfect ออกแบบ UI DESIGN ให้สวยด้วยความแตกต่าง 1 Pixel
• Card Design – User Interface เทรนด์ดีไซน์ใหม่ที่คุณต้องรู้
• 8 วิธีออกแบบ UI ให้รองรับสถานการณ์ที่ไม่คาดคิด (unexpected state)
• แนะนำ 7 วิธีการออกแบบ UI แบบ Dark Theme

Design System ออกแบบให้เป็นระบบ

• Design System คืออะไร? เล่าเคสการทำงานจริงพร้อมตัวอย่างประกอบ
• 5 Tips ข้อควรรู้ก่อนทำ Design system
• [วิดีโอ] สอน Design system จากงาน Invision Design exchange
• ทีมงาน Design system ต้องมีใครบ้าง + แจกหนังสือสอนทำ Design System ฟรี
• วิธีคุมกำเนิดสีด้วย Color System พร้อมรับมือ Design Tokens
• 10 ข้อผิดพลาดในการสร้าง Design system บน Figma
• 10 Figma plugins for Design system

สอนการใช้งาน Figma

• 10 ข้อผิดพลาดในการสร้าง Design system บน Figma
• [วิดีโอ] สรุปงาน Figma Schema 2022 ภาษาไทยเข้าใจง่าย
• 10 Figma plugins for Design system
• สอนใช้ Figma Variants แบบมือโปร
• 10 Figma plugins ฟรี ทำงานเร็วขึ้นทันทีหลังติดตั้ง

เรียนรู้จาก Podcast

• แนะนำ Podcast ชื่อดัง UX UI ไม่ควรพลาด

เลือกโปรแกรมการออกแบบ

• สรุปประจำปี UX UI Tools ที่มาแรงที่สุดประจำปี
• เปรียบเทียบโปรแกรมออกแบบ UI UX: Sketch, Adobe XD, Figma
• Affinity Designer โปรแกรมออกแบบที่เปิดไฟล์ PSD, AI
• Adobe เปิดให้ใช้ Adobe XD ฟรี 100% เว็บและแอพดีไซเนอร์ทุกคนควรลองใช้
• Figma Design Tool for Teamwork สายดีไซน์ต้องลอง!
• โปรแกรม Sketch ออกแบบ UX UI บน Mac ยอดนิยม

คำศัพท์ที่น่าสนใจ

• 20 คำศัพท์เด็ดวงการ UI Design พร้อมความหมายที่ต้องรู้
• ระวัง! Flat Design ทำให้ผู้ใช้สับสนกับเว็บเรามากขึ้นถึง 70% + 5 วิธีแก้ไขง่าย ๆ

Font ในงาน UI

• รวม System Font ฟอนต์ไทยและอังกฤษบน Mac, Windows, iOS, Android

เว็บไซต์เรียนออนไลน์ด้าน UI

• Uxcel เว็บเรียนออนไลน์ด้าน UX UI ที่ปังที่สุด

อ่านบทความ UI ทั้งหมด