ONLINECOURSE.HEADER

Improving UX with Motion

ยกระดับ UX ให้ลื่นไหลด้วย Motion Design

1,990.00
บาท
4.7
4-6 ชั่วโมง
มีความเข้าใจเรื่อง UX ขั้นพื้นฐาน
เรียนจบรับประกาศนียบัตร

SECTION_TITLE.INSTRUCTOR

ธนาภรณ์ กุศลมโนมัย (Co-founder, Hato Chat) | Skooldio Instructor
ธนาภรณ์ กุศลมโนมัย
Co-founder, Hato Chat

SECTION_TITLE.COURSE_OUTLINE

01

Introduction

Welcome to Class

0:56

Getting to Know You

Course Materials

Why Motion ?

6:39

Definition of Motion

1:52

Roles of Motion

1:09

Signifier

9:09

Visual Feedback

10:53

Personality & Emotion

2:59

Recap

0:50

Pillars of Motion

0:38

Having a Purpose

2:06

Keeping Visual Continuity

1:59

Don't be an Obstacle

3:16

Recap

0:36

Delight

1:25

Brain Benefit

12:35

Meaningful

3:34

Tip

3:58

Product Development Workflow

3:17

Ideate & Design

5:31

Trigger

4:00

Property

2:01

Which Properties ?

Duration

5:32

Guess the Duration

Easing

7:18

Which Easing ?

Choreography

3:27

Choreography in Practice

5:46

Choreography Anatomy

3:14

Clarify the Choreography

Design System

7:45

Documenting Motion

6:53

Document Motions [1]

Document Motions [2]

Introduction

4:07

Before We Start

Instructions

Get Started

Frame and Slice

1:59

Component

2:15

Style

2:04

Constrain

2:36

Auto Layout

2:38

Interaction

Connection & Overflow Behavior

2:53

Smart Animate

1:23

After Delay

1:40

LottieFiles

1:54

Prototyping

Workshop

1:27

[Bonus] Adobe After Effects

12:20

Course Summary

1:50

SECTION_TITLE.OVERVIEW

ทำไมเราถึงใช้งานบางแอปฯ ได้อย่างเข้าใจง่ายและคุ้นชินกับฟีเจอร์ต่างๆ ได้อย่างรวดเร็ว แต่กับบางแอปฯ กลับใช้งานยากจนแทบอยากจะเลิกใช้ทันที.. แล้วเราจะออกแบบ UX/UI ให้ผู้ใช้งานสามารถใช้งานได้อย่างเข้าใจง่าย ลื่นไหล และรู้สึกดีเมื่อใช้งาน Product (Web, Mobile App) ของเราได้อย่างไร หนึ่งในเครื่องมือและองค์ความรู้ในการออกแบบที่จะมาช่วยตอบโจทย์ตรงจุดนี้มากๆ นั่นคือ Motion Design

ยกระดับ UX ให้ลื่นไหล ออกแบบ Product ที่ใช้งานง่ายและเป็นที่รักของ User ด้วย Motion Design

Motion หรือ Animation ไม่ได้เป็นเพียงการเพิ่มความสวยงามให้กับ Interface หรือหน้าตาของแอปฯ แต่เป็นส่วนสำคัญของ Interaction ระหว่าง User กับ Interface เพราะ Motion จะช่วยในการสื่อสารให้ User เข้าใจวิธีการใช้งานของ Product และสามารถคุ้นชินกับ Product ของเราได้อย่างรวดเร็ว นอกจากนี้ Motion ยังช่วยสื่อบุคลิกภาพ อารมณ์ความรู้สึกของแบรนด์ ช่วยให้ User มีประสบการณ์และความรู้สึกที่ดีต่อ Product และแบรนด์อีกด้วย

ในคอร์สนี้เราจะพาทุกท่านไปทำความเข้าใจว่า Motion สามารถช่วยในเรื่องการสื่อสารระหว่าง Product กับการทำงานในสมองของ User ได้อย่างไร หลักการออกแบบ UX โดยใช้ Motion เข้ามาช่วยสร้างประสบการณ์ที่ User รู้สึกคุ้นเคยกับ Product ได้อย่างรวดเร็วมีอะไรบ้าง คุณจะได้รู้จักกับส่วนประกอบทั้งหมดของ Motion และวิธีการออกแบบ Motion เพื่อให้สามารถใช้ได้อย่างถูกที่ ถูกเวลา

เข้าใจ Design System และ Motion Design ใน Product Development Workflow

จากนั้นคอร์สนี้จะพาท่านเจาะกระบวนการทำงานว่าขั้นตอนการทำ Motion Design จะเข้าไปอยู่ในส่วนไหนของ Product Development Workflow หรือกระบวนการพัฒนา Product วิธีการเขียน Design System ของ Motion และการทำ Documenting Motion เพื่อบันทึก Motion ที่ออกแบบลงใน Design System ช่วยให้สามารถทำงานร่วมกับสมาชิกคนอื่นๆ ในทีมได้อย่างมีประสิทธิภาพ

ลงมือทำจริง สร้าง Clickable Prototype เท่ๆ ด้วย Figma

ช่วงท้ายของคอร์สเราจะชวนทุกท่านนำความรู้ที่ได้เรียนเกี่ยวกับ Motion มาลงมือทำ Clickable Prototype ด้วย Figma เครื่องมือการออกแบบซึ่งมีจุดเด่นที่สามารถใช้งานบน Web Browser ได้ และเหมาะกับการทำงานร่วมกันเป็นทีม

เมื่อเรียนคอร์สนี้แล้วคุณจะสามารถ..

  • เข้าใจหลักการ และสามารถออกแบบ Motion บน Digital Product (Web, Mobile App) เพื่อพัฒนา User Experience ได้
  • เข้าใจองค์ประกอบของ Motion และสร้าง Motion จากทุกส่วนประกอบได้
  • สร้าง Documentation ของ Motion ใน Design System เพื่อให้ผู้อื่นมาใช้งานต่อได้
  • ส่งต่องาน Motion Design ให้กับทีม Developer ผู้พัฒนา Product หรือ Designer คนอื่นๆ ได้
  • สร้าง Clickable Prototype จาก Figma

คอร์สนี้เหมาะกับใครบ้าง..

  • UX/UI Designer ที่ยังไม่มี Best Practice หรือความเข้าใจในเรื่อง Motion ใน Digital Product
  • Motion Designer/ Graphic Designer ที่สนใจเพิ่มทักษะ UX/UI และอยากเข้าใจ Interaction ระหว่าง Product กับ User ใน Digital Product
  • Front-end Developer ที่สนใจอยากพัฒนา Interaction ระหว่าง Product กับ User
  • Product Developer Team ที่อยากพัฒนา User Experience ของ Digital Product ของตัวเอง

คอร์สนี้อาจไม่เหมาะกับ..

  • Motion designer/ Graphic Designer ที่ทำงานในอุตสาหกรรมสื่อ และไม่ได้มีความสนใจการออกแบบ Interaction ระหว่าง Product กับ User ใน Digital Product

หมายเหตุ: โปรแกรมที่ใช้ภายในคอร์ส Improving UX with Motion คือ โปรแกรม Figma ใน Version June 2021 ซึ่งหน้าตาโปรแกรมหรือหน้าตา UI อาจมีความแตกต่างไปจากเดิมเนื่องจากการพัฒนา Software ของโปรแกรม แต่หลักการใช้งานและ Concept ต่าง ๆ ยังเหมือนเดิม สามารถเรียนรู้ได้จากคอร์ส Improving UX with Motion ได้เลย

สอบถามข้อมูลเพิ่มเติม

Facebook Page Inbox ของ Skooldio

สำหรับท่านที่ต้องการสมัครในนามบริษัท 5 ท่านขึ้นไป ติดต่อรับส่วนลด bulk discount ได้ที่ hello@skooldio.com

SECTION_TITLE.FAQS

Q:

วิธีขอใบเสนอราคาและใบแจ้งหนี้ในนามนิติบุคคล

A:

หากต้องการใบเสนอราคาและใบแจ้งหนี้ในนามนิติบุคคลสามารถส่งรายละเอียดดังนี้

  • คอร์สที่สนใจและจำนวนผู้เรียน
  • ชื่อ-นามสกุล, เบอร์โทรผู้ติดต่อ
  • ชื่อ-ที่อยู่บริษัท, เลขประจำตัวผู้เสียภาษี
  • จำนวนภาษีหัก ณ ที่จ่าย (ถ้ามี)

มาที่ hello@skooldio.com โดยใช้ระยะเวลาดำเนินการไม่เกิน 1 วันทำการ (จันทร์-ศุกร์)

A:

สามารถทำได้ โดยในหน้าคำสั่งซื้อ กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" จากนั้นเลือก "นิติบุคคล/บริษัท" และคำสั่งซื้อจะมีการหักภาษี ณ ที่จ่าย 3% โดยอัตโนมัติ ในกรณีบริษัทของท่านไม่ใช่ 3% กรุณาส่งรายละเอียดที่ต้องการสั่งซื้อมาที่ hello@skooldio.com

A:

กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" ในหน้าชำระเงินและเลือกประเภทบุคคลทั่วไปหรือนิติบุคคล และกรอกรายละเอียด

A:

สำหรับคอร์สที่ซื้อในนามบุคคลทั่วไป คอร์สมีอายุตลอดชีพ สำหรับคอร์สที่ซื้อในนามนิติบุคคล สามารถกลับมาเรียนซ้ำได้ภายใน 1 ปี

A:

หลังจากได้รับใบกำกับภาษีแล้ว หากต้องการแก้ไขข้อมูล สามารถทำได้ภายใน 7 วัน นับจากวันที่ได้รับใบกำกับภาษีแบบเต็มรูปทางอีเมล โดยสามารถแก้ไขข้อมูลได้เฉพาะ ชื่อ-นามสกุล เลขประจำตัวผู้เสียภาษีและที่อยู่เท่านั้น จะไม่สามารถแก้ไขข้อมูลคำสั่งซื้อได้

SECTION_TITLE.RELATED_ONLINE_COURSES