THIẾT KẾ GIAO DIỆN WEB

CÁC KÍCH THƯỚC MÀN HÌNH PC/

LAPTOP THÔNG DỤNG
CÁC KÍCH THƯỚC MÀN HÌNH ĐIỆN
THOẠI THÔNG DỤNG
CÁC KÍCH THƯỚC MÀN HÌNH TABLET
THÔNG DỤNG
 THÀNH PHẦN CHÍNH GIAO DIỆN

• Header : phần đầu trang

• Body: phần nội dung trang
• Footer: phần chân trang
 HỆ THỐNG LƯỚI

• Gồm các cột (column)

• Khoảng giữa các cột (gutter)
• Khoảng trống giữa vùng thiết kế (active area)
và cạnh màn hình (margin)
CÁC DẠNG LƯỚI CHÍNH
LƯỚI DẠNG CỘT
LƯỚI DẠNG MODULE
LƯỚI DẠNG THỨ BẬC
 MỘT SỐ LƯU Ý

• Thông thường, số cột dành cho PC, laptop là

12 cột
• Thông thường, số cột dành cho điện thoại là 4
cột
• Thông thường, số cột dành cho tablet/ ipad là
8 cột
SẮP ĐẶT NỘI DUNG VÀ CỘT
ĐỒ THỊ GUTENBERG
 MẪU HÌNH F vs MẪU HÌNH Z

• Nghiên cứu dựa trên cách đọc của con người

• Người đọc ko đọc từng chữ, từng nội dung mà đọc
lướt để lấy thông tin (scan)
• Áp dụng 2 dạng mẫu hình (pattern) giúp nguời đọc dễ
hiểu cấu trúc và thông tin
 RESPONSIVE VÀ MOBILE FIRST

• Trào lưu thiết kế giúp cho trang web được thể

hiện hoàn chỉnh đúng với ý đồ của nhà TK trên
các kích thước màn hình khác nhau mà vẫn
thống nhất trong phong cách, sắp xếp, hiển
thị....
• Mobile first là ưu tiên thiết kế cho di động
trước
Thiết bị PC/ Laptop Mobile/

Kích thước Lớn Nhỏ

Sử dụng Chuột / phím Hành vi

Nội dung Chi tiết Nhanh, gọn

Hoạt động Làm việc Trải nghiệm

 QUY TRÌNH TK

• Phác thảo
• Lofi wireframe
• Hifi wireframe
• Giao diện hoàn chỉnh
 THAM KHẢO
• https://www.nngroup.com/articles/using-
grids-in-interface-designs/
• Hình ảnh từ internet