ONLINECOURSE.HEADER

Improving UX with Motion

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

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 และ Framer

ช่วงท้ายของคอร์สเราจะชวนทุกท่านนำความรู้ที่ได้เรียนเกี่ยวกับ Motion มาลงมือทำ Clickable Prototype ด้วย Figma เครื่องมือการออกแบบซึ่งมีจุดเด่นที่สามารถใช้งานบน Web Browser ได้ และเหมาะกับการทำงานร่วมกันเป็นทีม และอีกเครื่องมืออย่าง Framer ที่ได้รับความนิยมสูงจากทั้งจาก Designer และ Developer ด้วยจุดเด่นที่สามารถ Custom UI Elements ได้อย่าง Advanced และที่สำคัญคือ Framer นั้นสามารถเขียนโค้ดเพื่อออกแบบ Motion หรือ Animation ของ Component ต่างๆ และดู Preview ได้แบบ Real-Time

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

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

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

  • 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

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

Facebook Page Inbox ของ Skooldio

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

SECTION_TITLE.COURSE_OUTLINE

01

Introduction

Welcome to Class

0:56

Getting to Know You

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

Introduction

1:21

Before We Start

Framer Tour

1:55

Instructions

Import from Figma

1:13

Get Started with Framer

Frame & Screen

0:59

Insert

2:00

Text

1:01

Stack

2:15

Scroll

0:42

Page

1:08

Interaction & Magic

2:14

Graphic Mode

1:44

Input

1:13

Component & Variables

8:54

Figma & Framer Key Functions

Framer Project

Login with a Multifunction Button

8:59

Homepage with Override Animations

12:35

Navigation Bar with a Multistage Component

10:54

Article Cards with Nesting Components

16:34

Packages

Microinteractions with Parallax Effects

6:39

Interaction Between Pages and Handoff

3:29

Bonus Session with Adobe After Effects

12:33

Course Summary

1:52

SECTION_TITLE.INSTRUCTOR

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