Complete Web & Mobile Designer: UI/UX, Figma, +more

Khóa học mới nhất với toàn bộ công cụ và phương pháp thiết kế hiện đại! Tham gia cộng đồng hơn 900.000+ học viên trực tuyến và học từ các chuyên gia hàng đầu đã từng làm việc tại Silicon Valley và Toronto cho những tập đoàn công nghệ lớn. Một nhà thiết kế giỏi ngày càng khan hiếm, và không hiếm khi thấy các designer kiếm được mức lương $160,000+ nhờ kỹ năng cực kỳ giá trị này. Chúng tôi sẽ hướng dẫn bạn cách đạt được điều đó!

Sử dụng những phương pháp tốt nhất trong Thiết kế Web, Thiết kế Di động, cũng như Thiết kế Giao diện và Trải nghiệm Người dùng (UI/UX), khóa học này tập trung đưa bạn từ con số 0 đến mức có thể được tuyển dụng hoặc nhận các dự án freelance. Chúng tôi sử dụng các công cụ hot như Figma để hướng dẫn bạn toàn bộ quy trình từ A đến Z. Học viên của Andrei hiện đang làm việc tại Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook và nhiều tập đoàn công nghệ hàng đầu khác.

Khóa học còn bao gồm hơn 100 tài nguyên và template thiết kế cao cấp mà bạn có thể giữ lại và tùy chỉnh cho mọi dự án trong tương lai. Chúng tôi cam kết đây là nguồn tài nguyên trực tuyến toàn diện nhất về kỹ năng thiết kế!

Chương trình học mang tính thực hành cao, dẫn dắt bạn từng bước trở thành một Designer chuyên nghiệp, từ việc tạo ra các thiết kế chuẩn chỉnh đến chuyển đổi chúng thành website hoặc ứng dụng thực tế bằng HTML và CSS.

Các chủ đề được đề cập trong khóa học bao gồm...

• 00 Nguyên tắc Thiết kế Web & Di động + Sự khác biệt giữa Thiết kế và Phát triển Web

• 01 BẮT ĐẦU – Phác thảo, Nguồn cảm hứng và Cấu trúc

  • 1. Phác thảo

    • Giới thiệu về Phác thảo

    • Quy trình Phác thảo

    • Phác thảo Luồng Người dùng

    • Mẹo Phác thảo Hiệu quả

  • 2. Nguồn cảm hứng

    • Cách duy trì cảm hứng sáng tạo

    • Tìm kiếm ý tưởng trực tuyến

  • 3. Cơ bản về Figma

    • Lựa chọn gói và Đăng ký

    • Ứng dụng của Figma

    • Giao diện Figma — Cấu trúc

    • Giao diện Figma — Quản lý File

    • Giao diện Figma — Thanh công cụ

    • Giao diện Figma — Thanh bên trái

    • Giao diện Figma — Thanh bên phải

    • Hình khối và Công cụ — Frames

    • Hình khối và Công cụ — Nhóm đối tượng

    • Hình khối và Công cụ — Hình cơ bản và Phép Boolean

    • Thiết kế trong Figma — Hình ảnh

    • Thiết kế trong Figma — Làm việc với Văn bản

    • Thiết kế trong Figma — Ràng buộc (Constraints)

    • Thiết kế trong Figma — Sử dụng Auto Layout

    • Thiết kế trong Figma — Thuộc tính Auto Layout

    • Tài nguyên và Cộng tác — File cộng đồng

    • Tài nguyên và Cộng tác — Plugin cộng đồng

    • Tài nguyên và Cộng tác — Chia sẻ và Bình luận

    • Dự án — Tạo Logo bằng Hình cơ bản

    • Dự án — Nút Auto Layout

    • Dự án — Tạo Thanh điều hướng Responsive

    • Dự án — Văn bản Responsive

    • Dự án — Hình ảnh và Gradient

    • Dự án — Đường viền và Hình dạng

    • Dự án — Bố cục và Tính đáp ứng

  • 4. Luồng người dùng

    • Chuẩn bị cho Phần này

    • Điều Nên và Không Nên làm

    • Luồng Người dùng trong Figma — Onboarding

    • Luồng Người dùng trong Figma — Tìm kiếm

  • 5. Sơ đồ trang (Sitemaps)

    • Giới thiệu về Sitemaps

    • Tạo Sitemap Cơ bản

    • Tài nguyên Sitemap Tái sử dụng

    • Ôn tập Figma — Component và Biến thể Cơ bản

    • Sitemaps trong Figma — Lớp trên cùng

    • Sitemaps trong Figma — Đi sâu hơn

    • Mẹo tạo Sitemaps Chất lượng

• 02 KHÁM PHÁ VÀ LẶP LẠI – Wireframes, Nguyên mẫu và Phản hồi

  • 1. Wireframes

    • Wireframe là gì?

    • Cách tạo Wireframe

    • Ôn tập Figma — Component Nút Cơ bản

    • Ôn tập Figma — Biến thể (Variants)

    • Sử dụng Component Wireframe

    • Wireframes — Trang Chủ

    • Wireframes — Giỏ hàng

    • Wireframes — Hồ sơ

  • 2. Tạo Nguyên mẫu (Prototyping)

    • Ôn tập Figma — Tạo Nguyên mẫu trong Figma

    • Nguyên mẫu trong Figma — Luồng và Điểm bắt đầu

    • Nguyên mẫu trong Figma — Kết nối

    • Nguyên mẫu trong Figma — Tương tác

    • Nguyên mẫu trong Figma — Hiệu ứng chuyển động

    • Nguyên mẫu trong Figma — Thiết lập Nguyên mẫu

    • Nguyên mẫu trong Figma — Trình bày Nguyên mẫu

    • Dự án — Thanh điều hướng

    • Dự án — Xóa sản phẩm khỏi Wishlist

    • Dự án — Tìm kiếm sản phẩm

  • 3. Thu thập Phản hồi

    • Tại sao Phản hồi Quan trọng?

    • Phản hồi Mang tính Xây dựng

• 03 THIẾT KẾ TRỰC QUAN – Lý thuyết Thiết kế và Khả năng Truy cập

  • 1. Khoảng cách và Lưới (Grids)

    • Grid là gì?

    • Nguyên tắc cơ bản của Grid

    • Ôn tập Figma — Grid Cố định và Linh hoạt

    • Ôn tập Figma — Breakpoints

    • Ôn tập Figma — Kiểu Grid

    • Dự án — Lưới bố cục Di động

    • Dự án — Lưới bố cục Desktop

    • Quy tắc Đơn giản cần Tuân thủ

  • 2. Typography

    • Phông chữ Serif

    • Phông chữ Sans Serif

    • Phông chữ Display & Mono

    • Lựa chọn Kiểu chữ Phù hợp

    • Ôn tập Figma — Thuộc tính Văn bản

    • Bài tập — Nâng tầm Thương hiệu

    • Bài tập — Tình huống Sử dụng Phông chữ

    • Bài tập — Google Fonts

    • Dự án — Khám phá Kiểu chữ

    • Dự án — Kết hợp Họ Phông chữ

    • Dự án — Tiêu đề, Nội dung và Nhãn

    • Dự án — Hệ thống Kiểu chữ

    • Ôn tập Figma — Kiểu Văn bản

  • 3. Màu sắc

    • Bảng màu (Color Schemes)

    • Câu hỏi Quan trọng khi Chọn Màu

    • Tạo Bảng màu Cá nhân hóa

    • Ôn tập Figma — Thuộc tính Màu

    • Bài tập — Mở rộng Bảng màu Giới hạn

    • Bài tập — Tạo Bảng màu từ Đầu

    • Ôn tập Figma — Kiểu Màu

    • Bài tập — Sử dụng Kiểu Màu

    • Dự án — Màu Chính và Màu Trung tính

    • Dự án — Màu Nhấn

  • 4. Hình ảnh và Biểu tượng

    • Giới thiệu Tài nguyên Trực quan

    • Ôn tập Figma — Plugin Hình ảnh

    • Ôn tập Figma — Kiểu Hình ảnh

    • Ôn tập Figma — Mặt nạ (Masks)

    • Bài tập — Khám phá Hình ảnh

    • Bài tập — Kết hợp Văn bản và Hình ảnh

    • Ôn tập Figma — Plugin Minh họa

    • Bài tập — Thêm Minh họa vào Thiết kế

    • Ôn tập Figma — Plugin Biểu tượng

    • Ôn tập Figma — Công cụ Pen

    • Bài tập — Tạo Biểu tượng Tùy chỉnh với Pen Tool

  • 5. Biểu mẫu và Thành phần Giao diện

    • Biểu mẫu và UI Elements là gì?

    • Thực hành Tốt nhất — Biểu mẫu

    • Thực hành Tốt nhất — Ô nhập liệu Cơ bản và Nâng cao

    • Thực hành Tốt nhất — Ô nhập liệu

    • Thực hành Tốt nhất — Nút bấm

    • Ôn tập Figma — Thuộc tính Component

    • Thuộc tính vs. Biến thể

    • Ôn tập Figma — Thuộc tính Component Nút

    • Ôn tập Figma — Biến thể Nút

    • Ôn tập Figma — Kết hợp Components

    • Ôn tập Figma — Khả năng của Component Biểu mẫu

    • Dự án — Luồng Đăng ký

  • 6. Khả năng Truy cập (Accessibility)

    • Accessibility là gì?

    • Công nghệ Hỗ trợ

    • Mẫu Thiết kế Trực quan cho Accessibility

    • Công cụ Hỗ trợ Thiết kế Truy cập được

• 04 KHÁM PHÁ THIẾT KẾ – Thiết kế Ứng dụng và Hệ thống Thiết kế

  • 1. Mẫu Thiết kế (Design Patterns)

    • Design Patterns là gì?

    • Tại sao Design Patterns Quan trọng?

    • Cách Áp dụng Design Patterns

    • Phân tích Design Patterns

    • Chọn và Phân tích Design Patterns

  • 2. Thiết kế Di động

    • Thực hành Tốt nhất trong Thiết kế Di động

  • 3. Phong cách và Khám phá Trực quan

    • Mức độ Chi tiết trong Thiết kế (Fidelity)

    • Khám phá Trực quan — Thanh điều hướng

    • Khám phá Trực quan — Nút bấm

    • Ôn tập Figma — Kiểu Hiệu ứng

    • Khám phá Trực quan — Thẻ Sản phẩm

    • Khám phá Trực quan — Thẻ Văn bản

    • Thiết kế Màn hình — Trang Chủ

    • Thiết kế Màn hình — Trang Sản phẩm

  • 4. Chuyển động và Microinteractions

    • Tầm quan trọng của Chuyển động

    • Vì sao Microinteractions Quan trọng?

    • Microinteraction là gì?

    • Ôn tập Figma — Giới thiệu Smart Animate

    • Ôn tập Figma — Thuộc tính Smart Animate

    • Bài tập — Hiệu ứng Parallax

    • Bài tập — Thông báo Tin nhắn Mới

    • Bài tập — Lớp phủ (Overlays)

    • Ôn tập Figma — Component Tương tác

    • Bài tập — Nút Tương tác

    • Dự án — Màn hình Chào mừng với Parallax

    • Dự án — Onboarding Kéo thả

    • Dự án — Lớp phủ Giỏ hàng

    • Dự án — Microinteraction cho Nút

• 05 TỔNG HỢP KIẾN THỨC – Sử dụng Hệ thống Thiết kế và Tạo Nguyên mẫu Độ trung thực Cao với Figma

  • 1. Hệ thống Thiết kế (Design Systems)

    • Kiểu Nền tảng và Component vs. Component Sản phẩm

    • Xây dựng Độ chi tiết và Tổ chức Component

    • Kiểu Nền tảng và Component

    • Component — Nút bấm

    • Component — Thẻ

    • Component — Đầu trang

    • Component — Ô nhập liệu

    • Component — Mục Danh sách

    • Component — Thanh điều hướng

    • Component — Các thành phần Khác

  • 2. Triển khai Thực tế

    • Hướng tới Thiết kế Cuối cùng

    • Triển khai — Màn hình Giới thiệu

    • Triển khai — Màn hình Onboarding

    • Triển khai — Màn hình Đăng ký

    • Triển khai — Màn hình Chính

    • Triển khai — Màn hình Wishlist

    • Triển khai — Màn hình Hồ sơ

    • Triển khai — Giỏ hàng và Thanh toán

    • Nguyên mẫu — Đăng ký

    • Nguyên mẫu — Thêm vào Giỏ hàng

    • Nguyên mẫu — Thanh toán

    • Nguyên mẫu — Plugin Lottie Files

    • Nguyên mẫu — Tìm kiếm và Bộ lọc

• 06 TỪ FIGMA ĐẾN WEBSITE (Chuyển đổi thiết kế Figma thành website thực tế bằng HTML và CSS)

• 07 HTML + HTML5

• 08 CSS + CSS3 - CSS Cơ bản, CSS Grid, Flexbox, Hiệu ứng CSS

• 09 ĐƯA WEBSITE LÊN MÔI TRƯỜNG TRỰC TUYẾN

Khóa học hoàn toàn mới này sẽ đưa bạn từ những kiến thức cơ bản về nguyên tắc và nền tảng thiết kế đồ họa, cho đến việc tạo ra các sản phẩm đẹp mắt, tìm hiểu về UX/UI và tương tác, cũng như xây dựng một quy trình thiết kế hoàn chỉnh để áp dụng cho mọi dự án và khách hàng trong tương lai. Chúng tôi bao quát gần như mọi khía cạnh, giúp bạn có một lộ trình từng bước để làm việc như một designer chuyên nghiệp.

Chúng tôi sẽ dạy bạn những kỹ năng cho phép bạn định giá cao cho thời gian của mình, chứ không phải cạnh tranh với mức giá vài đô la một giờ trên các trang freelance ngẫu nhiên. Mục tiêu là trang bị cho bạn kỹ năng của một designer đỉnh cao, và trong quá trình đó, chúng ta sẽ cùng thiết kế một sản phẩm thực tế cho một công ty mà bạn có thể thêm vào portfolio của mình.

Khóa học này không chỉ khiến bạn xem mà không hiểu nguyên tắc, để rồi khi kết thúc, bạn không biết làm gì ngoài việc xem thêm một tutorial khác. Không! Khóa học này sẽ thúc đẩy và thách thức bạn đi từ người mới bắt đầu tuyệt đối thành một Designer hàng đầu có thể được tuyển dụng! Thiết kế là một kỹ năng giá trị, không dễ lỗi thời như nhiều kỹ năng kỹ thuật khác. Xu hướng thay đổi, nhưng kỹ năng và nền tảng bạn học được trong khóa học này sẽ đồng hành cùng bạn trong nhiều năm tới.

Khóa học này dành cho bạn nếu:
- Bạn là người mới bắt đầu muốn trở thành designer và làm freelance

- Bạn là designer muốn tăng thu nhập từ công việc của mình

- Bạn là developer muốn cải thiện kỹ năng thiết kế

Giảng viên:

Andrei là giảng viên của các khóa học Phát triển Ứng dụng được đánh giá cao nhất trên Udemy và là một trong những giảng viên phát triển nhanh nhất. Học viên của anh đã làm việc cho những tập đoàn công nghệ lớn nhất thế giới như Apple, Google, Tesla, Amazon, JP Morgan, IBM, UNIQLO, v.v... Với nhiều năm kinh nghiệm làm việc với tư cách là senior software developer tại Silicon Valley và Toronto, anh hiện đang dành toàn bộ thời gian để giảng dạy kỹ năng lập trình và giúp bạn khám phá những cơ hội nghề nghiệp tuyệt vời mà ngành phát triển phần mềm mang lại.

Là một lập trình viên tự học, Andrei hiểu rằng có vô số khóa học trực tuyến, hướng dẫn và sách quá dài dòng và không đủ khả năng dạy kỹ năng thực tế. Hầu hết mọi người cảm thấy tê liệt và không biết bắt đầu từ đâu khi học một chủ đề phức tạp, hoặc tệ hơn, nhiều người không có $20,000 để tham gia một bootcamp lập trình. Kỹ năng lập trình nên có giá cả phải chăng và mở ra cho tất cả mọi người. Tài liệu giáo dục nên dạy các kỹ năng thực tế, cập nhật và không lãng phí thời gian quý báu của người học. Với những bài học quan trọng từ làm việc cho các tập đoàn Fortune 500, startup công nghệ, đến việc thành lập doanh nghiệp riêng, anh hiện đang dành 100% thời gian để dạy others kỹ năng phát triển phần mềm giá trị, giúp họ kiểm soát cuộc sống và làm việc trong một ngành công nghiệp thú vị với vô vàn khả năng.

Andrei cam kết rằng không có khóa học nào khác toàn diện và được giải thích rõ ràng như vậy. Anh tin rằng để học bất cứ điều gì có giá trị, bạn cần bắt đầu với nền tảng và phát triển gốc rễ của cây. Chỉ từ đó, bạn mới có thể học các khái niệm và kỹ năng cụ thể (lá) kết nối với nền tảng. Việc học trở nên theo cấp số nhân khi được cấu trúc theo cách này.

Kết hợp kinh nghiệm trong tâm lý giáo dục và coding, các khóa học của Andrei sẽ đưa bạn đến sự hiểu biết về các chủ đề phức tạp mà bạn chưa từng nghĩ là có thể.

Daniel là một nhà lãnh đạo thiết kế trong ngành công nghệ với kinh nghiệm sâu rộng trong việc hỗ trợ các startup xây dựng và cải tiến sản phẩm của họ. Daniel đam mê giảng dạy và trao quyền cho các designer, đồng thời hợp tác với các bộ phận khác để xây dựng các sản phẩm có mục đích, đáp ứng cả mục tiêu của người dùng và doanh nghiệp.

Phương pháp tiếp cận thiết kế của anh luôn chu đáo và lặp đi lặp lại. Daniel thường thấy mình làm việc hợp tác với nhóm, cho dù là phác thảo ý tưởng và luồng hay dẫn dắt chiến lược thiết kế với trưởng nhóm và các bên liên quan bên ngoài.

Daniel là một designer đa tài với chuyên môn trải rộng across nhiều lĩnh vực thiết kế. Điều này bao gồm Trải nghiệm Người dùng và Thiết kế Trực quan, Nghiên cứu Người dùng, Chiến lược Sản phẩm, Phương pháp Luận Thiết kế Lean và Agile và nhiều hơn nữa. Công việc của anh đã góp phần định hình các giải pháp khác nhau cho nhiều ngành công nghiệp như nhà ở, blockchain và y tế.

Khi không xây dựng sản phẩm, Daniel đã phát biểu và cố vấn tại các cuộc gặp gỡ và sự kiện khác nhau. Anh muốn trả ơn cho cộng đồng thiết kế mà anh đã và đang học hỏi rất nhiều. Daniel luôn hướng tới việc hỗ trợ, dạy và đồng hành cùng các designer khác trong sự nghiệp của họ.

Hẹn gặp bạn trong khóa học!