Phong Cách Thiết Kế Web Dấu ấn làm bằng tay.

Ba giao diện minh họa phong cách dấu ấn làm bằng tay

Thiết kế web thủ công dùng nét vẽ, đường khắc hoặc chữ viết tay ở vài chỗ để cho thấy sự chăm chút. Ảnh thật vẫn là phần chính của trang. Phong cách Dấu ấn làm bằng tay hợp với xưởng nhỏ muốn kể về tay nghề mà trang vẫn dễ đọc.

Người làm nghề tay biết rằng một món đồ đẹp không phải chỗ nào cũng chạm khắc. Trang web cũng vậy: nét tay đặt đúng ba bốn chỗ thì quý, rải khắp nơi thì rối. Mẫu tham chiếu nằm trong thư viện mẫu Mạnh An AI.

Mẫu website đồ da thủ công có chữ viết tay phủ nhẹ lên ảnh
Mẫu minh họa thương hiệu Da Thủ Công Việt. Tên, giá, địa chỉ và số điện thoại trong ảnh đều là nội dung minh họa.

Mẫu đồ da đặt nét tay ở những chỗ nào?

Mẫu Da Thủ Công Việt chỉ đặt nét tay ở bốn chỗ: dòng chữ viết tay trên ảnh đầu trang, đường may đứt nét dưới menu, bảng đen chữ phấn và chữ ký ở chân trang. Mọi chữ cần đọc đều là chữ in sạch.

Tiêu đề “Tỉ mỉ từng đường khâu.” dùng chữ có chân, rõ và to. Bốn sản phẩm có ảnh, tên, mô tả ngắn và nút giỏ hàng; giá trong mẫu là minh họa. Phần quy trình có bốn ảnh cận bàn tay: chọn da, cắt, khâu, kiểm tra.

Thiết kế web thủ công nên có nét tay ở đâu, bỏ ở đâu?

Nét tay hợp ở chỗ trang trí và chỗ kể chuyện. Nó nên vắng mặt ở chỗ khách phải đọc nhanh hoặc bấm. Bảng dưới xét năm vị trí thường gặp trên một trang.

Vị trí trên trangNét tayLý do
Một dòng ghi chú trên ảnh đầu trangNên cóTạo cảm giác người thật đang làm
Đường kẻ, mũi tên, gạch chânNên có, nét mảnhDẫn mắt mà không tranh chữ
Tiêu đề chính, tên sản phẩmChữ in sạchKhách phải đọc được trong một giây
Nút bấm, giá, số điện thoạiChữ in sạchSai một chữ là mất đơn
Chân trangMột chữ ký nhỏKhép lại câu chuyện tay nghề

Xưởng gốm: nét cọ quanh tiêu đề, đường đứt nối các bước

Thiết kế web thủ công cho xưởng gốm giả định với nét cọ quanh tiêu đề
Giao diện minh họa xưởng giả định Gốm Mộc Làng: ảnh tay nặn gốm, bốn sản phẩm, bốn bước làm gốm, tám màu men và dải đặt làm. Không phải đơn vị có thật.

Xưởng giả định Gốm Mộc Làng mở trang bằng ảnh đôi tay đang nặn bình trên bàn xoay. Hai nét cọ nâu kẹp lấy tiêu đề “Mỗi chiếc bình một dấu tay”. Bên dưới có dòng viết tay “nặn tay, nung củi” và mũi tên chỉ vào bàn xoay.

Phần còn lại dùng chữ in: bốn sản phẩm Bình gốm, Cốc gốm, Đĩa gốm, Ấm trà, mỗi thẻ có nút “Xem mẫu”. Bốn bước làm gốm nối nhau bằng một đường đứt nét. Dải màu men có tám vệt cọ, mỗi vệt kèm tên màu in rõ bên dưới.

Chữ viết tay có làm khó đọc trang không?

Chữ viết tay làm khó đọc khi nó mang thông tin chính. Khi nó chỉ là ghi chú phụ, khách vẫn hiểu trang dù không đọc dòng đó.

Chữ viết tay thường được đưa vào trang dưới dạng ảnh. Hướng dẫn của W3C về chữ trong ảnh khuyên dùng chữ thật cho nội dung cần đọc. Ảnh chữ chỉ hợp khi kiểu chữ là một phần của thông điệp, như chữ ký hay logo.

Cách làm an toàn: viết thông tin chính bằng chữ HTML, rồi để nét tay làm lớp trang trí đi kèm. Chữ thật cũng giúp máy tìm kiếm đọc được nội dung chính.

Tiệm bánh: nhãn viết tay chỉ vào nguyên liệu

Trang tiệm bánh giả định có ba nhãn viết tay trên ảnh nhào bột
Giao diện minh họa tiệm giả định Bánh Nhà Nhào: ảnh nhào bột có ba nhãn viết tay, sáu loại bánh, bốn bước làm bánh, sáu nguyên liệu, lưu ý đặt bánh và thư viện ảnh. Không phải đơn vị có thật.

Tiệm giả định Bánh Nhà Nhào đặt ảnh đôi tay nhào bột bên trái. Ba nhãn viết tay “bột ủ qua đêm”, “bơ thật”, “nướng mỗi sáng” chỉ thẳng vào thứ có trong ảnh. Tiêu đề “Bánh nhào bằng tay mỗi sáng” bên phải vẫn là chữ in đậm.

Sáu thẻ bánh có ảnh, tên, một dòng mô tả và nút cộng. Bốn bước làm bánh đánh số bằng nét tay, nhưng tên bước in rõ. Khối “Lưu ý khi đặt bánh” dùng biểu tượng và chữ in, vì đó là chỗ khách cần làm theo.

Bao nhiêu nét tay là vừa?

Một trang thường chỉ cần ba đến năm chỗ có nét tay. Nếu khách nhớ trang như một tấm áp phích thay vì nhớ sản phẩm, nét tay đã quá liều.

  • Mỗi màn hình chỉ có một chỗ nét tay nổi bật.
  • Nét tay dùng một màu, thường là màu nhấn của thương hiệu.
  • Không dùng quá hai kiểu nét: một kiểu bút, một kiểu đường kẻ.
  • Trên điện thoại, bỏ bớt ghi chú nhỏ nếu chúng đè lên ảnh.

Nét tay nên vẽ bằng SVG hoặc ảnh nhỏ, nhẹ vài KB. Không dùng cả một ảnh lớn chỉ để chứa vài dòng chữ viết.

Nến thơm: gạch chân một chữ và nhãn ghi tay trên hũ

Trang nến thơm giả định với chữ tay được gạch chân trong tiêu đề
Giao diện minh họa xưởng giả định Nến Lửa Nhỏ: ảnh rót sáp, năm mùi hương, bốn bước làm nến, nhãn ghi tay ngày rót, ba nhóm quà và bốn mẹo dùng nến. Không phải đơn vị có thật.

Xưởng giả định Nến Lửa Nhỏ gạch chân chữ “tay” trong tiêu đề “Rót tay từng hũ nến”. Ảnh bên phải là sáp vàng đang rót vào hũ thủy tinh. Năm thẻ mùi hương Sả chanh, Gỗ thông, Hoa nhài, Cam quế, Trà xanh dùng chữ in và nút mũi tên.

Khối “Mỗi hũ ghi tay ngày rót” đặt cạnh ảnh hũ nến có nhãn viết tay thật. Đây là chỗ nét tay chứng minh một việc làm thật, không chỉ để trang trí. Bốn mẹo cuối trang như Cắt bấc, Đậy nắp dùng biểu tượng tròn và chữ in.

Khi nào không nên chọn thiết kế web thủ công?

Không nên chọn phong cách này khi sản phẩm làm bằng máy hàng loạt. Nét tay khi đó hứa một điều mà sản phẩm không có.

Nếu muốn trang ấm mà không cần nét vẽ, hãy xem bảng màu tông ấm, gần gũi. Khi câu chuyện nằm chủ yếu trong ảnh, cách dùng hình ảnh kể chuyện hợp hơn. Thương hiệu cần vẻ nhẹ nhàng có thể bắt đầu từ nền kem nâu trang nhã.

Câu hỏi thường gặp về nét tay trên website

Chủ xưởng hay hỏi về nguồn nét vẽ, phông chữ viết tay và tốc độ tải trang.

Có nên dùng chữ viết tay của chính chủ xưởng không?

Có, nếu viết rõ và chụp hoặc quét sạch. Chữ ký và vài dòng ghi chú thật làm trang đáng tin hơn nét tải sẵn.

Phông chữ viết tay có dùng cho đoạn văn được không?

Không nên. Phông viết tay khó đọc khi dài và trên màn hình nhỏ. Chỉ dùng cho vài chữ ngắn.

Nét vẽ tay có làm trang tải chậm không?

Ảnh hưởng thường nhỏ nếu nét vẽ là SVG gọn hoặc ảnh WebP nhẹ. Trang dễ chậm khi nét tay nằm trong ảnh nền cỡ lớn.

Bắt đầu từ đâu?

Hãy liệt kê ba việc làm bằng tay mà khách nên biết, rồi chọn đúng ba chỗ trên trang để kể chúng. Phần còn lại giữ chữ in sạch và ảnh thật.

Bạn có thể xem quy trình dựng website của Mạnh An AI và báo giá các gói thiết kế. Mạnh An AI phục vụ khách hàng trên toàn quốc; hãy gửi ảnh xưởng của bạn để cùng 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