Thiết kế web ảnh chữ đan xen là cách đổi vị trí ảnh và đoạn giới thiệu giữa các phần, mỗi phần nói một ý. Phong cách Ảnh và chữ đan xen hợp với trang có nhiều nội dung giới thiệu và có ảnh thật cho từng nội dung đó.
Dưới đây, mỗi ý đều đi kèm ví dụ lấy từ mẫu trong thư viện giao diện Mạnh An AI. Chúng tôi đọc mẫu như đọc một bản thảo: ghép nào chặt, ghép nào lỏng, câu nào nên sửa.
Đan xen là một cách ghép, không chỉ là đổi bên
Đổi bên chỉ tạo ra nhịp. Điều làm cho kiểu trang này có ích là mỗi ảnh đi cùng đúng một đoạn chữ, nên khách đọc xong câu có thể nhìn sang để thấy câu đó trông như thế nào.
Mẫu Vườn Việt mở bằng một banner thấp, chữ trắng căn giữa “Mang thiên nhiên về gần hơn.”, rồi vào ngay cặp đầu tiên: ảnh bên trái, chữ bên phải. Cặp thứ hai đảo lại. Hai cặp nằm sát nhau, ảnh chạm mép màn hình, nên mắt người xem có thể đi theo đường chữ Z. Đây là nhận xét từ ảnh tĩnh, chưa phải kết quả đo hành vi.
Cặp 1, “Thiết kế theo không gian sống”: ghép chặt
Cặp tốt là cặp mà ảnh nói đúng danh từ chính của tiêu đề.
Tiêu đề nói “không gian sống”. Ảnh là phòng khách mở thẳng ra vườn với lối đá và tiểu cảnh. Người xem thấy được vườn đang gắn với nhà ra sao mà chưa cần đọc đoạn mô tả. Ba mục có biểu tượng bên dưới nói về diện tích, kiến trúc nhà và các kiểu vườn, cũng cùng một đề tài.
Đoạn mô tả và chú thích biểu tượng dùng chữ xám nhỏ. Khi dựng thật, bạn nên đậm màu chữ hơn và kiểm tra theo mức tương phản tối thiểu của WCAG.
Cặp 2, “Thi công chăm chút từng chi tiết”: ghép chặt, hơi thừa lời
Ảnh có người làm việc thường là bằng chứng mạnh nhất cho một câu nói về cách làm.
Bên phải là đội thợ áo xanh đang trồng và chăm cây trong khu vườn. Người ở gần nhất đang cúi chăm cây; bạn có thể chọn ảnh người làm việc hướng về phía chữ để dẫn mắt tới tiêu đề.
Đoạn này nói cùng lúc về đội ngũ, vật tư, bảo hành. Ảnh chỉ chứng minh được phần đầu. Mô tả của phong cách trong thư viện ghi rõ “mỗi phần chỉ nói một ý”, nên phần vật tư và bảo hành có thể chuyển thành khối riêng, kèm ảnh riêng nếu có.
Cặp 3, “Kiến tạo giá trị bền vững”: ghép lỏng
Tiêu đề càng trừu tượng thì ảnh càng khó chứng minh.
Ảnh là không gian sân vườn cạnh nhà và hồ nước lúc trời tối, rất đẹp, nhưng “bền vững” thì không nhìn thấy được trong ảnh. Khối số liệu bên cạnh phải bổ sung bằng chứng, mà các con số trong mẫu chỉ là minh họa. Ảnh này cũng gần với ảnh cặp 1 về cảnh và ánh sáng, nên tính mới giảm đi.
Bản sửa thử. Có thể đổi tiêu đề thành một việc nhìn thấy được, chẳng hạn “Vườn sau một mùa mưa”, rồi dùng ảnh khu vườn đã bàn giao được chụp lại, nếu doanh nghiệp thật sự có ảnh đó.
Khoảng nghỉ giữa các cặp cũng là một phần của nhịp
Đan xen liên tục quá nhiều lần có thể trở thành một kiểu đơn điệu khác.
Mẫu xử lý khá khéo: sau cặp 2 là bốn ảnh dự án và bốn thẻ dịch vụ, sau đó mới tới cặp 3. Hai lưới này làm mắt đổi nhịp, nên khi cặp 3 xuất hiện, trang chưa có cảm giác lặp.
Ba phép thử đổi ảnh và khối cho thiết kế web ảnh chữ đan xen
Chúng tôi chưa chạy thử các phương án này với người dùng thật. Đây là phép thử biên tập, kết quả nêu dưới đây là điều có thể xảy ra, không phải số đo. Bạn chỉ cần in trang và cắt rời các khối.
Thử 1: đổi ảnh chéo giữa hai cặp
Nếu đổi ảnh mà chữ vẫn đúng, cặp đó đang lỏng.
Lấy ảnh đội thợ đặt sang “Thiết kế theo không gian sống”: câu chữ lập tức lệch, vì không còn thấy không gian sống đâu. Cặp 1 và 2 qua được phép thử. Lấy ảnh phòng khách đặt sang “Kiến tạo giá trị bền vững”: chữ vẫn đọc được bình thường, tức cặp 3 chưa cần đúng tấm ảnh của nó.
Thử 2: cho mọi ảnh về cùng một bên
Phép thử này cho biết việc đổi bên đang đóng góp bao nhiêu.
Xếp cả ba ảnh sang trái, cột ảnh sẽ dồn thành một dải dọc và cột chữ thành một dải khác, nên ba phần dễ bị đọc như một danh sách. Nội dung không sai, nhưng cảm giác “mỗi phần một chuyện” yếu đi.
Thử 3: xếp thành một cột như trên điện thoại
Ảnh tĩnh của mẫu không cho biết bản điện thoại, nên phần này là đề xuất của chúng tôi. Nếu giữ nguyên thứ tự trong mã, kiểu đan xen sẽ sinh ra hai ảnh liền nhau rồi hai đoạn chữ liền nhau.
Cặp 1 có ảnh trước chữ, cặp 2 có chữ trước ảnh, nên khi xếp dọc sẽ thành: ảnh, chữ, chữ, ảnh. Đoạn “Thiết kế theo không gian sống” dính liền với “Thi công chăm chút”, mất ranh giới giữa hai ý. Cách sửa thường gặp là đưa mọi ảnh lên trên chữ của nó, để mỗi cặp vẫn là ảnh rồi chữ. Khung ảnh giữ rõ, nút liên hệ đặt ở nơi dễ tìm sau mỗi vài cặp.
Đặt cạnh ba phong cách gần
Ba phong cách dưới đây cũng dựa nhiều vào ảnh, nên dễ bị nhầm. Điểm khác nằm ở quan hệ giữa các ảnh với nhau và giữa ảnh với chữ.
| Phong cách | Quan hệ giữa các ảnh | Đổi thứ tự các phần thì sao |
|---|---|---|
| Ảnh và chữ đan xen | Độc lập, mỗi ảnh đi với một ý | Thường vẫn đúng, chỉ đổi mức ưu tiên |
| Hình ảnh kể chuyện | Có trước có sau, như một chuỗi | Chuyện có thể sai |
| Chia đôi cân đối | Một lợi ích rõ cạnh một ảnh, trọng tâm là cân hai nửa | Ít phần hơn, nên ít khi cần đổi |
| Hiện đại, nhiều hình ảnh | Nhiều ảnh độc lập, ảnh đi trước chữ | Không ảnh hưởng, ít khi cần chữ giải thích |
Ba bản đan xen cho ba ngành
Ba giao diện thiết kế web ảnh chữ đan xen sau được tạo riêng để minh họa, với các tên giả định Nếp Vải, Vững Nghề và Lan Sương, không phải dự án khách hàng đã bàn giao. Số điện thoại trong ảnh là số ví dụ.
Xưởng may Nếp Vải: ảnh đi từ tờ rập đến thùng hàng
Với xưởng gia công, mỗi cặp có thể ứng với một khâu mà khách muốn kiểm tra, không cần câu chữ lớn lao.
Không có banner toàn khổ: tiêu đề “May đúng mẫu, đều từng đường kim” nằm cạnh ảnh người thợ bên cửa sổ. Sau dải chàm bốn khâu là ba cặp: tay vạch phấn cho “Bắt đầu từ một bản rập”, cận cảnh đường chỉ cho “Soi từng đường chỉ”, người thợ gấp áo cho “Kiểm trước khi đóng thùng”. Cặp cuối dùng nền chàm để đổi nhịp. Xen giữa là bốn thẻ dòng hàng.
Trường nghề Vững Nghề: tiêu đề trên khối vàng, ảnh nối thành dải
Người học thường muốn hình dung mình sẽ làm gì, nên ảnh nên chụp lúc đang thực hành, không phải lúc xếp hàng chụp chung.
“Học nghề bằng đôi tay” đứng giữa khối vàng, ngay dưới là dải ba ảnh: hàn, sửa xe, nấu ăn. Ba cặp sau đó đổi bên: đấu bảng điện, “Xưởng là lớp học”, “Người thầy đứng cạnh bạn”. Giữa chúng là sáu thẻ ngành trên nền xanh đậm, cuối trang có bốn bước và ba câu hỏi trước khi đăng ký. Trong ảnh có một gương mặt học viên lặp lại nhiều lần; bản thật nên chụp nhiều người hơn. Ngành học và câu chữ đều là minh họa, trường thật cần nói đúng chương trình mình có.
Vườn lan Lan Sương: khung chữ chồng lên ảnh, cặp đổi cả màu nền
Không nhất thiết chỉ đổi bên. Đổi cả màu nền theo cặp cũng giúp mỗi phần có không khí riêng, miễn là ảnh vẫn cùng một cách xử lý màu.
Đầu trang màu mận đậm với cận cảnh hoa hồ điệp đọng sương, khung chữ sáng “Mỗi nhành lan có nhịp riêng” đặt ở góc trái. Cặp “Buộc từng cành bằng tay” có ảnh người làm vườn đội nón lá kèm ảnh nhỏ cận tay, chữ trên nền hồng phấn. Cặp “Dưới mái lưới, nắng dịu hơn” chuyển sang nền xanh rêu. Sau dải năm giống lan là cặp “Chăm lan ở nhà”, rồi ba thẻ ghé vườn. Mẹo trồng trong ảnh chỉ là nội dung minh họa, không phải hướng dẫn chuyên môn.
12 ngành khác, mỗi ngành một cặp để viết thử
Ngoài ba ngành minh họa ở trên, đây là 12 ngành khác có thể dùng thiết kế web ảnh chữ đan xen. Thay vì giải thích chung, danh sách này gợi ý một cặp ảnh và chữ đầu tiên cho mỗi ngành. Chỉ dùng khi doanh nghiệp có đúng tấm ảnh đó.
- Nhà hàng gia đình: ảnh bếp đang ra món, cặp với đoạn nói món nấu theo ngày.
- Homestay: ảnh góc phòng buổi sáng, cặp với đoạn nói cách đón khách.
- Trang trại rau: ảnh luống rau đang thu hoạch, cặp với đoạn nói mùa vụ.
- Xưởng đồ da: ảnh tay khâu viền, cặp với đoạn nói loại da và cách làm.
- Nhà thầu nội thất: ảnh một góc đang lắp, cặp với đoạn nói phạm vi nhận làm.
- Trung tâm ngoại ngữ: ảnh lớp đang trao đổi, cặp với đoạn nói cách học.
- Phòng tập yoga: ảnh không gian tập, cặp với đoạn nói lớp dành cho ai.
- Xưởng in: ảnh tờ in vừa ra máy, cặp với đoạn nói loại giấy nhận in.
- Trại giống cây ăn quả: ảnh luống cây giống, cặp với đoạn nói cách chọn cây.
- Doanh nghiệp vận tải nhỏ: ảnh đội xe đang xếp hàng hóa, cặp với đoạn nói tuyến chạy.
- Hợp tác xã thủ công: ảnh người thợ đang làm sản phẩm, đi cùng đoạn giới thiệu sản phẩm.
- Trung tâm chăm sóc người cao tuổi: ảnh sinh hoạt đã được người trong ảnh đồng ý, cặp với đoạn nói về nếp một ngày.
Khi nào không nên chọn thiết kế web ảnh chữ đan xen?
Phong cách này tốn ảnh. Không có ảnh riêng cho từng ý thì nên chọn hướng khác.
Một văn phòng tư vấn chỉ có ảnh đội ngũ và vài ảnh kho sẽ phải lặp ảnh hoặc dùng ảnh chung chung, khiến cả cặp bị lỏng. Khi đó, hướng tiêu đề lớn có thể hợp hơn vì chữ gánh phần chính.
Nội dung cần so sánh hoặc tra cứu cũng không hợp với kiểu đổi bên.
Cửa hàng có hàng trăm mã hàng cần khách lướt nhanh, nên lưới thẻ gọn gàng hoặc bố cục đơn giản, dễ tìm thông tin thường tiện hơn.
Biên tập bộ ảnh trước khi dựng trang
Ảnh trong các cặp nên cùng chất lượng và cùng cách xử lý màu, vì khi đặt so le chúng lộ sự khác nhau rất rõ.
Mẫu Vườn Việt giữ được tông nắng vàng và xanh lá đều ở các ảnh. Mỗi ảnh cần gắn với một sản phẩm, dịch vụ hoặc câu chuyện cụ thể, kèm chú thích ngắn khi cần.
- Viết một câu cho mỗi cặp. Câu nào không nêu được điều nhìn thấy trong ảnh thì sửa câu hoặc đổi ảnh.
- Cắt ảnh sao cho chủ thể quay vào phía chữ, nhất là ảnh có người.
- Sau khoảng hai, ba cặp, chèn một khối khác dạng để đổi nhịp.
Câu hỏi thường gặp về thiết kế web ảnh chữ đan xen
Một trang nên có bao nhiêu cặp ảnh và chữ?
Không có con số cố định. Bạn nên đếm theo số ý thật sự cần nói. Mẫu trong bài dùng ba cặp và xen hai lưới ở giữa; nhiều cặp hơn thì nên chèn thêm khối khác dạng.
Có dùng ảnh AI cho các cặp này được không?
Ảnh AI có thể dùng để xem thử bố cục, như ba minh họa trong bài. Khi giới thiệu xưởng, thầy trò hay vườn của doanh nghiệp thật, bạn nên dùng ảnh thật, vì ảnh ở đây đóng vai trò chứng minh cho câu chữ.
Người quản trị WordPress có tự đổi ảnh được không?
Được, nếu các cặp được dựng thành khối có sẵn với tỉ lệ ảnh cố định. Bạn nên quy định rõ ảnh ngang hay dọc và độ dài đoạn chữ để cặp mới không làm lệch nhịp.
Một bài tập cuối: viết thử ba cặp đầu tiên
- Chọn ba ý khách cần biết nhất và tìm cho mỗi ý một tấm ảnh thật.
- Viết một tiêu đề cho từng ảnh, rồi làm phép đổi ảnh chéo trong bài này.
- Xếp các cặp thành một cột và đọc lại như trên điện thoại.
Khi đã có ba cặp đầu tiên cho thiết kế web ảnh chữ đan xen, 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. Bạn có thể gửi bộ ảnh đang có để trao đổi cách ghép 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
