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

Web Design in Figma | Advanced Level | Eng

Thiết kế Web bằng Figma | Trình độ Nâng cao | Tiếng Anh

Thiết kế Web bằng Figma | Trình độ Nâng cao | Tiếng Anh

Làm chủ các nguyên tắc thiết kế web hiện đại và tạo layout chuyên nghiệp trong Figma.

4.8
(71 đánh giá)
510 học viên
Giảng viên
Dmitrii Fokeev
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
12.5 giờ video
108 bài giảng
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ì

Học cách tạo layout website hiện đại và phong cách
Tìm hiểu mười nguyên tắc thiết kế web hiện đại
Học cách áp dụng các nguyên tắc thiết kế web vào thực tế qua các bài tập thực tế
Học cách xây dựng lưới và đường gióng để cấu trúc layout
Học cách thiết lập khoảng cách, nhịp điệu và trật tự thị giác trong layout
Tìm hiểu các phương pháp làm việc với typography
Tìm hiểu các quy tắc bố cục trong thiết kế web
Học cách tạo bố cục sạch sẽ và theo module
Tìm hiểu các phương pháp làm việc với màu sắc: bảng màu, độ tương phản, điểm nhấn
Học cách sử dụng đổ bóng, bo góc và hiệu ứng một cách chính xác và chuyên nghiệp
Tìm hiểu các quy tắc về thiết kế nhất quán
Học cách phân tích thiết kế một cách logic và phát hiện lỗi
Học cách phát triển gu thẩm mỹ và làm việc với tài liệu tham khảo
Học cách tạo ý tưởng website độc đáo từ đầu
Học cách sử dụng công cụ AI như Midjourney và Adobe Firefly trong thiết kế web
Tạo 2 dự án cho portfolio của bạn

Yêu cầu

Yêu cầu kiến thức cơ bản về Figma (hiểu cách sử dụng Figma)

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

Dành cho nhà thiết kế web mới bắt đầu.
Dành cho những người đã học cơ bản về Figma nhưng muốn nâng cao chất lượng thiết kế trong công việc
Dành cho lập trình viên web.

Nội dung khóa học

15 phần • 108 bài giảng
1 Khóa học này nói về điều gì
2 Tải tài liệu khóa học
3 Đây là khóa học đa ngôn ngữ
4 Cách học khóa học
5 Cách đặt câu hỏi
1 Tính nhất quán là điều quan trọng nhất
2 UX/UI đầu tiên trên thế giới
3 Cài đặt văn bản đúng cách trong thiết kế web
4 Các loại font chữ
5 Cách chọn font chữ cho dự án
6 Cách định dạng văn bản sáng tạo
7 Cách định dạng văn bản trong Figma
8 Thực hành #1 — Định dạng văn bản đẹp mắt
9 Glyphs là gì
10 Tóm tắt chương
1 Tình thế tiến thoái lưỡng nan của nhà thiết kế
2 Nguồn tài nguyên để phát triển gu thẩm mỹ
3 Plugin tìm cảm hứng thị giác
4 Phong cách thiết kế website
5 Sử dụng AI để phát triển gu thẩm mỹ
1 Các loại lưới
2 Tạo một lưới "khó chịu"
3 Phân tích lưới của các nhà thiết kế khác
4 Tóm tắt — Typography & lưới
5 Thực hành #2 — Đặt nội dung bên trong lưới
6 Thực hành #2 — Hoàn thành (Phần 1)
7 Thực hành #2 — Hoàn thành (Phần 2)
1 Nhiệm vụ và mô tả dự án
2 Lưu ý bổ sung — Nơi lấy ảnh
3 Tạo lưới module
4 Tạo Hero Section, Phần 1
5 Tạo Hero Section, Phần 2
6 Tạo phần thứ hai của website
7 Tạo phần thứ ba của website
8 Tạo banner đầu tiên
9 Tạo phần thứ tư của website
10 Tạo banner thứ hai
11 Tạo phần thứ năm
12 Tạo phần thứ sáu
13 Tạo footer website
14 Thay đổi font chữ và tạo menu điều hướng
15 Hoàn thiện website
1 Quy tắc góc vuông
2 Nên sử dụng giá trị khoảng cách nào
3 Sử dụng không gian trống trong thiết kế
1 Thứ bậc thị giác là gì
2 Các cấp độ của thứ bậc thị giác
3 Phần tử nào quan trọng hơn
4 Cách sử dụng màu xám
5 Làm ngược lại — Loại bỏ điểm nhấn khỏi các phần tử không cần thiết
6 Thực hành #3 — Thiết lập thứ bậc thị giác
7 Thực hành #3 — Hoàn thành, Phần 1
8 Thực hành #3 — Hoàn thành, Phần 2
1 Bo góc nên như thế nào
2 Bán kính bo góc nhất quán
1 Vấn đề với cách tiếp cận 60:30:10
2 Cách tạo thang màu
3 Tạo thang màu trong thực tế
4 Quy tắc 60:30:10 và thang màu
5 Bạn không nhất thiết chỉ dùng ba màu
6 Sử dụng màu hệ thống
7 Sử dụng xám lạnh hoặc xám ấm
8 Liên tưởng màu sắc
9 Cách sử dụng gradient trong thiết kế
10 Một vài mẹo khi làm việc với màu sắc
11 AI và Màu sắc
12 Thực hành #4 — Áp dụng màu sắc vào layout
13 Thực hành #4 — Hoàn thành, Phần 1
14 Thực hành #4 — Hoàn thành, Phần 2
1 Cách đặt chữ lên hình ảnh
2 Nên sử dụng hình ảnh nào
3 Cách làm việc với icon
4 Cách sử dụng ảnh chụp màn hình trong thiết kế
1 Về hình ảnh tạo bởi AI
2 Tính năng và giá cả của AI
3 Xóa nền bằng AI
4 Xóa đối tượng bằng AI
5 Mở rộng ranh giới hình ảnh bằng AI
6 Tăng độ phân giải hình ảnh bằng AI
7 Chỉnh sửa hình ảnh bằng AI
8 Điều chỉnh hài hòa hình ảnh bằng AI
9 Tạo hình ảnh bằng AI
10 Khả năng bổ sung của AI
1 Về đổ bóng
2 Kỹ thuật và phương pháp làm việc với đổ bóng
3 Thực hành #5 — Áp dụng hiệu ứng đổ bóng đúng cách
1 Đặc điểm của thiết kế di động
2 Kích thước chữ trên thiết bị di động
3 Kích thước và căn chỉnh phần tử
4 Thực hành #6 — Tối ưu dự án đầu tiên cho di động
5 Thực hành #6 — Hoàn thành, Phần 1
6 Thực hành #6 — Hoàn thành, Phần 2
7 Thực hành #6 — Hoàn thành, Phần 3
8 Thực hành #6 — Hoàn thành, Phần 4
1 Về kỹ thuật thị giác
2 Nguồn tài nguyên hữu ích cho nhà thiết kế web
1 Tổng quan và mục tiêu dự án
2 Chuẩn bị và tìm kiếm tài liệu tham khảo
3 Tạo Hero Section
4 Tạo menu điều hướng
5 Tạo đường trang trí
6 Tạo phần thứ hai của website, Phần 1
7 Tạo phần thứ hai của website, Phần 2
8 Tạo phần thứ ba của website
9 Tạo phần thứ tư của website
10 Tạo biểu mẫu cho website
11 Tạo footer website
12 Hoàn thiện website

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

I’m excited to invite you to the course “Web Design in Figma — Advanced Level” — an in-depth, practical program dedicated to modern web design, visual style, and the principles professionals use to create websites.


Here we don’t talk about Figma buttons — we focus on modern design rules.

On how to make your work visually strong, logically structured, and truly contemporary.


A complete deep dive into web-design principles

You will explore dozens of rules and approaches used by professional web designers, including:


  • typography and text hierarchy

  • grids and guides

  • composition and modularity

  • working with color, contrast, and accents

  • spacing, rhythm, and visual order in a layout

  • shadows, rounding, effects, and consistency

  • and much more


You will learn to understand why a layout looks good or bad and explain logically what needs to be improved.


Modern techniques and visual thinking

In the course, we explore:


  • how to develop visual taste

  • how to work with references

  • how to create original website concepts

  • how to translate an idea into a visual structure

  • how to avoid clichés and create genuinely creative solutions


Beyond design rules, you will also learn:

  • how to apply Midjourney and Adobe Firefly in web design

  • how to use AI to generate styles, ideas, and visual solutions

  • where neural networks help and where they can do harm


We talk about AI honestly — without hype — understanding where it really helps and where it doesn’t.


The course includes:

  • 100+ video lessons covering concrete design rules

  • an interactive 300+ slide workbook with rules, examples, and diagrams

  • a student workbook with practical exercises

  • exercises, demonstrations, and full breakdowns


Every topic is reinforced through practice — you don’t just watch lessons, you gain experience by solving real design tasks.


Together we will create 2 major portfolio projects:

  • A creative website for a real client, built in a modern visual style

  • A redesign of an existing website where you apply all the rules you’ve learned


You will create the projects independently, using the principles and logic mastered throughout the course.


Throughout the course, I answer students’ questions daily on the platform.

See you in the lessons!

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 Design Tools
Hiển thị tất cả khoá học Figma
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 😊