Khóa Học Thiết Kế Ứng Dụng iOS, Android Theo Chuẩn Material Design Bằng Photoshop

Khóa Học Thiết Kế Ứng Dụng iOS, Android Theo Chuẩn Material Design Bằng Photoshop

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 typography cơ bản .. áp dụng 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, là 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.

Nội dung khóa học

 Phần 1: GIỚI THIỆU

•  Bài 1: Giới thiệu
•  Bài 2: Cách học trong khóa học

 Phần 2: CÀI ĐẶT BỘ PHẦN MỀM

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

 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: Lý thuyết về qui tắc phối màu trong thiết kế
•  Bài 13: Tổng kết lý thuyết phần typo
•  Bài 14: Tổng kết phần font chữ
•  Bài 15: Tổng kết các qui tắc dùng chữ trong Material Design

 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ác 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À QUY TẮC ĐẶT LAYOUT

•  Bài 41: Giới thiệu phần layout
•  Bài 42: Các qui 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ề 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: Qui 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 dạng free layout 6 cột
•  Bài 105: Thiết kế bố cục ảnh nhịp 2

 Phần 30: TỔNG KẾT KHÓA HỌC

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