Khóa học

Nền Tảng Về UI Design

Khóa học cung cấp vững vàng nhất về tư duy UI chuẩn bị cho quá trình bước ra thực tiễn

Bao gồm

Các nguyên tắc thẩm mỹ cơ bảnLuật lệ trong thiết kế UICách sắp xếp từ color, typography, elementsCác bước teamwork hoặc đóng gói tài liệu

Thông tin khoá học

Nền Tảng Về UI Design

Khóa học UI Foundation - Nền Tảng Về UI Design là khóa học thiết lập nền tảng thẩm mỹ, chuẩn bị cho bạn tư duy của một visual UI Designer. Đây là lớp thứ 2 trong chuỗi lộ trình toàn năng về UI/UX Design tại TELOS Academy

Lợi ích khóa học mang lại:

Hiểu và ứng dụng đúng các yếu tố cốt lõi như màu sắc, typography, grid, khoảng cách
Nắm nguyên tắc thẩm mỹ và tư duy logic trong từng quyết định thiết kế
Làm việc bài bản với Developer, hiểu cách kiểm tra và bàn giao thiết kế
Biết cách ghi chép, lưu trữ, cập nhật thông tin để luôn phát triển trong nghề
Thực hành trên đề tài thật – học từ phản hồi thật

Những tài nguyên tặng kèm:

Các tài liệu về UI guide, quy luật và mẹo vặt thiết kế cập nhật tức thời
Tài nguyên tham khảo và thư viện phân loại các nguồn cảm hứng độc nhất từ giảng viên
Bộ tài nguyên design toobox hỗ trợ học viên gia tăng hiệu suất thiết kế

Đăng ký khóa học UI Design Foundation - Nền Tảng Về UI Design tại TELOS Academy - Trung tâm chuyên đào tạo về UI/UX với phổ kiến thức trải dài từ nhập môn cho đến chuyên sâu các lĩnh vực bên trong và đang phát triển mở rộng ra các nhóm khóa học có liên quan.

Giảng viên

KHUÊ ĐINH

Là UI/UX designer tại Samasu Digital & Design Mentor tại AllyBee với hơn 8 năm kinh nghiệm trong ngành

Học phí

3,828,500 ₫ 4,030,000 ₫

Ngày khai giảng

06/10 (thứ 3 & 5)

Thời gian học

19h-21h

Chọn hình thức học

Online

Nội dung khóa học

Trình độ

CƠ BẢN

Yêu cầu
đầu vào

KHÔNG

Thời lượng

08 BUỔI

Giấy
chứng nhận

CÓ

01. Giới thiệu chung

Giới thiệu về cấu trúc khóa học và một số thông tin lưu ý
Phương pháp tự học để có thể tiếp tục phát triển trong ngành UI design
- Đánh giá một design
- Copy work như một phương pháp để luyện tập về design
- Các nguồn tìm cảm hứng thiết kế
Phương pháp ghi chú, lưu trữ thông tin khoa học để không bị bí ý tưởng khi bắt đầu một dự án mới
Giới thiệu sách, tài liệu và một số khóa học khác dùng để tham khảo
Bắt đầu khóa học với một số thông tin cơ bản cần nắm khi design trên môi trường digital

02. Typography

Tầm quan trọng của typography đối với UI Design
Các yếu tố setting căn bản đối với typography
- Font size
- Line height
- Line length
- Text Align
Cách chọn font và kết hợp font để phù hợp với từng thiết kế
Typography sử dụng trong design table
Typography sử dụng như một yếu tố tăng tính thẩm mỹ cho UI design
- Smallcap
- Dropcap
- Ruler
Các nguồn tư liệu để nâng cao khả năng về typesetting
Thực hành design một screen thiên về nội dung (blog page, content page...) sử dụng những kiến thức đã học trong buổi 2

03. Colors

3 hệ màu sử dụng trong UI design
- RGB → HSB, HSL, Hex
- CIELAB or Lab* → LCh
Contrast trong UI design
Các cách để tạo nên một palette màu sử dụng trong UI design
- Modify thủ công
- Sử dụng tool
Semantic color system trong Figma
Gradient
- Easing Gradient
- Modify gradient
Tìm hiểu về Darkmode
Thực hành Design palette màu sử dụng cho một UI design tự chọn, cho 2 phiên bản: light mode và dark mode.

04. Một số nguyên tắc cần biết trong UI Design

Qui trình design
Box model
Grid trong UI
Alignment trong UI
Space system
Làm việc với hình ảnh
- Thay đổi màu ảnh
- Cắt ảnh
- Cách chọn ảnh
Thực hành Phân tích layout một website dựa theo các kiến thức đã học

05. Components

Các component thường gặp trong UI
- Button
- Form
- Card
- Modal
- Menu
Slot technique ứng dụng trong design table
Thực hành Research các component thường gặp trong một UI design và design các component đó

06. UI Library

Giới thiệu cấu trúc một UI Library
Cách tạo document cho một UI Library trong Figma
Giới thiệu một số plugin, tips trick phụ trợ cho việc design một UI Library
Thực hành hoàn thiện hệ thống UI Library với các component đã research ở buổi 5

07. Làm việc với Developer

Tại sao công việc của designer không chỉ là design
Những kiến thức và kỹ năng cần có để làm việc tốt với developer
Sử dụng Chrome Developer Tool + Visbug để kiểm tra layout website
Sử dụng Chrome Developer Tool hoặc Visbug để so sánh giữa design đã làm ở buổi 1 với trang web thực tế.
Học viên trình bày các thắc mắc liên quan đến bài cuối khóa.

08. Tổng kết

Bài cuối khóa
Trình bày sản phẩm đã chọn ở buổi 1
Đánh giá và đề xuất hoàn thiện

Kết quả đầu ra

kiến thức cơ bản

Những nền tảng căn bản của UI Design: màu sắc, hệ thống chữ, hệ thống lưới, khoảng cách. Cho đến cung cấp những thành phần hay gặp trong thiết kế UI và những quy chuẩn chung của chúng.

căn nguyên thẩm mỹ

Biết được lý do đằng sau mỗi quyết định design để làm tốt trong mỗi một thành phần design và đồng thời để thuyết phục mọi người tin vào thiết kế của mình.

phương pháp làm việc

Phương pháp cập nhật và lưu trữ kiến thức, tìm cảm hứng hiệu quả. Phương pháp làm việc hiệu quả với developer.

Designer đã biết Figma

Người đã biết dùng công cụ Figma nhưng chưa được đào tạo bài bản về nguyên lý thị giác.

Sản phẩm thiết kế cho portfolio bị rập khuôn, đại trà và thiếu điểm nhấn riêng.
Phối màu, chọn font và bố cục hoàn toàn theo bản năng dẫn đến tình trạng rối mắt, mất cân đối.
Loay hoay không biết cách tự nhận xét, đánh giá và không biết phải sửa từ đâu để thiết kế chuyên nghiệp hơn.

Người muốn chuyển ngành

Bạn đang học hoặc đã có nền tảng ở một ngành khác và muốn chuyển ngành sang UI/UX Design.

Cảm thấy ngợp trước các sản phẩm UI hiện đại và không biết bắt đầu từ đâu để tạo ra giao diện chỉn chu.
Gặp khó khăn trong việc ứng dụng các nguyên tắc thiết kế cốt lõi vào dự án thực tế để đưa vào portfolio xin việc.
Thiếu tư duy hệ thống trong việc kết hợp màu sắc, typography và layout sao cho vừa đẹp mắt vừa đảm bảo tính khả thi.