🌟 Thực Tập Tại Flexisaf — Tuần 1: Nguyên Tắc Thiết Kế
Trong tuần này, tôi đã bắt đầu hành trình thực tập thiết kế tại Flexisaf với việc quay trở lại những nền tảng thiết kế. Ban đầu, tôi nghĩ rằng, “Tôi đã biết những điều này rồi” — nhưng khi tự mình chú ý hơn, tôi đã nhận ra nhiều chi tiết mà hầu hết các nhà thiết kế thường bỏ qua.
✍️ Kiểu Chữ (Typography)
Tôi đã thực sự học được sự khác biệt giữa Kiểu Chữ (một gia đình, như Helvetica) và Font (một phong cách trong gia đình, như Helvetica Light hoặc Oblique). Chúng tôi đã phân tích các loại kiểu chữ chính —
- Serif: truyền thống, thanh lịch, tuyệt vời cho in ấn.
- Sans-serif: sạch sẽ, hiện đại, hoàn hảo cho màn hình.
- Decorative: táo bạo, biểu cảm, nhưng tốt nhất là sử dụng tiết chế.
Điều thực sự ghi dấu ấn với tôi là lựa chọn kiểu chữ phù hợp cho một trang web:
- Xem xét tính cách (vui tươi, nghiêm túc, thân thiện, v.v.)
- Phù hợp với tông giọng
- Ưu tiên tính dễ đọc và hiệu suất trình duyệt
- Tìm cảm hứng → Google Fonts, 1001 Fonts, Typewolf
- Luôn thử nghiệm trước khi quyết định
Tôi cũng phát hiện rằng các khái niệm về khoảng cách mà tôi đã sử dụng một cách vô thức trong nhiều năm thực ra có tên gọi:
- Kerning = khoảng cách giữa hai ký tự
- Tracking = khoảng cách tổng thể trên một từ hoặc khối văn bản
- Leading = khoảng cách thẳng đứng giữa các dòng
🔺 Hình Khối & Toán Tử Boolean
Các hình khối đơn giản (hình chữ nhật, đường thẳng, hình tròn, đa giác, ngôi sao) có thể được kết hợp để tạo ra logo và các yếu tố giao diện người dùng. Các công cụ như toán tử Boolean (Union, Subtract, Intersect, Exclude) giúp dễ dàng kết hợp hoặc cắt hình để tạo ra các thiết kế mới.
🎨 Lý Thuyết Màu Sắc
Tôi đã vượt qua các màu cơ bản và thứ cấp để tìm hiểu về các thành phần xây dựng thực sự:
- Hue = sắc tố nguyên chất
- Shade = hue + đen
- Tint = hue + trắng
- Tone = hue + đen + trắng
- Nhiệt độ màu = ấm, mát, hoặc trung tính
Tôi cũng đã học về các hệ thống màu RGB (màn hình kỹ thuật số), CMYK (in ấn) và HEX (web) — cùng với cách mà tâm lý màu sắc ảnh hưởng đến nhận thức của người dùng:
- Màu Cam → năng động & ấm áp
- Màu Xanh Dương → đáng tin cậy & ổn định
- Màu Xanh Lá → phát triển & chữa lành
- Màu Đen → quyền lực & thanh lịch
Và tất nhiên, quy tắc 60-30-10 cho sự cân bằng:
60% màu chiếm ưu thế → 30% màu thứ cấp → 10% màu nhấn.
🖼 Hình Ảnh
Hình ảnh không phải lúc nào cũng cần thiết, nhưng khi được sử dụng đúng cách, chúng ngay lập tức truyền tải tính cách thương hiệu. Các nguồn tài nguyên như Unsplash và Pixabay giúp dễ dàng tìm thấy hình ảnh miễn phí và chất lượng cao, và các plugin Figma giúp đơn giản hóa quy trình làm việc.
💡 Sản Phẩm Của Tôi: Tôi đã thiết kế một bố cục trang web cơ bản áp dụng những gì tôi đã học được — lựa chọn kiểu chữ một cách cẩn thận cho thứ bậc, sử dụng tâm lý màu sắc, và cấu trúc các yếu tố bằng hình khối và sự cân bằng.
Thật tuyệt khi được củng cố lại những “nền tảng” với những hiểu biết mới — bởi vì trong thiết kế, những điều cơ bản là những gì làm cho tất cả mọi thứ khác tỏa sáng.
Thực Hành Tốt Nhất
- Lựa chọn kiểu chữ: Nên lựa chọn kiểu chữ phù hợp với thông điệp của thương hiệu và đối tượng mục tiêu.
- Sử dụng màu sắc hợp lý: Đảm bảo màu sắc không làm mất đi khả năng đọc và tạo cảm giác thoải mái cho người dùng.
- Kiểm tra hình ảnh: Đảm bảo hình ảnh được sử dụng có chất lượng cao và phù hợp với ngữ cảnh.
Những Lỗi Thường Gặp
- Lạm dụng kiểu chữ: Sử dụng quá nhiều kiểu chữ có thể làm rối mắt người xem.
- Thiếu cân bằng màu sắc: Việc không tuân theo quy tắc 60-30-10 có thể dẫn đến sự thiếu cân bằng trong thiết kế.
- Hình ảnh không liên quan: Sử dụng hình ảnh không phù hợp có thể làm giảm giá trị của thương hiệu.
Mẹo Tối Ưu Hiệu Suất
- Giảm kích thước hình ảnh: Sử dụng hình ảnh nén để giảm thời gian tải trang.
- Sử dụng CSS thay vì hình ảnh: Khi có thể, hãy sử dụng CSS để tạo ra các yếu tố hình ảnh thay vì sử dụng hình ảnh thật.
- Tối ưu hóa kiểu chữ: Sử dụng web fonts mà không làm giảm hiệu suất tải trang.
Khắc Phục Sự Cố
- Kiểu chữ không hiển thị: Kiểm tra xem font có được tải đúng không và có phải là font hợp lệ không.
- Màu sắc hiển thị sai: Đảm bảo rằng các giá trị màu sắc được sử dụng đúng theo hệ màu tương ứng.
- Hình ảnh không tải được: Kiểm tra đường dẫn hình ảnh và định dạng file để đảm bảo tính khả dụng.
Câu Hỏi Thường Gặp (FAQ)
1. Làm thế nào để chọn kiểu chữ phù hợp cho website?
Hãy xem xét tính cách của thương hiệu và đối tượng mục tiêu, cũng như đảm bảo tính dễ đọc.
2. Quy tắc 60-30-10 là gì?
Đây là quy tắc giúp tạo ra sự cân bằng trong thiết kế màu sắc: 60% màu chính, 30% màu phụ, 10% màu nhấn.
3. Tại sao hình ảnh lại quan trọng trong thiết kế?
Hình ảnh giúp truyền tải thông điệp và tính cách thương hiệu một cách nhanh chóng và hiệu quả.
