Thiết kế web kể chuyện xếp ảnh và chữ theo một thứ tự có trước có sau, để khách cuộn trang như đang xem một câu chuyện: bắt đầu từ đâu, ai làm, làm thế nào, rồi đến tay mình ra sao. Phong cách Hình ảnh kể chuyện hợp với doanh nghiệp có nguồn gốc, cách làm hoặc hành trình phục vụ đáng được nhìn thấy.
Hãy hình dung trang như một kịch bản phân cảnh. Mỗi cảnh gồm ảnh cần có, câu dẫn sang cảnh sau và điều khách hiểu ra. Bạn có thể dùng chính bảng phân cảnh và lịch chụp bên dưới để chuẩn bị cho website của mình.
Cảnh dạo đầu: bảng phân cảnh của cả trang
Trước khi chọn màu hay kiểu chữ, hãy thử điền bảng này. Sáu dòng dưới đây được rút ra từ thứ tự khối trên mẫu gốc, có đổi vị trí một khối để mạch kể liền hơn và lược cảnh lời khách, vì cảnh này chỉ nên có khi bạn có phản hồi thật. Phần nhận xét dựa trên ảnh tĩnh, không phải kết quả đo hành vi người dùng.
| Cảnh | Ảnh cần có | Câu dẫn | Việc khách hiểu ra |
|---|---|---|---|
| 1. Mở màn | Người đang làm việc ở nơi câu chuyện bắt đầu | Từ đâu đến tay bạn? | Doanh nghiệp này làm gì |
| 2. Chuỗi việc | Ba đến bốn ảnh có thứ tự trước sau | Mọi thứ diễn ra thế nào? | Giá trị được tạo ra ở đâu |
| 3. Người kể | Chân dung tại nơi làm việc | Ai đứng sau việc này? | Có người thật chịu trách nhiệm |
| 4. Thành quả | Sản phẩm rõ nét, cùng cách xử lý màu | Bạn có thể chọn gì? | Mình mua được món nào |
| 5. Cách đặt | Biểu tượng hoặc ảnh nhỏ theo bước | Bắt đầu thế nào? | Việc tiếp theo rất rõ |
| 6. Lời mời | Ảnh toàn cảnh quay về nơi bắt đầu | Bạn muốn ghé hay hỏi thêm? | Liên hệ ở đâu |
Cảnh 1: mở màn ở nơi câu chuyện bắt đầu
Mẫu gốc mở bằng một người phụ nữ đội nón hái cam trong vườn nắng, một người đàn ông bê giỏ phía sau. Tiêu đề serif trắng “Từ vườn Việt đến mỗi nhà.” đặt trên phần lá tối bên trái. Câu này đã nêu cả điểm đầu và điểm cuối của hành trình, nên khách có thể hiểu ngay trang sắp kể gì.
Khi viết kịch bản, hãy chọn khoảnh khắc đang diễn ra thay vì một tấm ảnh tạo dáng. Câu dẫn của cảnh này là lời hứa rằng phía dưới còn tiếp: “theo chân”, “xem cách làm”, “từ đầu”. Nút chính cũng có thể mang ý đó thay vì chỉ ghi “Xem thêm”.
Cảnh 2: chuỗi ảnh có thứ tự trước sau
Đây là cảnh làm nên phong cách. Ngay dưới banner, ba ảnh lớn được đánh số 01, 02, 03: chăm cây, chọn quả, giao thùng hàng tận tay. Người trong cả ba ảnh mặc cùng màu áo xanh, và ánh sáng khá đồng đều, nên mắt đọc chúng như ba khung của cùng một đoạn phim.
Phép thử này cũng là chỗ khác nhau với hai phong cách gần. Ở mẫu hiện đại, nhiều hình ảnh, các ảnh dự án đứng độc lập nên đổi thứ tự không ảnh hưởng gì. Còn ở mẫu ảnh lớn, ấn tượng, một ảnh đầu trang gánh phần lớn cảm xúc, các khối sau chuyển nhanh sang sản phẩm. Nếu bạn chỉ cần một cảnh toàn khổ gây ấn tượng mạnh mà không cần chuỗi việc, hãy xem thêm phong cách ảnh tràn màn hình.
Một lưu ý cho cảnh này: chữ mô tả dưới ba ảnh của mẫu khá nhỏ, trong khi chú thích lại là thứ gắn ảnh với câu chuyện. Khi triển khai, bạn nên tăng cỡ chữ và giữ mỗi chú thích khoảng một đến hai dòng.
Cảnh 3: người kể bước ra
Mẫu gốc có khối “Câu chuyện Nông Sản Lành”, ảnh người nông dân và người mặc áo thương hiệu bắt tay, hòa dần vào nền kem, cạnh ba giá trị có biểu tượng. Tuy nhiên, khối này đang nằm sau phần sản phẩm. Nếu trang của bạn đặt nặng nguồn gốc, có thể cân nhắc đưa nó lên ngay sau chuỗi ảnh, như thứ tự trong bảng phân cảnh, để mạch kể không bị ngắt.
Cảnh này chỉ nên dùng người thật và việc thật của doanh nghiệp. Ảnh đẹp nhưng không phải người của bạn thì không còn là câu chuyện của bạn.
Cảnh 4: kể xong thì cho khách chọn
Năm thẻ sản phẩm của mẫu gọn hơn hẳn các cảnh khác: ảnh trái cây sát khung, tên, một dòng mô tả. Nhịp nhanh lại ở đây là hợp lý, vì khách đã hiểu nguồn gốc và giờ cần chọn. Thẻ “Hợp tác phân phối” nền xanh nhạt đứng cạnh, mở thêm một lối đi cho người mua sỉ.
Mỗi thẻ nên gắn với một chi tiết trong chuyện đã kể, như vùng trồng hoặc tên người làm, nếu thông tin đó là thật.
Cảnh 5: nói lại bằng thông tin rõ ràng
Quy trình sáu bước trên mẫu dùng biểu tượng tròn nối bằng mũi tên. Nó kể lại hành trình lần nữa, lần này cho người thích đọc nhanh. Bạn có thể giữ cảnh này khi quy trình có nhiều bước hơn chuỗi ảnh; nếu chỉ lặp đúng các ý của cảnh 2, nên đổi thành các bước đặt hàng để khách có thêm thông tin mới.
Cảnh 6: khép lại bằng một lời mời
Mẫu kết bằng dải ảnh đồi xanh, câu mời và nút cam, trước chân trang xanh rất đậm. Ảnh toàn cảnh gợi lại không gian ngoài trời của banner, nên có thể tạo cảm giác khép lại. Trên điện thoại, nút liên hệ nên dễ tìm suốt dọc trang, vì không phải ai cũng xem đến cảnh cuối.
Cảnh hậu trường: mẫu lịch chụp một ngày
Phong cách này phụ thuộc vào tư liệu thật, nên lịch chụp quan trọng không kém bản thiết kế. Chụp trong cùng một đợt thường giúp màu và ánh sáng dễ đồng nhất hơn ghép từ nhiều nguồn. Lịch dưới đây chỉ là khung tham khảo.
| Buổi | Việc cần chụp | Dùng cho cảnh | Lưu ý |
|---|---|---|---|
| Sáng sớm | Toàn cảnh nơi làm việc, người đang bắt đầu công việc | 1 và 6 | Chừa khoảng tối hoặc thoáng để đặt chữ |
| Giữa buổi sáng | Từng công đoạn, mỗi việc một ảnh rộng và một ảnh cận tay | 2 và 5 | Chụp đúng thứ tự, cùng trang phục |
| Đầu giờ chiều | Sản phẩm trên cùng một mặt nền | 4 | Giữ một góc máy cho mọi sản phẩm |
| Cuối giờ chiều | Chân dung người làm, cảnh trao hàng cho khách | 3 và 2 | Xin phép người xuất hiện trong ảnh |
Sau đó, hãy chọn ảnh theo bảng phân cảnh rồi dùng chung một cách xử lý màu. Ảnh đầu trang có thể ảnh hưởng đến thời gian hiển thị, nên bạn có thể nén kỹ và kiểm tra theo chỉ số LCP của web.dev.
Cảnh diễn thử: ba kịch bản cho ba ngành
Ba giao diện sau được tạo riêng để minh họa, với các tên giả định Hạt Sương, Thớ Gỗ và Ruộng Mây, không phải dự án đã bàn giao. Thông tin liên hệ, vùng trồng, loại sản phẩm và lời giới thiệu trong ảnh đều là nội dung ví dụ.
Cà phê đặc sản: theo chân một hạt cà phê
Banner toàn khổ là đồi sương lúc mặt trời lên, một người phụ nữ đội nón hái quả chín, chữ trắng “Từ sườn đồi đến tách của bạn.” nằm trên vùng lá tối. Bốn ảnh đánh số nối bằng đường chấm đi từ hái, phơi, rang đến nếm. Sau đó là dải nâu đậm vẽ đồi và ba vùng trồng, năm túi cà phê, khối “Người rang cà phê”, bốn cách pha tại nhà. Nhân vật lặp lại giữ mạch kể.
Xưởng mộc: một chiếc bàn ra đời
Trang mở bằng tiêu đề căn giữa “Một tấm ván, nhiều mùa chờ đợi.” trên nền giấy, rồi mới đến ảnh ngang người thợ bào gỗ trong xưởng có nắng xiên. Chữ tách khỏi ảnh nên không phụ thuộc vào vùng tối. Mạch kể chạy so le trái phải qua bốn việc: chọn ván, để gỗ nghỉ, ghép mộng, xoa dầu. Dải nâu óc chó giới thiệu bốn loại gỗ, tiếp theo là bộ sưu tập sản phẩm và khối “Người giữ xưởng”.
Nông sản sạch: một mùa lúa kể từ đầu
Banner gồm ba ảnh dọc ghép cạnh nhau: lúc gieo, lúc lúa lớn, lúc gặt, phía dưới là khối xanh đậm chứa tiêu đề và hai nút. Tiếp theo là đường cong năm việc trên nền vàng, bốn loại gạo, bữa cơm của hai mẹ con, dải từ cánh đồng đến nồi cơm và ba món nấu. Chữ “sạch” ở đây chỉ là tên nhóm ngành; doanh nghiệp thật nên giải thích bằng cách làm và giấy tờ có thật, nếu có.
Cảnh phụ: 12 ngành khác và nhân vật chính của từng chuyện
Ngoài ba ngành trên, đây là 12 ngành khác. Thay vì liệt kê theo lĩnh vực, hãy nhìn câu chuyện của bạn thuộc kiểu nào, vì mỗi kiểu cần một chuỗi cảnh khác nhau.
Chuyện nguồn gốc: nhân vật chính là nơi sản phẩm ra đời
- Trà: đi từ đồi chè tới ấm trà; nên có ảnh tay hái và lò sao.
- Mật ong: theo mùa hoa; cần nói rõ nơi đặt đàn ong và thời điểm lấy mật.
- Nước mắm truyền thống: từ mẻ cá đến chum ủ; nên chú ý ảnh vẫn sạch sẽ, dễ chịu.
- Thổ cẩm: từ sợi đến tấm vải; cần xin phép và ghi đúng tên người dệt.
Chuyện cách làm: nhân vật chính là đôi tay
- Gốm thủ công: nhào đất, tạo hình, nung; ảnh cận tay thường là phần đắt giá nhất.
- May đo: đo, cắt, thử, sửa; nên có cảnh khách thử đồ nếu khách đồng ý.
- Đồ da: cắt da, khâu tay, đánh cạnh; thẻ sản phẩm cần ảnh chất liệu rõ.
- Bánh thủ công: theo một mẻ bánh trong ngày; nên ghi rõ lịch ra lò nếu có.
Chuyện hành trình: nhân vật chính là khách
- Homestay cộng đồng: từ lúc đến tới bữa cơm chung; ảnh cần có người địa phương thật.
- Cải tạo nhà cũ: trước, trong và sau khi làm; chỉ dùng công trình thật và được phép đăng.
- Trường dạy nghề: từ buổi đầu đến sản phẩm đầu tay; không hứa việc làm nếu không có căn cứ.
- Chụp ảnh gia đình: từ buổi trao đổi đến lúc nhận album; nên có ảnh hậu trường.
Cảnh bị cắt: khi nào không nên kể chuyện?
Khi khách đến để tra cứu nhanh. Với nhà thuốc hay dịch vụ cần tìm thông tin gấp, nhiều ảnh dẫn dắt có thể cản đường. Phong cách đơn giản, dễ tìm thông tin thường hợp hơn.
Khi có nhiều mặt hàng cần so sánh. Cửa hàng hàng trăm sản phẩm cần bộ lọc và thẻ đều nhau, nên lưới thẻ gọn gàng có thể phù hợp hơn cho trang chính, còn chuyện thương hiệu đặt ở trang riêng.
Khi chưa có ảnh thật. Câu chuyện dựng từ ảnh mua sẵn thường thiếu nhân vật lặp lại và dễ tạo cảm giác không thật. Nếu chưa chụp được, bạn có thể làm bố cục đơn giản hơn trước, rồi bổ sung sau.
Khi quy trình không khác biệt hoặc cần bảo mật. Nếu các công đoạn không thể công khai, hoặc không giúp khách quyết định, đừng kể chỉ để lấp chỗ. Hãy đổi trọng tâm sang năng lực và cách làm việc rõ ràng.
Cảnh hỏi đáp: câu hỏi thường gặp về thiết kế web kể chuyện
Cần bao nhiêu ảnh cho một trang kể chuyện?
Không có con số cố định. Hãy đếm theo bảng phân cảnh: mỗi cảnh một ảnh chính, riêng chuỗi việc cần ba đến bốn ảnh, cộng thêm ảnh sản phẩm bạn đang bán.
Có bắt buộc phải đánh số các ảnh không?
Không. Số thứ tự giúp khách nhận ra ngay đây là một chuỗi. Bạn cũng có thể dùng tên mùa, đường nối hoặc các hàng so le như ở minh họa xưởng mộc và gạo.
Dùng ảnh AI để kể chuyện được không?
Ảnh AI có thể giúp hình dung bố cục, như ba minh họa trong bài. Còn trên website thật, người, nơi làm và sản phẩm nên là ảnh thật, vì khách đang tìm hiểu chính doanh nghiệp của bạn.
Sau này muốn đổi ảnh trên WordPress có khó không?
Thường không khó nếu các khối được dựng sẵn và có quy định về tỉ lệ ảnh. Khi thay một ảnh trong chuỗi, hãy kiểm tra lại thứ tự và chú thích để câu chuyện vẫn đúng.
Khi các phần không cần theo thứ tự thời gian, thiết kế web ảnh chữ đan xen có thể là hướng gọn hơn.
Cảnh cuối: viết kịch bản của riêng bạn
- Viết một câu theo mẫu “từ … đến …”. Nếu viết được dễ dàng, phong cách này có thể hợp với bạn.
- Liệt kê ba đến bốn việc có thật nằm giữa hai điểm đó, rồi điền vào bảng phân cảnh.
- Rà ảnh đang có theo từng cảnh, phần thiếu đưa vào lịch chụp.
Có bảng phân cảnh rồi, bạn có thể xem các bước Mạnh An AI thiết kế và bàn giao website, hoặc bảng giá thiết kế website AI để chọn phạm vi. Mạnh An AI phục vụ khách hàng trên toàn quốc, và bạn có thể gửi kịch bản và ảnh đang có để trao đổi.
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
