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.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

Project Overview

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.FAQS

Q:
ขอใบเสนอราคา/ใบแจ้งหนี้/ใบกำกับภาษีในนามองค์กรได้หรือไม่
A:

สามารถขอได้ค่ะ

  1. การสมัครคอร์สเรียนออนไลน์ในนามบริษัทสามารถส่งรายละเอียดดังต่อไปนี้ ไปที่อีเมล hello@skooldio.com ได้เลยค่ะ
  • คอร์สที่สนใจ/จำนวนผู้เรียน
  • ชื่อ-นามสกุล เบอร์โทรผู้ติดต่อ -ชื่อ, ที่อยู่บริษัท/เลขประจำตัวผู้เสียภาษี
  • จำนวนภาษีหัก ณ ที่จ่าย (ถ้ามี)
  1. หากต้องการสมัครทันที (สมัครได้ทีละ 1 คน) สามารถกดซื้อได้จากหน้าเว็บ www.skooldio.com ได้เลยค่ะ

ท่านสามารถออกใบกำกับภาษีเต็มรูปแบบผ่านโดยการเลือกชำระเงินช่อง "นิติบุคคล" และคำสั่งซื้อจะมีการหักภาษี ณ ที่จ่าย 3% โดยอัตโนมัติ (หากไม่ใช่ 3% กรุณาทำตามข้อ 1 ได้เลยค่ะ)

  • โดยฝ่ายบัญชีของ Skooldio จะทำการติดต่อกลับไปหาท่านอีกครั้งเมื่อการสั่งซื้อสำเร็จและส่งให้องค์กรของท่านตามที่อยู่บริษัท
  • โดยองค์กรของท่านต้องส่งหนักสือรับรองการหักภาษี ณ ที่จ่าย กลับมาที่ฝ่ายบัญชีเราที่ accounting@skooldio.com
A:

ได้ค่ะ สำหรับบุคคลทั่วไป หากท่านซื้อผ่านหน้าเว็บ www.skooldio.com ท่านสามารถส่งรายละเอียดดังต่อไปนี้ไปที่ accounting@skooldio.com

  • ชื่อ-นามสกุลผู้สั่งซื้อ
  • ที่อยู่ปัจจุบัน
  • หมายเลขประจำตัวประชาชน
  • หมายเลขคำสั่งซื้อ (เช่น AB12B3)

โดยจะเราจะส่งให้ท่านทางอีเมล และนำส่งตัวจริงตามไปในภายหลังค่ะ

A:

สามารถเรียนซ้ำได้ค่ะ

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

SECTION_TITLE.RELATED_ONLINE_COURSES