Thiết kế web nét phác đặt nét vẽ tay cạnh hoặc phủ nhẹ lên ảnh thật để giải thích ý tưởng. Khách thấy một phương án hình thành từ bản vẽ tới công trình. Phong cách Nét phác đi cùng ảnh thật hợp với đơn vị làm thiết kế và giải pháp.
Người vẽ trình bày ý tưởng theo lớp: ý đồ, bố cục, vật liệu, rồi công trình thật. Bốn lớp trình bày đó lần lượt được giải thích bên dưới, kèm cách giữ nét phác khi lên điện thoại. Mẫu tham chiếu nằm trong thư viện mẫu Mạnh An AI.
Mẫu cảnh quan dùng nét phác thế nào?
Mẫu Phác Xanh dùng nét phác để giải thích ý tưởng: ảnh sân vườn chuyển dần thành nét chì ở mép, kèm vài ghi chú viết tay. Phần dự án ghép đôi bản phác chì và ảnh thật cho từng công trình.
Tiêu đề “Từ nét phác đến góc sống xanh.” đứng trên nền giấy sáng. Ghi chú “Cây lộc vừng tạo bóng mát” và “Hồ cá tự nhiên” chỉ thẳng vào chi tiết trong ảnh. Phía dưới có năm dịch vụ, ba cặp phác và thật, năm bước làm việc và ba lời khách; lời khách và tên dự án là minh họa.
Lớp ý tưởng: nét phác cho khách thấy điều gì?
Nét phác cho khách thấy lý do đằng sau một lựa chọn, không chỉ kết quả. Một mũi tên “lối gió” hay “hướng nắng” nói nhanh hơn một đoạn văn.
Ghi chú trên ảnh nên ngắn, hai đến bốn chữ, và chỉ vào đúng một vật. Khi một ghi chú cần một câu dài để hiểu, hãy chuyển nó xuống thành chữ in bên dưới ảnh. Như vậy máy tìm kiếm cũng đọc được ý chính.
Nhà phố: nét trắng phủ lên mặt tiền
Văn phòng giả định Phác Nhà Phố đặt ảnh nhà phố có gạch bông gió và cây xanh bên phải. Vài nét trắng mảnh phủ lên ảnh, kèm ba ghi chú “giếng trời”, “hướng nắng”, “lối gió”. Tiêu đề “Ngôi nhà bắt đầu từ một nét chì” là chữ in lớn bên trái.
Mẫu website thiết kế kiến trúc này có bốn thẻ dịch vụ: kiến trúc, nội thất, cảnh quan, cải tạo. Ba công trình mỗi thẻ có một ô phác nhỏ đặt góc trên ảnh. Ảnh vẫn là thứ khách nhìn đầu tiên.
Lớp bố cục: thiết kế web nét phác đặt bản vẽ ở đâu?
Đặt bản phác cạnh ảnh khi muốn khách so sánh trước và sau. Phủ lên khi muốn chỉ ra một vài chi tiết trên cùng một ảnh.
| Cách đặt | Hợp khi | Lưu ý |
|---|---|---|
| Phác và ảnh cạnh nhau, cùng cỡ | Cho thấy từ ý tưởng tới thành phẩm | Hai hình cùng góc nhìn |
| Ảnh chuyển dần thành nét phác | Ảnh đầu trang, tạo ấn tượng | Chỉ dùng một lần trên trang |
| Nét mảnh phủ lên ảnh | Chỉ ra hướng gió, nắng, lối đi | Tối đa ba ghi chú mỗi ảnh |
| Ô phác nhỏ ở góc ảnh | Thẻ dự án trong danh sách | Ô phác không che chủ thể |
Đồ gỗ đặt làm: bản vẽ kích thước cạnh thành phẩm
Xưởng giả định Mộc Đặt Làm mở bằng hai ô bằng nhau. Bên trái là bản vẽ chì một chiếc bàn ăn có ba chữ “dài”, “rộng”, “cao” trên đường kích thước. Bên phải là ảnh chiếc bàn đã làm xong trong xưởng.
Năm thẻ Bàn ăn gỗ, Ghế ăn gỗ, Tủ lưu trữ, Kệ trang trí, Băng ghế có ảnh, mô tả và nút “Xem mẫu”. Bốn bước đặt làm đi từ phác thảo mẫu tới giao sản phẩm. Hàng cuối ghép ba cặp bản vẽ và ảnh thật, mỗi cặp nối bằng một mũi tên.
Lớp vật liệu: nét phác nói gì mà ảnh không nói được?
Ảnh cho thấy vật liệu trông thế nào, còn nét phác cho biết vật liệu đặt ở đâu. Một bảng vật liệu có ghi chú tay giúp khách hình dung trước khi thấy công trình.
Nên chụp mẫu vật liệu thật trên nền sáng, rồi ghi tên bằng chữ viết tay ngắn. Tên vật liệu quan trọng nên lặp lại bằng chữ in bên dưới, để khách đọc trên điện thoại vẫn rõ.
Nội thất: căn phòng nửa ảnh, nửa bản vẽ
Studio giả định Nét Nhà đặt tiêu đề “Vẽ trước, ở sau” trên một phòng khách nửa ảnh, nửa bản vẽ. Phía trái là nét chì của kệ âm tường và sofa, phía phải là ảnh thật. Hai ghi chú tay “kệ âm tường” và “ánh sáng hướng đông” chỉ vào đúng chỗ.
Mục “Bảng vật liệu” chụp bốn mẫu thật, mỗi mẫu một ghi chú tay: gỗ sồi, vải lanh, đá travertine, gạch xanh rêu. Ba cặp “Bản phác” và “Ảnh thực tế” cho phòng khách, phòng ngủ, bếp. Năm bước từ Trao đổi tới Thi công dùng biểu tượng và chữ in.
Lớp công trình thật: giữ nét phác nào khi lên điện thoại?
Trên điện thoại, giữ các cặp phác và ảnh, bỏ bớt ghi chú nhỏ phủ trên ảnh lớn. Ghi chú nhỏ trên màn hình hẹp thường không đọc được.
- Cặp phác và ảnh xếp dọc: bản phác ở trên, ảnh thật ở dưới.
- Ảnh đầu trang chuyển dần thành nét phác: giữ, nhưng cắt hẹp phần phác.
- Ghi chú tay trên ảnh: giữ tối đa một ghi chú, phần còn lại chuyển thành chữ in.
- Ô phác nhỏ ở góc thẻ dự án: có thể bỏ, vì thẻ đã nhỏ.
Mỗi cặp phác và ảnh nên nằm trong một khối có chú thích chung. Tài liệu MDN về thẻ figure mô tả cách gom hình và chú thích thành một khối. Cách này giúp hai hình luôn đi cùng nhau khi bố cục thay đổi.
Khi nào không nên chọn thiết kế web nét phác?
Không nên chọn phong cách này khi doanh nghiệp không có bản vẽ thật hoặc ảnh công trình thật. Nét phác vẽ thêm cho có sẽ hứa một quy trình không tồn tại.
Nếu muốn chữ và ảnh đan vào nhau mà không cần bản vẽ, hãy xem bố cục ảnh và chữ đan xen. 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 thích nét mảnh, gọn có thể bắt đầu từ viền mảnh và bố cục tinh tế.
Câu hỏi thường gặp về bản phác trên website
Nói ngắn: dùng bản phác thật của dự án, đặt cạnh ảnh cùng góc, và giữ ghi chú thật ngắn.
Có nên vẽ lại bản phác cho đẹp hơn trước khi đăng?
Có thể làm sạch nét và nền giấy. Nhưng không nên vẽ lại khác bản gốc, vì khách sẽ so với công trình thật.
Không có ảnh chụp cùng góc với bản phác thì sao?
Hãy chụp bổ sung đúng góc đó khi công trình xong. Nếu không thể, đặt bản phác riêng và ghi rõ đây là phương án ban đầu.
Bản phác nên lưu ở định dạng nào?
Ảnh quét nên lưu WebP, nét vẽ đơn giản có thể lưu SVG. Hai định dạng này thường gọn hơn ảnh PNG cỡ lớn.
Bắt đầu từ đâu?
Hãy chọn ba dự án đã xong có cả bản phác và ảnh thật. Chụp lại ảnh cùng góc với bản phác nếu còn thiếu, rồi ghép thành ba cặp.
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 bản phác và ảnh dự á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
