NAS\NASPC
35 lines
4.1 KiB
Markdown
35 lines
4.1 KiB
Markdown
# Phân Tích Cách Phối Màu (Color Scheme) Của Trang Chủ UMass Amherst
|
|
|
|
Dựa vào giao diện trang chủ của Đại học UMass Amherst, trang web này sử dụng một phong cách phối màu **độ tương phản cao (High-contrast), hiện đại và đậm chất thương hiệu**.
|
|
|
|
Dưới đây là phân tích chi tiết về cách họ sử dụng màu sắc:
|
|
|
|
## 1. Màu thương hiệu chủ đạo (Primary Brand Color): Đỏ sậm (Maroon)
|
|
* **Màu Đỏ sậm (Maroon/Dark Red)** là màu nhận diện thương hiệu cốt lõi của trường.
|
|
* **Cách sử dụng:** Nó được dùng vô cùng chiến lược để điều hướng sự chú ý của người dùng. Bạn có thể thấy màu này xuất hiện ở:
|
|
* Logo ở góc trái.
|
|
* Thanh điều hướng (Navigation bar) dưới banner chính.
|
|
* Các nút bấm quan trọng (Call-to-Action) như: nút tìm kiếm (kính lúp), nút "LEARN MORE", và các nút "APPLY TODAY", "VISIT", "DONATE".
|
|
* Các điểm nhấn chữ (Typography accents): chữ "YOUR FUTURE", số "#1", "251", "Top 50" và icon ngày tháng trong mục Sự kiện (Events).
|
|
* **Hiệu ứng:** Màu đỏ sậm mang lại cảm giác truyền thống, uy tín (đặc trưng của ngành giáo dục), nhưng khi đặt trên nền tối nó lại tạo ra sự năng động và nổi bật.
|
|
|
|
## 2. Các màu nền tạo nhịp điệu (Rhythm & Contrast): Trắng, Đen và Xám nhạt
|
|
Trang web không dùng một màu nền duy nhất mà chia thành các dải ngang (color blocks) đan xen nhau để phân tách nội dung rõ ràng, giúp mắt không bị mỏi khi cuộn trang dài:
|
|
* **Màu Trắng (White):** Được dùng làm nền cho các phần chứa nhiều chữ hoặc số liệu (phần thống kê #1, Apply Today, News & Events). Nền trắng giúp văn bản màu đen dễ đọc nhất, tạo cảm giác không gian mở, thoáng đãng (negative space).
|
|
* **Màu Đen / Xám đen rất đậm (Black / Dark Charcoal):** Được sử dụng cho các khối nội dung lớn (phần "WHAT'S LIFE LIKE AT UMASS?" và "BLAZE YOUR OWN TRAIL") và chân trang (Footer). Việc dùng nền đen xen kẽ nền trắng tạo ra sự tương phản cực mạnh, mang lại cảm giác mạnh mẽ, hiện đại và cao cấp (premium).
|
|
* **Màu Xám nhạt (Light Gray):** Xuất hiện ở phần "I'M LOOKING FOR...". Đây là một màu chuyển tiếp tinh tế. Thay vì chuyển gắt từ Trắng sang Đen, màu xám nhạt giúp phân tách phần này với phần nền trắng bên trên mà không làm tổng thể bị nặng nề.
|
|
|
|
## 3. Màu sắc văn bản (Typography)
|
|
* Để đảm bảo **khả năng truy cập (Accessibility - WCAG)**, trang web tuân thủ nghiêm ngặt nguyên tắc tương phản:
|
|
* Văn bản màu **Đen** hoặc **Xám đậm** đặt trên nền Trắng/Xám nhạt.
|
|
* Văn bản màu **Trắng** đặt trên nền Đen/Đỏ sậm.
|
|
* Họ không dùng các màu sắc sặc sỡ cho chữ thường, giữ cho tổng thể rất chuyên nghiệp và dễ đọc.
|
|
|
|
## 4. Màu sắc bổ trợ từ Hình ảnh (Photography)
|
|
* Vì bộ màu UI cốt lõi rất trung tính và sắc nét (Đỏ - Đen - Trắng), màu sắc rực rỡ và sinh động của trang web chủ yếu đến từ **hình ảnh và video**.
|
|
* Màu xanh lá cây của cây cối, màu xanh dương của bầu trời/nước, và màu da ấm áp của sinh viên trong các bức ảnh giúp trung hòa lại sự khô cứng của các khối màu phẳng, mang lại sức sống và sự thân thiện cho giao diện.
|
|
|
|
---
|
|
**Tổng kết:**
|
|
Cách phối màu này được gọi là **Block Color** kết hợp **Monochromatic Accents** (Dùng khối màu lớn xen kẽ và nhấn bằng một màu thương hiệu duy nhất). Thiết kế này rất hiệu quả cho các tổ chức lớn, vừa giữ được sự sang trọng, uy tín, vừa đảm bảo tính hiện đại và khả năng điều hướng người dùng (UX) cực kỳ tốt.
|