Giỏ hàng

Thiết kế UI UX bằng photoshop theo chuẩn Material Design

0₫
599,000₫
Số bài học 106
Thời lượng 15 giờ
Đối tượng Mọi người
Học viên 2500

 

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

- Khóa học đầu tiên về chuẩn thiết kế google design.
- Điểm đặc biệt của khóa học là hướng dẫn chi tiết, cho người không có kinh nghiệm thiết kế ứng dụng và web thì vẫn có thể cho ra nhưng thiết kế đẹp và sử dụng thực tế được .
- Phân tích kĩ và thực hành chi tiết từng bước theo kiểu cầm tay chỉ việc.
- Đi sâu và phân nhỏ các đối tượng UI để có thiết kế chi tiết và chuẩn hóa theo Material Design
- Khóa học áp dụng và so sánh logic giữa các qui tắc thiết kế cổ điển như qui tắc phối màu dựa trên bánh xe màu, qui tắc áp dụng Typography cơ bản trên nguyên lý thiết kế hiện đại của Google thế nào và thực hành trong thiết kế Photoshop ra sao.
- Thiết kế ứng dụng và thiết kế web vốn là các thang độ màu, chi tiết khoảng cách, cỡ chữ, căn lề đều rất tương đối, cần một thời gian thiết kế đủ lâu thì mới làm ra một thiết kế chuẩn, tuy nhiên với lý thuyết thiết kế Material Design của Google dựa nghiên cứu các nguyên lý thị giác kết hợp các quy tắc đồ họa nền tảng sẽ làm cho các bạn không cần trải qua một khoảng thời gian luyện tập dài nhưng vẫn có thể thiết kế tốt cả về mặt thị giác và sử dụng.
- Tầm quan trọng của việc học chuẩn thiết kế Material Design là giúp cho các bạn có thể ứng dụng các nguyên lý về khoảng cách, thang độ màu, sử dụng size chữ... để tùy biến và tạo ra nguyên mẫu thiết kế UI/UX đẹp và phù hợp với các nhu cầu khác.
- Sau khi học xong khóa có thể biết được thiết kế nào đẹp, xịn, phân tích được độ chi tiết và độ chuẩn của một thiết kế app hay ứng dụng.

Lợi ích của khóa học

- Khóa học đầu tiên về chuẩn thiết kế Google Design.
- Điểm đặc biệt của khóa học là hướng dẫn chi tiết, cho người không có kinh nghiệm thiết kế ứng dụng và web thì vẫn có thể cho ra nhưng thiết kế đẹp và sử dụng thực tế được .
- Phân tích kĩ và thực hành chi tiết từng bước theo kiểu cầm tay chỉ việc.
- Đi sâu và phân nhỏ các đối tượng UI để có thiết kế chi tiết và chuẩn hóa theo Material Design

Đối tượng tham gia

- Các bạn sinh viên muốn học về thiết kế từ đầu để thiết kế ứng dụng.
- Các bạn đã nắm được cách sử dụng công cụ thiết kế, nhưng thiết kế chưa đẹp cần một phương thức để có thể tạo ra thiết kế chuẩn .
- Các bạn muốn tìm hiểu về chuẩn Google Design.
- Dân lập trình ứng dụng muốn tự thiết kế giao diện và tính năng của app không cần học nhiều vẫn có sản phẩm chuyên nghiệp chuẩn Google Design.
- Các bạn coder muốn hiểu sâu hơn về tư duy thiết kế sản phẩm để có thể làm việc hiệu quả cùng Designer.
- Các công ty và doanh nghiệp hoặc các startup muốn thiết kế website hoặc mobile application phù hợp với khách hàng, người sử dụng và thoả mãn chính mình.

Yêu cầu của khóa học

- Thiết bị có kết nối internet ổn định
- Máy tính có cấu hình bình thường, nên có từ 4g RAM trở lên

Phần 1: Giới thiệu khóa học

Bài 1: Giới thiệu chương

Bài 2: Cách học trong khoá học

Phần 2: Cài đặt bộ phần mềm

Bài 3: Cài đặt công cụ Adobe CC 2018

Phần 3: Nguyên lý cơ bản về thiết kế Typography

Bài 4: Lý thuyết về thiết kế chữ

Bài 5: 13 khái niệm cơ bản về chữ

Bài 6: Tải font, tìm font, và sử dụng font

Bài 7: Chọn font cho thiết kế thế nào

Bài 8: Các qui tắc kết hợp chữ - phần 1

Bài 9: Các qui tắc kết hợp chữ - phần 2

Bài 10: Các lỗi thường gặp khi kết hợp chữ

Bài 11: Phân loại các phương thức tùy biến chữ cho ấn phẩm thiết kế

Phần 4: Tổng kết nguyên lý Typography áp dụng trong Material Design

Bài 12: Tổng kết lý thuyết phần Typo

Bài 13: Tổng kết phần font chữ

Bài 14: Tổng kết các qui tắc dùng chữ trong Material Design

Bài 15: Lý thuyết về qui tắc phối màu trong thiết kế

Phần 5: Nguyên lý màu cơ bản

Bài 16: Bánh xe màu là gì

Bài 17: Thực hành sử dụng bánh xe màu

Bài 18: Học về màu cơ bản, màu thứ cấp, màu bổ túc qua ví dụ

Bài 19: Nguyên lý phối màu sử dụng màu tương đồng

Bài 20: Nguyên lý phối màu đơn sắc

Bài 21: Định nghĩa về Tone màu

Bài 22: Tổng kết về các hệ màu và cách sử dụng hệ màu trong thiết kế

Bài 23: Học về tính cách màu qua ví dụ

Phần 6: Nguyên lý màu áp dụng trong Material Design

Bài 24: Giới thiệu hệ thống màu đưa ra bởi Google

Bài 25: Cách pha màu theo Material Design

Bài 26: Cách chọn màu bằng công cụ của Adobe

Bài 27: Kiểu phối màu đơn sắc trong Material Design

Bài 28: Kiểu phối màu Triad trong Material Design

Bài 29: 6 qui tắc dùng màu trong thiết kế chuẩn - Phần 1

Bài 30: 6 qui tắc dùng màu trong thiết kế chuẩn - Phần 2

Bài 31: 6 qui tắc dùng màu trong thiết kế chuẩn - Phần 3

Bài 32: 6 qui tắc dùng màu trong thiết kế chuẩn - Phần 4

Bài 33: Tổng kết phần màu

Phần 7: Lý thuyết về Elevation trong thiết kế ứng dụng

Bài 34: Giới thiệu nguyên lý về không gian thiết kế của Material Design

Bài 35: Lý thuyết về không gian thiết kế

Bài 36: Lý thuyết về Elevation trong thiết kế ứng dụng

Phần 8: Thực hành về Elevation

Bài 37: Thực hành Elevation với Photoshop

Bài 38: Hoàn thiện lý thuyết về phần Elevation của Material Design

Bài 39: Sơ đồ và bảng thông số chi tiết các đối tượng thiết kế

Bài 40: Phân tích thiết kế qua ví dụ

Phần 9: Lý thuyết về layout và qui tắc đặt layout

Bài 41: Giới thiệu phần layout

Bài 42: Các quy tắc trình bày layout

Phần 10: Thực hành layout

Bài 43: Thực hành setup layout mobile theo thông số của Material Design

Bài 44: Thực hành setup layout tablet theo thông số của Material Design

Bài 45: Thực hành setup layout desktop theo thông số của Material Design

Phần 11: Lý thuyết về Baseline và Keyline

Bài 46: Khái niệm về đường gióng cơ sở Baseline và cách setup trên Photoshop

Bài 47: Thực hành đường gióng cơ sở Baseline

Bài 48: Lý thuyết và qui tắc về Keyline

Phần 12: Lý thuyết về Increment - Touch size - Click target

Bài 49: Khái niệm và cách sử dụng Increment trong thiết kế

Bài 50: Lý thuyết về Container, Touch target và Click target

Phần 13: Thiết kế đối tượng UI Button, phân loại Button và phân cấp thông tin của Button

Bài 51: Giới thiệu về UI Design dựa trên nguyên lý thiết kế Material

Bài 52: Thiết kế nút

Bài 53: Phân loại nút

Bài 54: Cấu trúc và phân cấp thông tin của các loại nút

Phần 14: Thực hành thiết kế Text button và Outline Button

Bài 55: Thiết kế Text Button bằng Photoshop

Bài 56: Thiết kế Outline Button bằng Photoshop

Phần 15: Thiết kế Contained Button

Bài 57: Hướng dẫn thiết kế Contained Button

Bài 58: Hướng dẫn thiết kế Contained Button kèm icon

Phần 16: Toggle Button và các tùy biến dựa trên Material Design

Bài 59: Hướng dẫn thiết kế Toggle Button

Bài 60: Phân tích các trường hợp sử dụng và kết hợp của 4 loại nút trong Material Design

Bài 61: Thiết kế tuỳ biến dựa trên Material Design

Phần 17: Thiết kế đối tượng UI Floating Action Button

Bài 62: Giới thiệu về Floating Action Button dạng tròn.

Bài 63: Giới thiệu về Floating Action Button dạng dài

Bài 64: Hướng dẫn thiết kế 2 loại Floating Action Button

Phần 18: Giới thiệu và qui chuẩn thiết kế khối nội dung - Card

Bài 65: Giới thiệu cách thiết kế khối nội dung - Card

Bài 66: Quy chuẩn thiết kế cho phần nội dung

Phần 19: Thực hành thiết kế khối nội dung

Bài 67: Thiết kế khối nội dung phần thực hành

Bài 68: Hoàn thiện thiết kế khối nội dung

Bài 69: Thiết kế card mở rộng theo thông số material

Bài 70: Thiết kế text cho khối nội dung

Phần 20: Giới thiệu và thực hành đối tượng UI Banner

Bài 71: Hoàn thiện thiết kế khối nội dung

Bài 72: Giới thiệu Banner và cách sử dụng banner

Bài 73: Bài tập thiết kế Banner cơ bản

Bài 74: Bài tập thiết kế Banner loại 3

Bài 75: Cách thiết kế tuỳ biến dựa trên Material Design

Phần 21: Giới thiệu và thực hành thiết kế đối tượng UI Chips

Bài 76: Giới thiệu các thiết kế thành phần nhập liệu - Chips

Bài 77: Thiết kế Chips cơ bản

Bài 78: Chữa bài thiết kế Chips có icon

Phần 22: Giới thiệu và thiết kế Dialog theo chuẩn Material Design

Bài 79: Giới thiệu về thiết kế Dialog

Bài 80: Thực hành thiết kế Dialog theo chuẩn

Bài 81: Hoàn thiện Dialog cho giao diện web

Phần 23: Thiết kế UI Appbar

Bài 82: Giới thiệu đối tượng UI Appbar.

Bài 83: Thiết kế thanh Appbar

Bài 84: Thực hành thiết kế Appbar

Bài 85: Tùy biến thanh Appbar

Phần 24: Thiết kế danh sách dữ liệu cơ bản

Bài 86: Giới thiệu cách thiết kế danh sách dữ liệu và các loại danh sách dữ liệu

Bài 87: Thiết kế danh sách cơ bản

Phần 25: Thực hành thiết kế các loại danh sách dữ liệu

Bài 88: Thực hành thiết kế danh sách có ảnh

Bài 89: Thực hành danh sách 2 dòng

Bài 90: Danh sách 2 dòng có overline text

Bài 91: Thiết kế danh sách 3 dòng có avatar

Phần 26: Thiết kế menu Dropdown

Bài 92: Thiết kế menu

Bài 93: Thực hành với menu Dropdown

Phần 27: Thiết kế thanh Navigation Drawer

Bài 94: Thiết kế thanh Navigation Drawer

Bài 95: Thực hành thiết kế thanh Navigation Drawer

Bài 96: Ví dụ về tùy biến menu

Phần 28: Thiết kế menu ngang

Bài 97: Giới thiệu thành phần UI menu ngang

Bài 98: Thiết kế menu tab dạng chữ

Bài 99: Thiết kế menu tab dạng chữ kèm icon

Phần 29: Thiết kế bố cục ảnh

Bài 100: 4 loại bố cục sắp xếp trong Material Design

Bài 101: Thiết kế bố cục ảnh chuẩn

Bài 102: Thiết kế bố cục ảnh dạng free layout

Bài 103: Thiết kế bố cục ảnh dạng free layout nhịp 2

Bài 104: Thiết kế bố cục ảnh nhịp 2 (phần 1)

Bài 105: Thiết kế bố cục ảnh nhịp 2 (phần 2)

Phần 30: Tổng kết khóa

Bài 106: Tổng kết khoá học

 

Nguyễn Đức Việt

Giảng viên Thiết kế

  • Tốt nghiệp đại học Bách Khoa Hà Nội, khóa 49, khoa Công nghệ phần mềm.
  • Giảng viên Thiết kế web tại FPT - Arena.
  • Với 5 năm kinh nghiệm giảng dạy và làm việc trong lĩnh vực thiết kế web, anh đã đào tạo hàng nghìn học viên đã tốt nghiệp và làm việc trong lĩnh vực thiết kế, đặc biệt là thiết kế web chuyên nghiệp.
  • Tham gia rất nhiều dự án web cho FPT và các dự án về thiết kế web dựa trên ngôn ngữ lập trình mã nguồn mở.

Bình luận