Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Adobe XD Masterclass: Learn Web Design UI & UX Design

Adobe XD Masterclass: Thiết kế Web UI & UX chuyên sâu

Adobe XD Masterclass: Thiết kế Web UI & UX chuyên sâu

Khóa học toàn diện về thiết kế web bằng Adobe XD! Bạn sẽ trông như một nhà thiết kế siêu sao, ngay cả khi mới bắt đầu!

4.6
(1,157 đánh giá)
5,930 học viên
Giảng viên
Cristian Barin
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
17.0 giờ video
200 bài giảng
1 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Sử dụng Adobe XD như một chuyên gia
Kỹ thuật thiết kế nâng cao cho dự án hiện đại
Biến thiết kế thành tương tác bằng cách tạo prototype
Mọi điều bạn cần biết về Adobe XD
Cách tạo giao diện UI tuyệt vời và thiết kế trải nghiệm UX xuất sắc

Yêu cầu

Adobe XD (miễn phí)
Windows 10 - Adobe XD không chạy trên Windows 7 hoặc 8

Đối tượng phù hợp

Khóa học này tuyệt vời cho: nhà thiết kế web, thiết kế app và người làm thuyết trình trực quan
Nhà thiết kế muốn cập nhật công cụ thiết kế mới nhất
Nhà thiết kế muốn tạo tác phẩm tương tác
Người muốn tìm hiểu về UI & UX

Nội dung khóa học

17 phần • 197 bài giảng
1 Giới thiệu
2 Cách tận dụng tối đa khóa học này
3 Tải tất cả tài nguyên từ khóa học
4 Làm quen với Adobe XD
5 Tạo thiết kế đầu tiên trong Adobe XD
6 Adobe XD vs Photoshop
7 Cách làm chủ giao diện Adobe XD
8 Cách chọn layer tốt nhất trong XD
9 Bài tập: Thực hành chọn layer
10 Chuyển từ Photoshop/Illustrator sang Adobe XD!
11 Tài liệu đám mây và lưu công việc
12 Những điểm đặc biệt của Adobe XD
13 Tổng kết phần
1 Giới thiệu
2 Làm việc với hình chữ nhật như chuyên gia
3 Cách xử lý hình ảnh tốt nhất
4 Thiết kế bài thuyết trình hiện đại
5 Sử dụng công cụ hình elip, đa giác và đường thẳng
6 Chỉnh sửa hình dạng trong Adobe XD
7 Khám phá công cụ Pen trong XD
8 Tạo hình học
9 Thêm văn bản vào bài thuyết trình
10 Làm việc với màu sắc và gradient
11 Lưới, đường dẫn, smart guides – thiết kế pixel hoàn hảo
12 Tổng quan công cụ căn chỉnh
13 Cách sử dụng công cụ căn chỉnh
14 Tạo bộ ảnh collage
15 Thực hành vui – dùng tất cả công cụ
16 Tổng kết phần
1 Xuất công việc dưới dạng PNG
2 Chia sẻ công việc để nhận phản hồi
3 Tùy chọn – Lưu thuyết trình dạng PDF
4 Chia sẻ công việc với developer
5 Giảm kích thước PNG/JPEG mà không giảm chất lượng
1 Giới thiệu
2 Thiết kế nhanh với repeat grid
3 Thay thế nội dung nhanh chóng
4 Components – tính năng đột phá
5 Thực hành với components
6 Tại sao cần bàn về style guides
7 Nâng tầm sử dụng màu sắc
8 Cách làm việc với character styles
9 Thiết lập bảng assets thực tế
10 Cách thông minh hơn với linked assets
11 Chưa quyết định? Giữ nhiều phiên bản!
12 Làm việc nhóm với nhiều designer CÙNG LÚC
13 Tổng kết phần
1 Giới thiệu dự án thiết kế web đầu tiên
2 Tạo header website
3 Lời khuyên cho icon mạng xã hội hoàn hảo
4 Thiết lập typography
5 Thêm thanh tìm kiếm
6 Danh mục website
7 Xây dựng vùng nội dung bằng repeat grid
8 Phân trang qua XD components
9 Tạo footer
10 Tổng quan trang chủ
11 Tạo trang chi tiết sản phẩm
12 Hoàn thiện trang chi tiết sản phẩm
1 Thiết kế responsive là gì?
2 Thiết kế không cần code: Tại sao và như thế nào?
3 Tạo phiên bản mobile cho trang chủ
4 Điều chỉnh thiết kế cho mobile
5 Chỉnh sửa footer cho mobile
6 Tạo phiên bản mobile cho trang chi tiết sản phẩm
7 Biến thể thiết kế #1 – màu sắc
8 Biến thể thiết kế #2 – typography
9 Biến thể thiết kế #3 – bố cục
10 Điểm quan trọng trong thiết kế của chúng ta
1 Giới thiệu về prototyping
2 Nguyên tắc cơ bản tạo prototype
3 Các loại trigger trong Adobe XD
4 Hiệu ứng chuyển tiếp và easing
5 Auto-animate – tính năng thay đổi cuộc chơi
6 Auto-animate và kéo thả
7 Previous artboard – bắt buộc trong dự án lớn
8 Làm menu và pop up trông thật hơn
9 Nhảy đến phần thiết kế với "Scroll To"
10 Lý do animation không quan trọng như bạn nghĩ
1 Tại sao nên tạo animation cho thiết kế
2 Nên và không nên animate cái gì
3 Tạo trạng thái hover cho mạng xã hội & menu chính
4 Prototyping ô tìm kiếm – hover, down state + drop-down
5 Tạo hover state cho repeat grid
6 Thiết lập phân trang và footer
7 Thay đổi bố cục nhanh với stacks
8 Bổ sung: Làm navigation hoạt động
1 Trụ cột đầu tiên của thiết kế web
2 Cài đặt tốt nhất cho dự án thiết kế web
3 Case study: Bố cục không chuẩn
4 Bài tập: Tạo bố cục website chuẩn
5 Cách căn chỉnh kích thước phần tử web chính xác
6 Công thức cho văn bản hoàn hảo
7 Case study: Lớp văn bản
8 Độ tương phản màu
9 Case study: Màu sắc – Phần 1
10 Case study: Màu sắc – Phần 2
11 Căn chỉnh phần tử trong hero area
12 3 quy tắc cho icon thiết kế web
13 Case Study: Cân bằng trực quan
14 Suy nghĩ về trụ cột đầu tiên
1 Giới thiệu
2 Mục đích website là gì?
3 Người dùng vs Chủ doanh nghiệp
4 Analytics trong thiết kế web
5 Template & Website Builders – Kết thúc của designer?
6 Case Study: 4 phiên bản cùng một website
7 Bố cục trang chủ thương mại điện tử
8 Trang chi tiết sản phẩm thương mại điện tử
9 Thanh toán thương mại điện tử
10 Tại sao website không pixel perfect?
11 Landing page vs Website
12 Case study: Nhu cầu khách hàng
13 Thu thập lead trong landing page
14 Tại sao landing page bị mang tiếng xấu
15 Landing page sản phẩm số
16 A/B testing landing pages
17 Case Study: Phân tích landing page
18 Kết luận về nhu cầu khách hàng
1 Giới thiệu
2 UX là gì?
3 Cải thiện quy trình thanh toán để tăng doanh số gấp đôi
4 Cải thiện phiên bản mobile để tăng doanh số gấp đôi
5 7 điều chỉnh website thể hiện sự tỉ mỉ
6 Nâng cấp trang sản phẩm mobile
7 Làm việc 1-1 với lập trình viên
8 UX tồi tốn kém thế nào
9 Ví dụ xuất sắc về UX tốt và sự tỉ mỉ
10 Case study UX – biểu mẫu
11 Case study UX – icon
12 Case study UX – hành động mơ hồ
13 Case study UX – hệ thống phân cấp
14 Case study UX – nội dung giả
15 Case study UX – nút bấm
1 Tải tất cả tài nguyên tại đây
2 Câu hỏi quan trọng nhất khi bắt đầu dự án mới
3 Cách nghiên cứu/tìm cảm hứng cho dự án
4 Thiết lập phần quan trọng nhất của bố cục
5 Tạo top bar
6 Cách chọn font cho dự án
7 Cách chọn màu sắc đẹp
8 Sắp xếp top bar
9 Tạo cấu trúc header
10 Đặt phong cách cho header
11 Tỉ mỉ trong header
12 Xây dựng hero area tuyệt vời
13 Thiết kế lại menu danh mục
14 Cách hiển thị chi tiết sản phẩm trong lưới
15 Cách tìm bố cục tốt nhất cho lưới sản phẩm
16 Tạo phiên bản đầu tiên của thẻ sản phẩm
17 Phiên bản thứ hai của thẻ sản phẩm
18 Phiên bản thứ ba của thẻ sản phẩm
19 Cách thiết kế phần FAQ sạch sẽ và hiện đại
20 Tạo biểu mẫu đăng ký nhận bản tin
21 Cách thiết kế footer đẹp
22 Biến thể cuối và suy nghĩ về trang chủ
23 TẢI DỰ ÁN HOÀN CHỈNH TẠI ĐÂY
1 Phân tích cách cải thiện trang sản phẩm
2 Thiết lập bố cục phần trên trang sản phẩm
3 Cách tổ chức nhiều thông tin trong trang sản phẩm
4 Cách thêm chi tiết nhỏ tạo khác biệt lớn
5 Cách xử lý lượng văn bản lớn
6 Tạo sidebar
1 Giới thiệu phiên bản mobile
2 Cách bắt đầu phiên bản mobile cho trang chủ
3 Cách điều chỉnh top bar cho mobile
4 Cách tạo header cho phiên bản mobile
5 Chỉnh sửa hero area & danh mục cho mobile
6 Cải thiện navigation cho trải nghiệm mobile
7 Tạo lưới sản phẩm phù hợp mobile
8 Hoàn thiện lưới sản phẩm – phiên bản mobile
9 Làm văn bản dễ đọc trong phần FAQ
10 Cách điều chỉnh biểu mẫu bản tin cho mobile
11 Thiết kế bố cục mới cho phần chân trang
12 Kết luận: phiên bản di động của trang thương mại điện tử
1 Phiên bản di động cho trang sản phẩm
2 Xây dựng cấu trúc di động cho trang sản phẩm
3 Cách định kiểu các mục theo mức độ quan trọng
4 Tạo biến thể để cải thiện doanh số
5 10% công sức thêm cho kết quả tốt hơn 50%
6 Tạo một bố cục khác cho trang sản phẩm
7 Xây dựng cấu trúc thông minh hơn cho phiên bản di động
8 Tạo các tab đánh giá và thông tin dinh dưỡng
9 Thêm những chi tiết nhỏ nhưng quan trọng
10 Kiểm tra thiết kế trên điện thoại thực tế
11 Tạo nhiều biến thể ấn tượng trong thời gian ngắn
1 Chuẩn bị thiết kế để code
2 Cách cung cấp cho lập trình viên những gì họ cần từ Adobe XD
3 Cách chuẩn bị đồ họa cho việc lập trình
4 Nội dung phía máy chủ và đồ họa nhiều lớp
5 Bắt đầu sử dụng Zeplin
6 Cách tốt nhất để xử lý tài nguyên cho lập trình viên
7 Lý do việc cung cấp đúng yêu cầu là cực kỳ quan trọng
8 Cách lập trình viên nhìn nhận dự án
1 Điều cần làm trước khi bắt đầu làm freelancer
2 Gợi ý cho các bước tiếp theo của bạn
3 Bài giảng bổ sung

Giới thiệu khóa học

Adobe XD is the next big thing in the design industry! Learn how to use it to create better designs, impress your work colleagues or your boss, start a new business, or charge more for your freelancing projects.

Note: Adobe XD doesn't work on Windows 7 or 8!

This training is perfect for people of all levels. It doesn't matter if you're a long-time Photoshop user, an Illustrator enthusiast or you're just getting started. Adobe XD will make you a better UI & UX designer. Here's what you'll learn:

  • The fundamentals of Adobe XD - how to get up and running with it;

  • How to use Adobe XD's advanced features;

  • Design beautiful UI (user interface) projects: websites, mobile apps, presentations of all sorts;

  • Learn how to apply UX (user experience) principles without getting overwhelmed by loads of theory;

  • Create interactive prototypes that will impress clients;

  • Help your clients make more money by making key design changes to their websites;

Who is this training program for?

  • Anybody that wants to learn about the next big thing in the design world;

  • People who are not happy with Photoshop's performance - it's so slow sometimes!

  • Web designers who want to make more money from their projects;

  • People who need to create sleek and professional presentations (forget PowerPoint!);

  • App designers who want to quickly create iOS or Android apps;

  • Developers who want a better handover process from designers;

  • Project managers that need interactive prototypes done fast;

If you don't have a lot of time to learn about various design programs, then this is the best course for you! Adobe XD is easy to learn and you'll see how through fun exercises and activities, you'll become proficient in no time at all!

"Get great results as fast as possible!" - that's how I've created this course. We don't waste time with boring theory. We start with the absolute basics and we work our way up, gradually, step by step. This is beginner friendly, but in the later sections advanced users will have a lot to learn too!

Important Features Included:

  • Course workbooks (cheat sheets): use them to get up and running fast. They contain answers to most questions, detailed explanations about certain techniques shown in the videos, and much more;

  • Live chat: my students frequently find me on our Discord group chat. This is a free program where you can chat with my fantastic community of students, ask questions, and get help fast. I'm regularly on there!

  • All the sources files are included (.xd files): this means you can easily work along and pick things up at any point

  • Facebook group: get access to a private group of over 7000 people who regularly share their designs, insights, and comments.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Adobe Xd
Hiển thị tất cả khoá học Prototyping
Hiển thị tất cả khoá học Ui Ux Design
Hiển thị tất cả khoá học Web Design
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊