Moodboard là gì và dùng để làm gì trong thiết kế web
Một chủ spa ở Hà Nội khi gặp designer lần đầu đã nói: “Tôi muốn web nhìn sang trọng, tối màu, có chút hiện đại nhưng vẫn ấm. Không quá lạnh kiểu công nghệ.” Designer gật đầu, nhưng trong đầu đang phân vân: “Tối màu” là tối cỡ nào? “Ấm” nghĩa là màu nâu đất hay màu vàng? “Hiện đại” theo phong cách nào?
Đây là bài toán giao tiếp thẩm mỹ, và moodboard là gì nếu không phải công cụ giải bài toán đó. Moodboard (bảng cảm hứng thị giác) là tập hợp hình ảnh, màu sắc, kiểu chữ và texture được chọn lọc và xếp thành một bảng duy nhất, thể hiện phong cách và cảm xúc mà thiết kế sẽ hướng tới.
Không phải bản vẽ giao diện, không phải thiết kế thật, moodboard là bước thỏa thuận thẩm mỹ. Khi cả hai phía duyệt xong một moodboard, designer biết chắc màu nào sẽ dùng, font chữ sẽ theo hướng nào, hình ảnh sẽ tươi hay trầm. Thay đổi ở bước này chỉ mất 10 phút. Thay đổi sau khi thiết kế xong có thể mất vài ngày.
Moodboard dùng ở đâu trong quy trình thiết kế web
Trong quy trình thiết kế website, moodboard nằm ở giai đoạn khám phá (discovery), thường song song hoặc ngay sau user flow. Trình tự đầy đủ trông như thế này: nghe brief và xác định mục tiêu, vẽ user flow (luồng người dùng), lập moodboard (định hướng thẩm mỹ), wireframe (bố cục trang), mockup (bản thiết kế có màu), prototype (bản bấm thử), rồi lập trình.
Moodboard giải quyết câu hỏi “web sẽ trông thế nào” trước khi designer bắt tay vào pixel đầu tiên. Không có bước này, designer thường phải tự suy đoán từ những mô tả mơ hồ như “sang trọng nhưng gần gũi”, rồi sau vài ngày làm mới biết mình hiểu sai. Điều này giải thích vì sao nhiều dự án web phải “làm lại từ đầu” dù brief rõ ràng.
Moodboard gồm những thành phần nào
Một moodboard web thường gồm năm lớp, không cần đủ tất cả trong mọi dự án:
- Hình ảnh chủ đạo: những tấm ảnh chiếm diện tích lớn nhất, thể hiện “cảm giác” muốn đạt. Không nhất thiết phải là ảnh website, có thể là kiến trúc, sản phẩm, ảnh phong cảnh, hoặc bao bì. Một spa chọn ảnh phòng tắm đá trắng của khách sạn Nhật. Một tiệm cà phê chọn ảnh kệ hạt rang trong kho cũ.
- Bảng màu: thường 3 đến 5 màu chính, lấy trực tiếp từ hình ảnh đã chọn hoặc chỉ định thêm. Đây là thứ designer sẽ dùng xuyên suốt toàn bộ thiết kế sau đó.
- Kiểu chữ: 1 đến 2 font thử nghiệm để xem phong cách chữ có phù hợp không. Font có chân (serif) cho cảm giác cổ điển, uy tín. Font không chân (sans-serif) cho cảm giác hiện đại, sạch.
- Texture và pattern: bề mặt giấy, vải, gỗ, kim loại hay các pattern hình học, tuỳ ngành và phong cách.
- Từ khoá định hướng: đôi khi ghi thêm 3 đến 5 từ như “tinh tế”, “tin tưởng”, “gần gũi” để cả team nhìn vào cùng biết mình đang hướng tới đâu.
Không nhất thiết phải đủ cả năm lớp. Moodboard cho web thương mại B2B thường chỉ cần màu, font và ảnh không gian làm việc. Moodboard cho web thời trang cần nhiều hình ảnh sản phẩm và texture hơn. Điều quan trọng không phải số lượng phần tử mà là sự nhất quán về cảm xúc khi nhìn vào toàn bộ bảng.
So sánh moodboard, color palette và brand guideline
Ba khái niệm này đều liên quan tới màu sắc và phong cách nhưng phục vụ mục đích khác nhau và xuất hiện ở các giai đoạn khác nhau trong dự án.
| Moodboard | Color palette | Brand guideline | |
|---|---|---|---|
| Là gì | Bảng cảm hứng hình ảnh | Bộ màu chính thức | Tài liệu nhận diện đầy đủ |
| Mục đích | Chốt định hướng thẩm mỹ | Quy định màu cụ thể để dùng | Chuẩn hoá nhận diện thương hiệu |
| Thời điểm làm | Đầu dự án, trước thiết kế | Sau moodboard, khi thiết kế | Sau khi thiết kế hoàn tất |
| Độ chi tiết | Gợi ý, linh hoạt | Mã màu cụ thể (HEX, RGB) | Quy tắc đầy đủ, ít thay đổi |
Color palette thường được trích xuất hoặc tinh chỉnh từ moodboard sau khi duyệt. Brand guideline là bước xa hơn nữa, xuất hiện khi thương hiệu cần nhận diện nhất quán trên nhiều kênh trong dài hạn. Bài về wireframe giải thích bước tiếp theo trong quy trình sau khi moodboard đã được duyệt.
Ví dụ moodboard thực tế theo hai ngành khác nhau
Cách dễ nhất để hiểu moodboard là xem cùng một khái niệm “cảm hứng” áp vào hai ngành hoàn toàn khác nhau trông như thế nào.
Một spa thư giãn cao cấp muốn làm website. Chủ spa mô tả: “Muốn web yên tĩnh, không gian Nhật, cảm giác sạch sẽ.” Moodboard cho trường hợp này thường gồm ảnh phòng tắm đá trắng, rừng tre, bàn thiền đơn giản, bảng màu xanh rêu nhạt và be và trắng, font chữ serif mảnh kiểu Japandi. Designer nhìn vào bảng này biết ngay: không được dùng màu đỏ, tránh font đậm và góc cạnh, không nhúng nhiều hiệu ứng chuyển động.
Một tiệm cà phê rang xay thủ công muốn làm web bán hạt. Chủ tiệm nói: “Thích kiểu vintage, ấm, không quá xưa.” Moodboard sẽ có ảnh cốc cà phê trên giấy kraft nâu, máy rang hạt cổ điển bằng đồng, bảng màu nâu caramel và kem và cam nhạt, font chữ cổ điển có chân. Designer nhìn vào biết: không dùng nền trắng thuần, tránh font sans-serif công nghệ, không chụp ảnh theo phong cách minimalism Hàn Quốc.
Hai moodboard khác nhau hoàn toàn, nhưng cả hai đều cho thấy sức mạnh của công cụ này: không cần nói dài, chỉ cần nhìn vào cùng 15 tấm ảnh là cả designer và chủ thương hiệu thấy mình đang hướng về cùng một chỗ.
Ai làm moodboard và làm bằng công cụ gì
Moodboard thường do designer tổng hợp sau buổi brief đầu tiên, nhưng khách hàng đóng vai trò quan trọng trong việc phản hồi và chọn lọc. Nhiều khách tự tạo “moodboard thô” trước khi gặp designer, thường bằng cách lưu ảnh trên Pinterest hoặc tạo folder trên Google Drive. Đó là khởi đầu tốt và tiết kiệm đáng kể thời gian brief.
Công cụ designer hay dùng:
- Pinterest: tìm và lưu ảnh nhanh nhất, có tính năng tạo board chia sẻ link cho khách xem.
- Figma: phổ biến với team thiết kế vì có thể kết hợp moodboard vào cùng file wireframe.
- Milanote: giao diện kiểu bảng ghim, kéo thả ảnh, ghi chú và đường dẫn dễ dàng, phù hợp cho các dự án cần ghi chú kèm hình.
- Canva: nếu cần moodboard trình bày đẹp để gửi khách duyệt dạng file PDF.
Không có công cụ nào là bắt buộc. Moodboard trên một tờ A3 dán ảnh in ra cũng có tác dụng như file Figma, miễn là hai phía thống nhất được hướng đi nhìn vào đó.
Câu hỏi thường gặp về moodboard
Moodboard có bắt buộc không?
Về mặt quy trình, không bắt buộc. Nhưng trong thực tế, dự án không có moodboard thường dẫn tới tình huống khách và designer bước vào giai đoạn thiết kế màu với hiểu biết khác nhau, và chỉ phát hiện ra sau khi designer đã mất vài ngày làm. Moodboard là bước rẻ nhất để tránh tốn kém sau, vì thay đổi ở đây không ảnh hưởng đến bất kỳ file thiết kế nào đã có.
Tôi không có khiếu thẩm mỹ, có đóng góp được vào moodboard không?
Bạn không cần khiếu thẩm mỹ chuyên nghiệp để đóng góp. Cách đơn giản nhất: mở Pinterest, tìm “website design” kèm tên ngành bạn đang làm, lưu lại 10 đến 15 ảnh bạn thấy thích (không cần giải thích tại sao). Gửi link board Pinterest đó cho designer. Từ đó, designer sẽ đọc được rất nhiều thứ về gu thẩm mỹ của bạn.
Moodboard web khác moodboard nội thất hay thời trang không?
Khác ở đối tượng sử dụng và ngữ cảnh, nhưng nguyên tắc giống nhau: cảm xúc và định hướng thẩm mỹ trước, chi tiết sau. Moodboard web thường thêm ảnh website thật làm tham chiếu tham khảo giao diện, còn moodboard nội thất dùng nhiều ảnh vật liệu và không gian thực tế hơn.
Sau khi duyệt moodboard rồi có thể đổi ý không?
Được, nhưng càng đổi trễ thì càng tốn công sửa. Thay đổi ở bước moodboard hầu như không có chi phí vì chưa có file thiết kế nào. Thay đổi sau khi đã duyệt mockup có thể khiến designer phải làm lại phần lớn trang. Nếu bạn chưa chắc, hãy nói ngay ở giai đoạn moodboard thay vì đợi tới khi thấy thiết kế thật.
Moodboard không phải bước mất nhiều thời gian, nhưng bỏ qua nó thì dễ dẫn tới nhiều vòng sửa không cần thiết sau này. Nếu bạn đang lên kế hoạch làm website và muốn định hướng thẩm mỹ được thống nhất ngay từ đầu, xem thêm dịch vụ thiết kế UI/UX của Web22 để biết cách Web22 tiếp cận giai đoạn cảm hứng trong một dự án thật.