Chào mừng bạn đến với Ngày 11! Đây là thời điểm bạn thực hiện một bước tiến quan trọng: Chuyển từ việc “vẽ từng hình riêng lẻ” sang Tư duy hệ thống (Design System). Trong thiết kế chuyên nghiệp, đặc biệt là UI/UX hay thiết kế App, cái đẹp không nằm ở sự cầu kỳ của từng chi tiết mà nằm ở Sự nhất quán (Consistency). Bài học hôm nay sẽ giúp bạn tạo ra những bộ icon chuẩn mực, trông như được thực hiện bởi một studio chuyên nghiệp.
1. Icon System là gì? Tại sao tính đồng bộ lại quan trọng? (15 phút)
Icon System là một tập hợp các biểu tượng được thiết kế dựa trên một bộ quy tắc chung. Thay vì vẽ mỗi cái một kiểu, designer phải đảm bảo mọi icon trong bộ đều mang lại “cảm giác thị giác” giống nhau.
- Tính đồng bộ thể hiện qua:
- Độ dày nét (Stroke): Tất cả icon đều dùng chung một thông số (ví dụ: 2px).
- Góc bo (Corner Radius): Nếu một icon bo tròn, tất cả phải bo tròn cùng tỷ lệ.
- Mức độ chi tiết: Không cái nào quá phức tạp, không cái nào quá đơn giản so với tổng thể.
- Ứng dụng: Bạn sẽ thấy chúng hiện diện khắp nơi từ menu ứng dụng điện thoại đến các bảng chỉ dẫn trong trung tâm thương mại.
2. Lựa chọn phong cách thiết kế (20 phút)
Trước khi đặt bút vẽ, bạn cần chọn 1 trong 2 phong cách phổ biến nhất hiện nay:
- Outline Style (Nét viền): Sử dụng các đường nét thanh mảnh, hiện đại. Đây là lựa chọn hàng đầu cho các ứng dụng di động vì sự tinh tế và dễ nhìn.
- Filled Style (Tô khối): Sử dụng các mảng màu đậm, vững chãi. Phong cách này thường được dùng trên mạng xã hội hoặc các nút bấm cần sự nhấn mạnh rõ rệt.
Gợi ý: Để luyện tư duy hệ thống hiệu quả nhất, bạn nên bắt đầu với Outline Style.
3. Các quy tắc “vàng” để giữ tính nhất quán (25 phút)
Để bộ icon của bạn không bị “lệch pha”, hãy tuân thủ nghiêm ngặt các thông số sau:
- Stroke Weight: Cố định độ dày nét vẽ (Ví dụ: Luôn là 3px). Đừng để icon này nét mảnh, icon kia nét đậm.
- Bounding Box (Khung cố định): Luôn vẽ icon trong một khung vuông chuẩn (Ví dụ: 24×24 px hoặc 48×48 px). Điều này giúp khi xuất file, các icon có kích thước thực tế bằng nhau.
- Góc bo (Rounding): Thống nhất việc sử dụng góc vuông sắc cạnh (Sharp) hay góc bo mềm mại (Rounded).
4. Bài tập chính: Thiết kế bộ 4 Icon cho App (50 phút)
Hãy chọn một trong hai chủ đề dưới đây để thực hành xây dựng hệ thống:
Chủ đề A: App Quán Cafe ☕
- Ly Cafe: Đại diện cho sản phẩm.
- Hạt Cafe: Đại diện cho nguyên liệu/nguồn gốc.
- Menu: Danh mục sản phẩm.
- Địa điểm: Tìm cửa hàng gần nhất.
Chủ đề B: App Mạng xã hội 📱
- Home: Trang chủ.
- Search: Tìm kiếm.
- Heart: Yêu thích/Tương tác.
- Profile: Thông tin cá nhân.
Quy trình thực hiện:
- B1: Thiết lập Grid cố định (ví dụ 48×48 px).
- B2: Vẽ icon đầu tiên thật chuẩn để làm “mẫu” về độ dày nét và phong cách.
- B3: Copy các thông số từ icon đầu tiên sang 3 icon còn lại.
- B4: Kiểm tra tổng thể xem có icon nào nhìn “nặng” hoặc “nhẹ” hơn các cái khác không.
5. Mini Challenge – Kiểm tra độ linh hoạt (15 phút)
Nhiệm vụ: Sau khi xong bộ 4 icon, hãy vẽ thêm 1 icon “bonus” cùng bộ đó.
- Thử nghiệm: Hãy thu nhỏ cả bộ icon xuống 50%.
- Mục tiêu: Nếu ở kích thước nhỏ mà bạn vẫn nhận diện rõ từng icon thì thiết kế của bạn đã thành công.
6. Checklist hoàn thành Ngày 11
- [ ] Hiểu rõ khái niệm Design System và tính đồng bộ.
- [ ] Chọn và duy trì một phong cách duy nhất (Outline hoặc Filled).
- [ ] Tất cả icon có độ dày nét (Stroke) bằng nhau tuyệt đối.
- [ ] Các icon được đặt gọn gàng trong cùng một kích thước khung (Bounding box).
- [ ] Hoàn thành bộ 4 icon có cảm giác thị giác tương đồng.
⚡ Mẹo như Designer chuyên nghiệp: Đừng bao giờ ước lượng bằng mắt. Hãy dùng các thông số chính xác trong bảng Transform và Stroke. Designer giỏi không chỉ vẽ đẹp, họ vẽ đúng quy tắc.
Hoàn thành Ngày 11, bạn đã bắt đầu chạm ngõ tư duy của một UI/UX Designer. Hãy chuẩn bị cho Ngày 12: Infographic và trình bày thông tin – Cách biến những dữ liệu khô khan thành những bản thiết kế marketing hấp dẫn!
Để lại một bình luận