Buổi 3 - Layout & Grid (I)

Lớp học UIF

Layout & Grid (I)

Buổi 3

Buổi 1: Buổi 1 - Introduction to UIF

Buổi 6: Typography (II)

Buổi 2: UI Component

Buổi 7: Color (I)

Buổi 3: Layout & Grid (I)

Buổi 8: Color (II)

Buổi 4: Layout & Grid (II)

Buổi 9: Review & Quiz Test Chia sẻ lộ trình phát triển

Buổi 5: Typography (I) Quiz Test

Buổi 10: Practicing Test

1. PRINCIPLES OF DESIGN

Balance

Contrast

Emphasis

CÂN BẰNG

TƯƠNG PHẢN

NHẤN MẠNH

Hierarchy

Alignment

Visual Flow

PHÂN CẤP

CĂN GIÓNG

DÒNG CHẢY THỊ GIÁC

Unity

Repetition

Consistency

LIÊN KẾT

SỰ LẶP LẠI

ĐỒNG NHẤT

1. PRINCIPLES OF DESIGN Alignment

1. PRINCIPLES OF DESIGN

Khái niệm

Alignment

Alignment Căn chỉnh

“Căn chỉnh đề cập đến việc sắp xếp các phần ở trên cùng, dưới cùng, hai bên hoặc chính giữa văn bản hay các yếu tố hình ảnh trên một trang.“ Jacci Howard, Bear, Lifewire

1. PRINCIPLES OF DESIGN

Áp dụng

Alignment

Căn dọc

Căn dọc trên/dưới

Căn dọc theo tâm

Khi tâm, điểm trên và dưới cùng

Khi chiều cao của hai hoặc nhiều

Trong trường hợp chiều cao của

của các thành phần thẳng hàng

yếu tố khác nhau tương đối, có thể

các phần tử không quá khác biệt,

trên một đường ngang vô hình.

căn chiều dọc theo đỉnh hoặc đáy

có thể sắp xếp chúng theo tâm

của chúng.

của chiều dọc.

1. PRINCIPLES OF DESIGN

Áp dụng

Alignment

Căn ngang

Căn lề trái & phải

Căn ngang theo tâm

Khi tâm, bên trái và / hoặc bên

Cách dễ nhất để đảm bảo căn lề

Trường hợp sử dụng căn ngang

phải của các phần tử thẳng hàng

trái và phải là thiết lập độ rộng tối

theo tâm phổ biến nhất là văn bản

trên một đường thẳng đứng vô

đa cho tất cả nội dung ngay từ đầu.

kết hợp với Nút kêu gọi hành

hình.

động (Call to Action)

1. PRINCIPLES OF DESIGN

Áp dụng

Alignment

Căn theo cạnh Căn chỉnh theo cạnh xảy ra khi chúng ta tạo liên kết dọc và ngang từ một hoặc nhiều góc.

Căn theo “mắt” Do trọng lượng thị giác của 1 đối tượng phân bổ không đồng đều, nên phải dùng mắt để căn chỉnh sao cho phù hợp nhất.

1. PRINCIPLES OF DESIGN Alignment

Áp dụng

2. GRID Giới thiệu

Grid Lưới

là một cấu trúc bao gồm một loạt các đường ngang và dọc đan xen, được sử dụng để sắp xếp nội dung.

Khái niệm

2. GRID

Phân loại

Giới thiệu

Hard Grid Fixed Grid

Fluid Grid

Responsive Grid

2. GRID

Phân loại

Giới thiệu

Hard Grid Fixed Grid

Fluid Grid

Responsive Grid

2. GRID

Phân loại

Giới thiệu

Hard Grid Fixed Grid

Fluid Grid

Responsive Grid

2. GRID

Phân loại

Giới thiệu

Hard Grid Fixed Grid

Fluid Grid

Responsive Grid

2. GRID Giới thiệu

Hard Grid

Phân loại

2. GRID Giới thiệu

Phân loại

2. GRID Giới thiệu

Soft Grid Sử dụng đơn vị cơ sở và những bội số của nó.

Phân loại

2. GRID Giới thiệu

Base Unit Đơn vị cơ sở

là 1 đơn vị số, xác định giá trị cho mọi phép đo về kích thước, khoảng cách, v.v… với kết quả là bội số của nó.

Phân loại

2. GRID Lợi ích

Ưu điểm - Giúp tổng thể thiết kế có sự thống nhất chặt chẽ hơn - Cải thiện khả năng hiểu thiết kế - Đẩy nhanh quá trình thiết kế - Làm cho thiết kế dễ dàng sửa đổi và sử dụng lại - Giúp thiết kế đáp ứng (Responsive) sang nhiều kích thước

Nhược điểm - “Hệ thống lưới hơi thiếu tự nhiên và hạn chế sự sáng tạo của người thiết kế?!”