Chia Sẻ Khóa Học UI/UX Product Design Bootcamp [Update Tháng 6/2025] [Khóa 5961 A]
Chuyển từ người mới bắt đầu thành một UI/UX Designer được thuê vào năm 2025! Đây là khóa học thiết kế duy nhất bạn cần để học và thành thạo web design, mobile design, Figma, UI & UX và HTML + CSS.
Những gì bạn sẽ học được:
- ✓ Xây dựng các dự án web và mobile được thiết kế đẹp mắt cho khách hàng của bạn bằng các công cụ hiện đại được các công ty hàng đầu sử dụng vào năm 2025.
- ✓ Truy cập ngay vào hơn 100 asset và design template premium mà bạn có thể giữ lại và sử dụng để tùy chỉnh tất cả các dự án trong tương lai của mình.
- ✓ Học Figma từ đầu cho mọi nhu cầu thiết kế và sau đó cách chuyển đổi các thiết kế của bạn thành một live HTML & CSS website.
- ✓ Nắm vững cả các nguyên tắc Web design và Mobile design và cách chuyển từ sketching sang các thiết kế hoàn chỉnh có độ trung thực cao sẽ gây ấn tượng với khách hàng.
- ✓ Tìm hiểu các design best practice và các mẹo & thủ thuật của chuyên gia mà bạn sẽ mất nhiều năm để học nếu làm việc toàn thời gian.
- ✓ Tìm hiểu các UI/UX best practice bằng cách sử dụng các xu hướng mới nhất trong ngành.
Khóa học Design từ Zero đến Master này rất thực tế. Khóa học này tập trung vào việc giúp bạn từ người mới bắt đầu hoàn toàn trở thành người có thể được thuê hoặc giành được hợp đồng freelance một cách hiệu quả.
Bạn sẽ học được:
- ✓ Các nguyên tắc và nền tảng của thiết kế đồ họa.
- ✓ Các best practice mới nhất trong Web Design & Mobile Design.
- ✓ User Interface & User Experience Design (UI/UX) fundamentals & best practice.
- ✓ Cách tạo ra những thiết kế đẹp mắt, chuyên nghiệp của riêng bạn (không chỉ xem chúng tôi!) bằng cách sử dụng các công cụ thiết kế hiện đại, được ưa chuộng nhất và các best practice cho năm 2025.
- ✓ Các kỹ năng để chuyển đổi các thiết kế của bạn thành các website hoặc ứng dụng thực tế sử dụng HTML và CSS.
Trong quá trình này, bạn sẽ trải qua toàn bộ quá trình thiết kế và 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.
Chúng tôi sẽ cung cấp mọi thông tin bạn cần biết để lần sau khi bạn chịu trách nhiệm thiết kế một sản phẩm, bạn sẽ có một phác thảo và hướng dẫn từng bước để làm theo.
Bonus: Bạn cũng sẽ được truy cập ngay vào hơn 100 asset và design template cao cấp mà bạn có thể giữ lại và sử dụng để tùy chỉnh mọi dự án trong tương lai của mình.
Quan trọng nhất là bạn sẽ được học hỏi từ các chuyên gia trong ngành có kinh nghiệm thực tế khi làm việc cho các công ty lớn..
Sau đây là nhiều chủ đề bạn sẽ học trong Khóa học Design này:
Chúng tôi đã nói với bạn rằng đây là khóa học thiết kế trực tuyến tốt nhất và toàn diện nhất. Vậy hãy chứng minh điều đó bằng cách xem xét mọi thứ bạn sẽ học.
0. Web & Mobile Design Principles & Design vs Web Development.
1. BẮT ĐẦU – Sketching, Inspiration + Structure:
1.1. Sketching:
- ✓ Giới thiệu về Sketching.
- ✓ Sketching UX flows.
- ✓ Mẹo Sketching.
1.2. Inspiration:
- ✓ Làm thế nào để duy trì cảm hứng.
- ✓ Làm thế nào để tìm cảm hứng thiết kế trực tuyến.
1.3. User Flows:
- ✓ User Flows là gì?
- ✓ Những điều nên và không nên làm.
- ✓ Tăng tốc workflow của bạn với các component.
- ✓ Tạo user flows của riêng bạn: Registration (Phần 1).
- ✓ Tạo user flows của riêng bạn: Search (Phần 2).
- ✓ Tạo user flows của riêng bạn: Checkout (Phần 3).
1.4. Sitemap:
- ✓ Giới thiệu về sitemaps.
- ✓ Tạo một sitemap cơ bản.
- ✓ Những gì bạn nên làm trước khi bắt đầu.
- ✓ Tạo một sitemap (Phần 1).
- ✓ Tạo một sitemap (Phần 2).
- ✓ Mẹo để bắt đầu.
2. EXPLORE & ITERATE – Wireframes, Prototyping & Feedback:
2.1. Wireframes:
- ✓ Wireframe là gì?
- ✓ Làm thế nào để tạo một wireframe?
- ✓ Tăng tốc workflow của bạn trong Figma.
- ✓ Tạo một home page.
- ✓ Tạo một product page.
- ✓ Tạo một checkout page.
2.2. Prototyping bằng Figma:
- ✓ Prototyping basic trong Figma: Device + Triggers.
- ✓ Prototyping basic trong trong Figma: Actions.
- ✓ Prototyping basic trong trong Figma: Overflow.
- ✓ Prototyping basic trong trong Figma: Presentation + Collaboration.
- ✓ Liên kết một quick user flow trong Figma.
- ✓ Làm việc trên các small interaction với Figma.
2.3. Nhận feedback về các thiết kế của bạn:
- ✓ Tại sao feedback lại quan trọng đến vậy?
- ✓ Làm thế nào để có được design feedback mang tính xây dựng.
3. VISUAL DESIGN – Design Theory & Accessibility:
3.1. Grids + Spacing:
- ✓ Spacing & Grid Basic.
- ✓ Responsive Grids trong Figma.
- ✓ Tạo grid của riêng bạn trong Figma.
- ✓ Các quy tắc của grid.
3.2. Typography:
- ✓ Typography basic (Phần 1).
- ✓ Phù hợp với các typeface theo thời đại.
- ✓ Typography basic (Phần 2).
- ✓ Chọn đúng typeface.
- ✓ Typography basic (Phần 3).
- ✓ Chọn một typeface.
- ✓ Typeface của bạn có phù hợp với hoàn cảnh của bạn không?
- ✓ Mở rộng một type system hiện có.
- ✓ Chọn typeface trong Google Fonts.
- ✓ Thu hẹp lựa chọn typography của bạn.
- ✓ Tạo một type system trong Figma.
3.3. Color:
- ✓ Color schemes.
- ✓ Những câu hỏi quan trọng cần hỏi trước khi chọn color.
- ✓ Mẹo hữu ích để tạo color palette.
- ✓ Tạo một monochromatic color palette.
- ✓ Áp dụng color palette đơn giản của bạn.
- ✓ Mở rộng một strict color palette.
- ✓ Tạo color palette của riêng bạn.
3.4. Forms + UI Elements:
- ✓ UI Elements là gì?
- ✓ Best Practices Phần 1: Forms.
- ✓ Best Practices Phần 2: Inputs (Phần 1)
- ✓ Best Practices Phần 2: Inputs (Phần 2)
- ✓ Best Practices Phần 2: Inputs (Phần 3)
- ✓ Best Practices Phần 2: Inputs (Phần 4)
- ✓ Best Practices Phần 3: Buttons.
- ✓ Cách tạo components trong Figma.
- ✓ Sử dụng atomic elements trong Figma.
- ✓ Sử dụng Instances trong Figma.
- ✓ Chỉnh sửa Instances để tạo component mới.
- ✓ Sử dụng các constraint để tạo ra các responsive component.
- ✓ Tạo một registration form trong Figma.
3.5. Imagery + Iconography:
- ✓ Tài nguyên và kỹ thuật để tạo ra các visual asset tuyệt vời.
- ✓ Làm việc với ảnh trong Figma (Phần 1).
- ✓ Làm việc với ảnh trong Figma (Phần 2).
- ✓ Làm việc với illustration trong Figma.
- ✓ Sử dụng Figma plugins để tìm Icon nhanh chóng.
- ✓ Tạo các Icon tùy chỉnh của riêng bạn.
3.6. Accessibility:
- ✓ Accessibility là gì?
- ✓ Các công nghệ hỗ trợ.
- ✓ Các Visual pattern cho accessibility (Phần 1).
- ✓ Các công cụ giúp thiết kế của bạn dễ tiếp cận.
- ✓ Các Visual pattern cho accessibility (Phần 2).
4. DESIGN EXPLORATION – Application Design & Design System:
4.1. Design Patterns:
- ✓ Design pattern là gì?
- ✓ Tại sao các design pattern lại có giá trị?
- ✓ Cách áp dụng các design pattern.
- ✓ Phân tích các design pattern cùng nhau.
- ✓ Phân tích và lựa chọn các design pattern cùng nhau.
4.2. Mobile Design:
- ✓ Mobile design best practices (Phần 1).
- ✓ Mobile design best practices (Phần 2).
4.3. Áp dụng Visual Design:
- ✓ Design Fidelity.
- ✓ Style Exploration (Navigation).
- ✓ Style Exploration (Cards).
- ✓ Style Exploration (Interests).
- ✓ Style Exploration (New Elements).
4.4. Motion Design Basic:
- ✓ Tầm quan trọng của motion.
- ✓ Mục đích của motion.
- ✓ Giới thiệu về Figma Smart Animate.
- ✓ Trình bày sức mạnh của Figma Smart Animate.
4.5. Microinteractions:
- ✓ Microinteractions là gì?
- ✓ Tại sao microinteractions lại quan trọng đến vậy?
- ✓ Tạo microinteractions của riêng bạn (Phần 1).
- ✓ Tạo microinteractions của riêng bạn (Phần 2).
- ✓ Sử dụng Figmotion (Phần 1).
- ✓ Sử dụng Figmotion (Phần 2).
5. KẾT HỢP TẤT CẢ LẠI VỚI NHAU – Sử dụng Design System chúng tôi và Hi-Fi prototyping của với Figma:
5.1. Design Systems:
- ✓ Design system là gì?
- ✓ Foundation (Color).
- ✓ Foundation (Grids & Spacing).
- ✓ Foundation (Typography).
- ✓ Foundation (Iconography).
- ✓ Components (Buttons).
- ✓ Components (Inputs).
- ✓ Components (Cards).
- ✓ Recipes (Card Layouts).
- ✓ Recipes (Search).
- ✓ Recipes (Orders).
5.2. Final Compositions:
- ✓ Sử dụng design system của chúng ta (Search).
- ✓ Sử dụng design system của chúng ta (Product Description).
- ✓ Sử dụng design system của chúng ta (Cart).
- ✓ Sử dụng design system của chúng ta (Checkout).
5.3. Làm việc với các Developer:
- ✓ Tại sao handoff lại quan trọng đến vậy?
- ✓ Collaboration trong Figma.
6. TỪ FIGMA ĐẾN WEBSITE (lấy một Figma design và chuyển đổi nó thành một live website bằng HTML và CSS).
7. HTML + HTML5.
8. CSS + CSS3 - CSS basic, CSS Grid, Flexbox, CSS Animation.
9. ĐƯA WEBSITE CỦA BẠN LÊN TRỰC TUYẾN.
Những gì bạn sẽ thiết kế và xây dựng:
Cách tốt nhất để học là thực hành. Không chỉ xem hướng dẫn vô tận. Đó là lý do tại sao một phần quan trọng của khóa học này là các dự án thực tế mà bạn sẽ được thiết kế và xây dựng. Thêm vào đó, chúng sẽ trông tuyệt vời trên portfolio của bạn.
1. Photo Inspiration App:
Test các kỹ năng Figma Smart Animate của bạn. Bạn sẽ ngay lập tức vào Figma để tạo một số hiệu ứng chuyển tiếp mượt mà trong ứng dụng ảnh của riêng bạn.
2. Bouncy:
Khám phá một trong những plugin tuyệt vời nhất của Figma, Figmotion để tạo bouncing notification animation của riêng bạn. Bạn sẽ học cách tạo animate từng bước và export một gif cho các prototype của mình.
3. Habitual Web:
Thiết kế một landing page đẹp mắt trên web cho Habitual App mới tạo của bạn!
4. Habitual Mobile:
Tìm hiểu những nền tảng về UI & UX design trong khi bạn bắt đầu hành trình thiết kế từ đầu đến cuối. Mọi thứ từ lý thuyết màu đến prototyping, bạn sẽ học được những gì cần thiết để thiết kế một ứng dụng đẹp mắt từ đầu bằng cách sử dụng các nguyên tắc và xu hướng thiết kế hiện đại.
Mục lục:
- ✓ 01. Giới thiệu.
- ✓ 02. Sketching.
- ✓ 03. Inspiration.
- ✓ 04. Cơ bản về Figma.
- ✓ 05. User Flows.
- ✓ 06. Sitemaps.
- ✓ 07. Wireframes.
- ✓ 08. Prototyping.
- ✓ 09. Feedback.
- ✓ 10. Spacing & Grids.
- ✓ 11. Typography.
- ✓ 12. Color.
- ✓ 13. Imagery & Iconography.
- ✓ 14. Forms & UI Elements.
- ✓ 15. Accessibility.
- ✓ 16. Design Patterns.
- ✓ 17. Mobile Design.
- ✓ 18. Visual Style & Exploration.
- ✓ 19. Motion trong UX Design.
- ✓ 20. Design Systems.
- ✓ 21. Execution.
- ✓ 22. Làm việc với một Client Revisited.
- ✓ 23. Tiếp theo sẽ làm gì?
- ✓ 24. Web Portfolio.
- ✓ 25. Từ Figma đến Website: Xây dựng Landing Page của chúng ta.
- ✓ 26. Bonus: Internet hoạt động như thế nào.
- ✓ 27. Bonus: Lịch sử của Web.
- ✓ 28. Bonus: HTML 5.
- ✓ 29. Bonus: CSS 3.
- ✓ 30. Bonus: Bootstrap, Templates & Xây dựng Startup Landing Page của Bạn.
- ✓ 31. Bonus: CSS Grid + CSS Layout.