Thiết kế web dải màu chia trang thành các dải nhạt nằm ngang, mỗi dải giữ một nhóm nội dung để khách không bị lẫn thông tin. Phong cách Dải màu nhẹ nhàng hợp với trang nhiều nội dung nhưng cần giữ tổng thể mềm, sáng và dễ theo dõi.
Trước khi chọn màu, hãy vẽ bản đồ trang: từ trên xuống có những dải nào, mỗi dải chứa gì, sang dải sau bằng cách nào. Mẫu tham chiếu nằm trong thư viện giao diện Mạnh An AI.
Bản đồ dải màu của mẫu Kết Nối Tri Thức gồm những gì?
Là một ví dụ thiết kế web dải màu, mẫu Kết Nối Tri Thức có sáu dải nội dung dưới đầu trang: xanh nhạt, hồng đào, tím nhạt, trắng, xanh nhạt và đào. Dưới cùng là chân trang xanh than đậm, nơi duy nhất có nền tối.
Mỗi dải có một nhãn nhỏ viết hoa và một tiêu đề lớn, nên chỉ cần lướt mắt là biết mình đang ở đâu. Màu nhãn còn đổi theo nền: cam trên dải đào, tím trên dải tím, xanh trên dải xanh. Nút cam thì giữ nguyên ở mọi dải và là màu nhấn duy nhất.
Các dải đổi màu ở một mép thẳng, không có đường cong trang trí. Chữ mô tả xám nhỏ trong ô trên dải tím là chỗ nhìn nhạt nhất, cần đo thật khi làm. Đây là nhận xét từ ảnh tĩnh, chưa kiểm tra trên trang chạy thật.
Đi từ trên xuống, mỗi dải làm việc gì?
Đi từ trên xuống, mỗi dải trả lời một câu hỏi của khách, theo thứ tự từ “đây là gì” tới “làm gì tiếp theo”. Mẫu gốc đi theo năm phần sau, và bạn có thể đổi nội dung theo ngành của mình.
Phần mở đầu: màu mát để khách làm quen
Dải đầu chứa tiêu đề, ảnh nhóm học viên và một nút chính. Mẫu gốc chọn xanh rất nhạt, nên ảnh và nút cam nổi hơn nền. Sang dải sau, chỉ cần đổi sang một màu ấm, vì mắt thấy ngay sự chuyển nhóm.
Phần khóa học: thẻ trắng trên nền ấm
Dải thứ hai bày ba khóa học trên ba thẻ trắng. Nền hồng đào làm thẻ trắng nổi lên mà không cần bóng đổ đậm. Nên giữ một loại thông tin ở đây, đừng trộn khóa học với lý do chọn.
Phần hỗ trợ học viên: chia ba để đổi nhịp
Dải tím nhạt đổi bố cục thành chữ bên trái, ảnh ở giữa và bốn ô lợi ích bên phải. Đổi cả màu lẫn bố cục giúp người xem cảm thấy đã sang một phần khác. Đây cũng là nơi hợp để nói về con người phía sau dịch vụ.
Phần nền trắng: chỗ nghỉ giữa trang
Mẫu gốc để phần câu chuyện học viên trên nền trắng, giữa hai dải màu. Khoảng nghỉ này quan trọng, vì nếu dải nào cũng có màu thì không dải nào còn nổi. Khi áp dụng, nên thay lời khách mẫu bằng dẫn chứng thật mà doanh nghiệp đã có.
Các bước và lời mời: màu lặp lại để khép trang
Xanh nhạt quay lại ở bốn bước, rồi đào quay lại ở khối đăng ký, nên trang có cảm giác khép vòng thay vì càng xuống càng thêm màu. Chỉ dải cuối có biểu mẫu ba ô và nút cam lớn, nên đích đến rõ ràng.
Làm sao để chuyển dải êm mà vẫn rõ?
Hai dải kề nhau nên khác hẳn về sắc nhưng gần nhau về độ sáng, như xanh nhạt cạnh đào nhạt. Nhờ vậy mắt thấy ranh giới mà không bị giật.
Nếu hai dải kề nhau chỉ lệch một chút cùng tông, màn hình kém có thể làm chúng hòa vào nhau và mất ranh giới. Nếu một dải đậm hẳn lên, dải đó sẽ thành điểm nặng nhất trang, nên chỉ để dành cho chân trang hoặc lời mời cuối. Bảng màu cũng nên điều chỉnh theo nhận diện thương hiệu, thay vì lấy nguyên các sắc của mẫu.
Nền nhạt không tự làm chữ dễ đọc. Tính theo tiêu chí tương phản tối thiểu của WCAG, chữ xám đề xuất #8A9AA5 trên nền xanh nhạt #E3F2FB chỉ đạt khoảng 2,53:1, thấp hơn mức 4,5:1. Đổi sang #4A5560 được khoảng 6,65:1. Đây là mã để tham khảo, cần kiểm tra lại trên từng dải vì mỗi dải một nền.
Bài tập tô màu trên giấy: làm thế nào?
Hãy vẽ bản đồ trang lên một tờ giấy dọc và tô màu bằng bút màu trước khi mở bất kỳ phần mềm nào. Việc này chỉ mất ít phút và lộ ngay các lỗi về nhịp.
- Kẻ các hàng ngang theo số nhóm nội dung, mỗi hàng ghi một câu hỏi của khách.
- Tô chỉ ba màu nhạt, để trắng ít nhất một hàng ở khoảng giữa trang.
- Đặt một chấm đậm vào những chỗ có nút, và chỉ dùng một màu cho chấm đó.
- Đặt tờ giấy ra xa một cánh tay, nheo mắt nhìn: nếu không phân biệt được hai hàng kề nhau, đổi màu một hàng.
- Gập tờ giấy theo chiều dọc để mô phỏng điện thoại, rồi xem hàng nào quá dài và cần tách đôi.
Trên điện thoại, mỗi dải sẽ cao hơn nhiều so với màn hình lớn, nên khách nhìn một màu lâu hơn. Hãy giữ tiêu đề và nhãn ở đầu mỗi dải để họ luôn biết mình đang ở nhóm nào.
Ba ngành vẽ bản đồ dải khác nhau thế nào?
Khi làm thiết kế web dải màu, phòng khám dùng dải để chia việc cha mẹ cần biết, văn phòng tư vấn dùng dải để tạo sự riêng tư, còn cửa hàng em bé dùng dải để chia cách chọn đồ. Cả ba đều là thương hiệu giả định, số 0987.654.321 chỉ là số ví dụ, không phải dự án đã bàn giao.
Phòng khám nhi: tiêu đề nằm đầu mỗi dải
Phòng khám giả định Nhi An đặt tiêu đề lớn ở góc trái đầu mỗi dải, nên khi lướt nhanh, các tiêu đề đọc như một mục lục. Dải bạc hà dặn bốn việc trước khi đến, dải vàng kem giới thiệu bốn bác sĩ giả định, dải tím nối bốn bước của một lượt khám. Các bác sĩ trong ảnh chỉ là minh họa.
Tư vấn hôn nhân gia đình: dải trầm hơn, chữ có chân
Văn phòng giả định Cùng Nhà dùng hồng phấn, xanh lá nhạt, xanh xám và kem, cùng tiêu đề căn giữa kiểu chữ có chân. Dải hồng hỏi “Bạn đang ở đâu?” bằng bốn tình huống, còn dải kem chỉ có bốn điều về sự riêng tư. Dải tím mận cuối cùng là mảng đậm duy nhất trước chân trang, mời bắt đầu bằng một cuộc gọi ngắn.
Đồ dùng em bé: dải chia theo cách khách chọn
Cửa hàng giả định Mầm Xinh mở bằng các đồ sơ sinh trên những đĩa màu pastel cạnh ảnh em bé ngủ, rồi sáu nhóm đồ trong vòng tròn. Dải xanh chia theo bốn mốc từ mới sinh tới tập đi, dải xanh lá nói về cotton, muslin và gỗ, còn dải hồng có bốn sản phẩm chỉ ghi tên và cách dùng. Dải đào là danh sách sáu thứ cần chuẩn bị trước khi sinh, cạnh ảnh chiếc túi đã xếp sẵn.
12 ngành khác chia dải theo cách nào?
Ngành nhiều dịch vụ chia dải theo nhóm dịch vụ, ngành cần tin cậy chia theo câu hỏi của khách, còn ngành bán đồ chia theo cách chọn. Dưới đây là 12 ngành khác cùng cách chia gợi ý.
- Trung tâm tiếng Anh: theo lứa tuổi học viên.
- Nha khoa gia đình: theo câu hỏi trước, trong và sau khi khám.
- Vật lý trị liệu: theo vùng cơ thể cần tập, nội dung do chuyên môn soát.
- Trường mầm non: theo một ngày của trẻ.
- Chăm sóc người cao tuổi: theo loại hỗ trợ tại nhà.
- Tư vấn du học: theo từng giai đoạn hồ sơ.
- Công ty bảo hiểm: theo nhóm người được bảo vệ.
- Hiệp hội ngành nghề: theo đối tượng hội viên.
- Mỹ phẩm thiên nhiên: theo các bước chăm sóc da.
- Đồ gốm gia dụng: theo không gian dùng.
- Tiệm bánh sinh nhật: theo dịp đặt bánh.
- Phần mềm quản lý nhỏ: theo từng bộ phận sử dụng.
Khi nào không nên chọn thiết kế web dải màu?
Không nên chọn thiết kế web dải màu khi trang chỉ có ít nội dung, hoặc thương hiệu cần cảm giác mạnh và dứt khoát. Ít nhóm thông tin thì màu trở thành trang trí, còn sắc pastel dễ làm một thương hiệu công nghiệp mất đi sức nặng.
Nếu muốn sự mềm mại nằm ở hình khối, lối đường cong, mềm mại đáng để so sánh. Khi toàn bộ nội dung đặt trên một đường cuộn liền, hãy xem kiểu một trang cuộn. Còn khi nội dung ít và cần khoảng trống, phong cách tối giản, trắng thoáng sẽ gọn hơn.
Câu hỏi thường gặp về thiết kế web dải màu
Bao nhiêu màu là đủ cho một trang?
Bắt đầu với ba màu nhạt lặp lại, thêm trắng và một màu nhấn cho nút. Mẫu gốc cũng lặp lại xanh và đào thay vì dùng một màu mới cho mỗi dải.
Ảnh có màu thì đặt trên dải nào?
Hãy chọn dải có sắc gần với tông ảnh hoặc đặt ảnh trong thẻ trắng. Nếu ảnh và nền cùng rực, cả hai sẽ cạnh tranh nhau.
Dải màu có làm trang tải chậm không?
Bản thân nền màu chỉ là một dòng CSS nên rất nhẹ. Tốc độ thường phụ thuộc vào ảnh, vì vậy nên nén ảnh trong từng dải trước khi tải lên.
Nên làm gì trước khi chọn thiết kế web dải màu?
Hãy làm bài tập tô màu trên giấy, rồi đối chiếu với nội dung bạn thực sự có. Hàng nào chưa có nội dung thật thì bỏ, vì một dải màu đẹp không bù được phần thông tin còn thiếu.
Khi đã có tờ giấy tô màu, bạn có thể đọc các bước Mạnh An AI thiết kế và bàn giao website và xem bảng giá thiết kế website AI. Mạnh An AI phục vụ khách hàng trên toàn quốc; bạn có thể gửi ảnh chụp bản đồ dải để trao đổi trước khi bắt đầu.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
