การออกแบบเว็บไซต์ตามมาตรฐาน Refactoring UI

รายละเอียด Course ID: gpc-32

การออกแบบเว็บไซต์ตามมาตรฐาน Refactoring UI

การพัฒนาเว็บไซต์สมัยใหม่ นอกจะเน้นเรื่องความต้องการให้รองรับการแสดงผลบน 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

แนะนำหลักสูตรที่น่าสนใจ

Basic HTML5 and CSS3 (คอร์ส html 5 และ css 3 พื้นฐาน)
ดูข้อมูลเพิ่มเติม
Basic HTML+CSS (คอร์สเขียนเว็บพื้นฐาน)
ดูข้อมูลเพิ่มเติม
Advanced HTML5 and CSS3

Advanced HTML5 and CSS3

หลักสูตรนี้จะเจาะลึกการใช้งาน HTML5 และ CSS3 ในขั้นสูง ผู้เรียนจะต้องมีความเข้าใจในการเ...

ดูข้อมูลเพิ่มเติม
ออกแบบเว็บสมัยใหม่ด้วย Adobe XD ร่วมกับ Bootstrap 5
ดูข้อมูลเพิ่มเติม
HTML 5 CSS 3 and Bootstrap 5

HTML 5 CSS 3 and Bootstrap 5

การพัฒนาเว็บไซต์สมัยใหม่ มีความต้องการให้รองรับการแสดงผลบน Mobile, Tablet และ Desktop ไ...

ดูข้อมูลเพิ่มเติม
Basic Responsive Web Design with Bootstrap 5

Basic Responsive Web Design with Bootstrap 5

การพัฒนาเว็บไซต์สมัยใหม่ มีความต้องการให้รองรับการแสดงผลบน Mobile, Tablet และ Desktop ไ...

ดูข้อมูลเพิ่มเติม

อัพเดทข้อมูลเมื่อ

24/02/2023 15:16:37