การพัฒนาเว็บไซต์สมัยใหม่ นอกจะเน้นเรื่องความต้องการให้รองรับการแสดงผลบน Mobile, Tablet และ Desktop แล้ว ในส่วนของการสามารถออกแบบและปรับแต่ง UI ให้สวยงาม ดูง่าย ก็เป็นอีก 1 จุดสำคัญที่ควรใส่ใจเช่นกันในการออกแบบและพัฒนา interface ต่างๆ

มีอีกศาสตร์ที่น่าสนใจไม่น้อยสำหรับการออกแบบ user interfaces หรือ UI คือ การจัดองค์ประกอบใหม่ ใช้ในการปรับปรุงการ design โดยไม่ต้องอาศัยความสามารถทางศิลปะใดๆ และสามารถปรับเปลี่ยนโดยไม่ต้องเปลี่ยนผลลัพธ์ของโค้ด

หลักสูตรนี้ผู้เข้าอบรมจะได้เรียนรู้วิธีออกแบบ UI ที่สวยงามด้วยตัวคุณเอง โดยใช้เทคนิคเฉพาะจากมุมมองของนักพัฒนา

สาขากรุงเทพฯ (ลาดพร้าว)
  • ยังไม่มีรอบเปิดอบรม (ลงชื่อจองไว้ได้)
  • มีความรู้ความเข้าใจเกี่ยวกับการออกแบบ UI  โดยใช้มาตรฐาน Refactoring UI
  • นักเรียนนักศึกษา
  • นักวิชาการ นักไอที หรือผู้ดูและระบบ
  • ผู้ที่พัฒนาเว็บไซต์ด้วยตนเอง
  • UX/UI Designer
  • มีความรู้พื้นฐานการในการออกแบบเว็บไซต์มาบ้าง
  • มี Basic HTML+CSS มาบ้าง
  • 12 ชั่วโมง
  • ราคาปกติ 6,500 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 5,850 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

Module 1: บทนำ

  • เข้าใจโครงสร้างการพัฒนาเว็บไซต์
  • แนะนำแนวทางการพัฒนาเว็บไซต์สมัยใหม่
  • ความหมายของ Refactoring UI

Module 2: การเตรียมความพร้อมและติดตั้งเครื่องมือ

  • ติดตั้งเครื่องมือสำหรับพัฒนาบนระบบปฏิบัติการ Windows และ Mac
  • ปรับแต่งเครื่องมือให้พร้อมกับการพัฒนาเว็บแอพพลิเคชั่น

Module 3: พื้นฐานภาษา HTML

  • Introduction to HTML
  • Terminology and HTML
  • Common HTML Text Tags
  • Demonstration : HTML Text Tags
  • Common HTML Media Tags
  • Demonstrating : Media Tags
  • HTML Attributes
  • Demonstration : HTML Attributes

Module 4: พื้นฐานภาษา CSS

  • CSS Basics
  • Linking HTML to CSS
  • Demonstration : CSS and Linking to HTML
  • Different CSS Selectors
  • Demonstration : CSS Selectors
  • CSS Knowledge

Module 5: Layout and Spacing

  • Start with Refactoring UI
  • Establish a spacing
  • Display aspect ratio
  • Grid
  • Relative scale
  • Ambiguous spacing

Module 6: Designing Text

  • Establish a type scale
  • Fonts
  • Length
  • Center
  • Proportional
  • Color link
  • Letter-spacing

Module 7: Working with Color

  • HEX for HSL
  • Colors
  • Shades
  • Lightness
  • Greys scale
  • Accessible

Module 8: Creating Depth

  • Light source
  • Shadows
  • Depth designs

Module 9: Working with Images

  • Photos
  • Contrast
  • Intended size
  • Protect content

Module 10: Finish up

  • Defaults
  • Color with accent borders
  • Backgrounds
  • Empty states
30/11/2024 02:14:59