“Làm website giống thế này”: Sao chép phong cách, không sao chép nội dung
Tìm hiểu cách tái tạo diện mạo và cảm giác của một trang web bạn thích — mà không sao chép văn bản, hình ảnh hay bố cục. Hướng dẫn thực tế, có đạo đức, từng bước.

Ý nghĩa thực sự của “Làm website giống thế này”
Khi khách hàng nói “làm website giống thế này,” họ hiếm khi muốn “sao chép từng pixel.” Họ thường chỉ tới một cảm giác: sạch và hiện đại, đậm và theo phong cách tạp chí, thân thiện và tinh nghịch, hoặc sang trọng và tối giản.
Việc của bạn là chuyển phản ứng đó thành các quyết định bạn có thể giải thích—rồi xây lại những quyết định đó bằng thương hiệu, nội dung, ràng buộc và mục tiêu của khách hàng.
Khách hàng thường có ý gì
Phần lớn khách hàng đang cố truyền đạt một (hoặc nhiều) điều sau đây:
- “Tôi thích cách nó dễ dùng.”
- “Tôi thích độ bóng bẩy về mặt hình ảnh.”
- “Tôi thích cách nó kể chuyện.”
- “Tôi muốn trông như thuộc về phân khúc đó.”
Dùng một trang tham khảo để định hướng là bình thường. Chìa khóa là mượn nguyên tắc, chứ không phải tài sản.
Phong cách vs. nội dung vs. bố cục (định nghĩa nhanh)
- Phong cách: hệ thống thị giác—chữ, màu, khoảng cách, cách xử lý hình ảnh, hình dạng nút, chuyển động, tông chung.
- Nội dung: từ ngữ và phương tiện—copy, ảnh, minh họa, icon, lời chứng thực, biểu đồ, tên thương hiệu.
- Bố cục: cách sắp xếp nội dung—cấu trúc trang, thứ tự phần, lưới, và mô hình component.
Mượn các tín hiệu phong cách thường an toàn và được mong đợi. Sao chép nội dung là điều cấm kỵ. Sao chép bố cục có thể chấp nhận trong khái quát (vì nhiều pattern phổ biến), nhưng nhân bản một cấu trúc đặc trưng quá sát vẫn có thể gây rủi ro pháp lý và uy tín.
Tại sao “gần giống” vẫn có thể rủi ro
Dù bạn vẽ lại mọi thứ, một trang gần như giống hệt vẫn có thể trông như hàng nhái—làm giảm sự tin cậy và dễ bị khiếu nại. Rủi ro không chỉ là pháp lý; còn là danh tiếng. Người dùng nhận ra khi hai trang cảm giác như anh chị em sinh đôi.
Thiết lập kỳ vọng sớm: cùng vibe, thực thi khác
Một thỏa thuận rõ ràng có thể như sau:
“Chúng tôi sẽ bắt được vibe—chữ sạch, khoảng trắng rộng, tiêu đề tự tin—nhưng thiết kế trang gốc, viết nội dung mới và dùng hình ảnh của bạn để rõ ràng thuộc về thương hiệu bạn.”
Một câu như vậy ngăn ngừa hàng tuần phản hồi lệch pha về sau.
Những gì bạn có thể sao chép (và những gì không nên)
Những gì bạn có thể mượn (an toàn)
Hãy coi các site khác là tham chiếu để định hướng thiết kế:
- Hướng màu (không phải palette chính xác): “đa phần trung tính với một điểm nhấn sáng,” “pastel trầm,” “độ tương phản cao.”
- Hướng typography: “tiêu đề đậm, phong cách tạp chí,” “sans-serif bo tròn, thân thiện,” “kỹ thuật và chính xác.”
- Khoảng cách và mật độ: khoảng trắng rộng so với các khối thông tin dày.
- Mẫu tương tác: nav cố định, hiệu ứng hover nhẹ, FAQ dạng accordion, lưới card.
- Nhóm component: nút pill vs vuông, card có border vs shadow, icon outline vs solid (như một loại).
Đây là “nguyên liệu thiết kế” giúp bạn đạt cùng vibe trong khi vẫn tạo ra kết quả nguyên bản.
Những gì bạn không được sao chép
Nơi mọi người thường vô tình vượt ranh:
- Văn bản và thông điệp: tiêu đề, mô tả sản phẩm, FAQ, microcopy—không “tìm và thay thế.”
- Ảnh và video: ảnh, ảnh hero, texture nền, ảnh hồ sơ khách hàng.
- Icon và bộ minh họa: đặc biệt những phong cách nổi bật hoặc tùy chỉnh.
- Hình ảnh đặc trưng: sơ đồ độc quyền, infographic, họa tiết đặc trưng, animation tùy chỉnh.
- Tài sản thương hiệu: logo, slogan, linh vật, và họa tiết nhận diện.
Bố cục: khi nào trở nên “quá giống”
Cấu trúc chung (hero → lợi ích → testimonial → CTA) là phổ biến. Nó bắt đầu giống sao chép khi bạn khớp cùng thứ tự các phần, cùng lưới, cùng khoảng cách và cùng hệ thang thị giác, tới mức dễ nhận ra khi đặt cạnh nhau.
Một quy tắc tốt: giữ ý tưởng (ví dụ: “ba card lợi ích”), thay đổi cách biểu đạt (nội dung, tỉ lệ, typography, hình ảnh và kiểu component) để rõ ràng là của bạn.
Thu thập tham chiếu tốt hơn: Quy tắc 3–5 ví dụ
Một tham chiếu đơn lẻ dễ trói bạn vào chi tiết. Yêu cầu 3–5 ví dụ tạo ra phạm vi, giúp dễ trích xuất các tín hiệu lặp lại.
Tại sao 3–5 ví dụ hiệu quả
Với nhiều tham chiếu, bạn có thể nhận ra các mẫu như:
- “Tất cả đều cảm thấy sạch và thoáng” (spacing + lưới)
- “Tất cả dùng tiêu đề đậm với nhiều khoảng trắng” (typography)
- “Tất cả có chuyển động nhẹ, không flashy” (animation)
- “Tông đều tự tin và thân thiện” (giọng copy)
Khi thấy mẫu, bạn có thể tái tạo logic phong cách mà không sao chép bất kỳ trang nào.
Yêu cầu họ gắn nhãn những gì thích (và không thích)
Đừng chấp nhận “tôi thích” như phản hồi có thể hành động. Hỏi họ chú thích nhanh:
- Phông chữ: hiện đại/cổ điển/tinh nghịch? tiêu đề đậm hay nhẹ?
- Màu sắc: trầm hay sáng? tương phản cao hay mềm? màu nhấn yêu thích?
- Độ đơn giản: tối giản và yên tĩnh, hay nhiều nội dung?
- Chuyển động: không có, fade nhẹ, hay tương tác động?
- Tông: nghiêm túc, thân thiện, cao cấp, quirky?
Cũng quan trọng không kém: thu thập những điều không muốn.
Ví dụ câu “không” hữu dụng:
- “Không video hero khổng lồ.”
- “Không chữ nhỏ màu xám nhạt.”
- “Không nền lộn xộn hay footer rối.”
- “Không doodle tinh nghịch—giữ chuyên nghiệp.”
Dùng form intake ngắn hoặc checklist
Một checklist nhẹ giảm họp và giữ phản hồi có thể so sánh:
- Link + screenshot
- 3 điều thích (typography, màu, spacing, bố cục, hình ảnh, nav, motion, tông)
- 3 điều không thích
- Một câu: “Nếu trang của chúng ta có cảm giác như này, nó sẽ là…”
Chuyển “Vibe” thành yêu cầu thiết kế rõ ràng
1) Biến ví dụ thành tính từ (rồi định nghĩa chúng)
Từ 3–5 tham chiếu, chọn 5–8 tính từ: yên tĩnh, cao cấp, tinh nghịch, phong cách tạp chí, đậm, tối giản, ấm áp, kỹ thuật, thân thiện.
Rồi định nghĩa chúng thành những quyết định:
- Yên tĩnh = nhiều khoảng trắng, tương phản nhẹ, ít “điểm nhấn” trong mỗi màn hình.
- Cao cấp = palette kiềm chế, font chất lượng cao, hệ thang mạnh, ít nhưng hình ảnh mạnh.
- Phong cách tạp chí = tiêu đề lớn hơn, spacing có suy nghĩ, bố cục ưu tiên đọc.
Đây là lớp dịch từ “vibe” thành những lựa chọn có thể xây dựng.
2) Xác định khán giả và một mục tiêu chính
Viết một câu cho người dùng mục tiêu, và một câu cho kết quả chính.
Ví dụ:
- Khán giả: “Quản lý vận hành ở công ty 50–200 nhân sự cần ít rắc rối với nhà cung cấp.”
- Mục tiêu: “Đặt cuộc gọi giới thiệu đủ điều kiện cho gói dịch vụ của chúng tôi.”
Một vibe “cao cấp” cho bán lẻ xa xỉ và cho tư vấn B2B có thể trông rất khác khi khán giả rõ ràng.
3) Đặt chỉ số thành công đo được
Chọn 2–4 chỉ số gắn với mục tiêu:
- Tỷ lệ chuyển đổi (form, đặt lịch, mua hàng)
- Thời gian trên trang quan trọng (dịch vụ, giá, case study)
- Chất lượng lead (phù hợp, ngân sách, sẵn sàng)
- Độ sâu cuộn hoặc tỷ lệ click tới trang quan trọng
Chỉ số giúp tranh luận về “gu thẩm mỹ” không làm lệch dự án.
4) Viết một đoạn brief phong cách
Kết hợp các phần trên thành một đoạn ngắn mọi người có thể tham chiếu:
“Chúng tôi muốn cảm giác yên tĩnh, cao cấp, phong cách tạp chí cho các nhà lãnh đạo vận hành. Trang phải tạo niềm tin nhanh và thúc đẩy cuộc gọi được đặt. Dùng bố cục đơn giản, typography mạnh, bảng màu kiềm chế và hệ thang rõ ràng. Thành công là có nhiều cuộc gọi đủ điều kiện hơn và tăng tương tác ở dịch vụ và case study.”
Tạo Mood Board và Mini Style Guide
Một site tham chiếu vẫn là một website đầy đủ. Để nắm bắt cảm giác mà không copy cách thực thi, tách cảm giác thành các phần bạn có thể mô tả và tái tạo.
Xây mood board tập trung (không phải scrapbook)
Mood board của bạn phải trả lời: Khi ai đó vào trang, họ sẽ cảm thấy thế nào? Giữ cô đọng.
Bao gồm 3–8 mục tổng cộng trong các nhóm:
- Typography: 1–2 kiểu tiêu đề và 1 kiểu thân (ghi trọng lượng, kích thước, khoảng dòng).
- Màu: nhiệt độ (mát/ấm), mức tương phản, cách dùng accent.
- Ảnh/minh họa: ánh sáng, bố cục, độ bão hòa, “người thật” vs trừu tượng.
- Mẫu UI: nút, card, kiểu nav, cách hero, phong cách icon, mật độ spacing.
Thêm screenshot với ghi chú ngắn như: “Tiêu đề lớn, tự tin”, “Bóng mềm, góc bo”, “Một màu nhấn chỉ cho CTA.”
Chuyển thành mini style guide có thể xây dựng
Chuyển mood board thành quy tắc nhất quán:
- Thang chữ: H1/H2/H3, thân, chữ nhỏ (kích thước + line-height)
- Nút: primary/secondary, radius, hành vi hover
- Card: padding, border vs shadow, cách xử lý hình ảnh
- Trường form: kiểu border, trạng thái focus, trạng thái lỗi
Nếu bạn quản lý design tokens, đây là nơi khởi đầu (kích thước font, bước spacing, vai trò màu).
Ghi lại những điều nên/không nên (với bằng chứng)
Tạo danh sách “Do / Don’t” đơn giản với ví dụ:
- Do: “Dùng một màu nhấn cho hành động chính.”
- Don’t: “Đừng sao chép chính xác bố cục hoặc bộ icon này.”
Danh sách ràng buộc đó ngăn sao chép vô ý và giữ nhất quán khi mở rộng trang.
Xây lại phong cách với Typography, Màu và Khoảng cách
Nếu muốn cùng cảm giác mà không thành hàng nhái, hãy xây lại từ nguyên tắc đầu: chữ, màu, spacing.
Typography: cùng mood, dấu ấn khác
Xác định điều typography tham chiếu đang làm: phong cách tạp chí và yên tĩnh? kỹ thuật và chính xác? tinh nghịch và bo tròn?
Chọn font phù hợp với mood mà không chọn đúng họ font đó. Nếu tham chiếu dùng serif có độ tương phản cao cho tiêu đề, hãy chọn một serif khác có độ tương phản cao (hoặc một sans sang, tinh tế) thay vì cùng họ font.
Rồi định nghĩa thang chữ để trang giữ nhất quán:
- Kích thước H1, H2, H3 (và khi nào dùng)
- Kích thước thân và quy tắc line-height
- Kiểu chú thích và chữ nhỏ
Một baseline dễ đọc cho nhiều site: line-height thân thoải mái (~1.5–1.7), tiêu đề hơi chặt hơn, và khoảng cách đoạn rộng rãi.
Màu: sắc khác hoặc tỷ lệ khác
Nhiều thiết kế bị lộ do cùng background hero và accent. Xây palette của bạn:
- Chọn sắc khác (ví dụ: tham chiếu là navy + neon green; bạn chọn teal sâu + lime ấm)
- Hoặc giữ họ màu tương tự nhưng thay đổi tỷ lệ (tham chiếu tối chủ đạo; bạn dùng nền sáng trung tính với điểm nhấn nhỏ)
Định nghĩa cả trạng thái: link, hover, focus, lỗi/thành công.
Khoảng cách: thứ vô hình khiến cảm giác “cao cấp”
Spacing là cách nhanh để tạo sự đồng bộ mà không copy bố cục. Dùng hệ spacing (ví dụ: 4/8/16/24 hoặc 6/12/24/36) cho:
- Padding section
- Khoảng giữa các card và cột
- Padding nút và spacing form
Khi mọi thứ căn theo nhịp đều, thiết kế trông có chủ ý — dù cấu trúc khác tham chiếu.
Thiết kế component thay vì sao chép trang
Tái tạo một trang cảm hứng theo từng trang dễ sa vào bẫy: bạn hoặc quá giống, hoặc bí khi nội dung của bạn không phù hợp. Thay vào đó, sao chép hệ thống chứ không phải trang.
Bắt đầu bằng việc nhận diện các mảnh lặp lại
Hầu hết site marketing được ghép từ các “gạch Lego” có thể tái sử dụng. Liệt kê những phần lặp trong tham chiếu:
- Hero (tiêu đề, phụ đề, CTA chính, liên kết thứ cấp)
- Khối tính năng (icon + tiêu đề + đoạn ngắn)
- Testimonial (trích dẫn, tên, chức vụ, công ty)
- Bảng giá (tên gói, giá, tính năng, CTA)
- FAQ dạng accordion
Đặt tên component giúp chuyển công việc từ “sao chép homepage họ” sang “xây hero của chúng ta, pricing của chúng ta, FAQ của chúng ta.”
Tạo bộ component riêng của bạn
Xây một thư viện component nhỏ tái sử dụng trên các trang:
- Nút (primary/secondary/tertiary, trạng thái hover + disabled)
- Navigation (desktop + mobile)
- Card (tính năng, bài viết, tài nguyên)
- Form (input, textarea, dropdown, thông báo lỗi)
Nếu muốn nhanh, nền tảng vibe-coding như Koder.ai hữu ích: bạn mô tả vibe và bộ component trong chat, sinh UI React làm việc, và lặp thử nghiệm mà không “khóa” vào bố cục sao chép. Tính năng planning mode và snapshots/rollback giúp thử biến thể an toàn trong khi giữ triển khai nguyên bản.
Đặt quy tắc biến thể (để vẫn giữ nhất quán)
Các site bóng bẩy dùng biến thể có kiểm soát. Đặt quy tắc như:
- Bán kính góc: ví dụ 8px cho card, 999px cho pill, không dùng tùy tiện
- Cấp độ shadow: none / soft / elevated (tối đa 3 cấp)
- Phong cách icon: outline vs solid, độ dày stroke, góc bo
Ghi chép như một playbook nhỏ
Một trang hướng dẫn component là đủ: mỗi component để làm gì, dùng ở đâu, và biến thể cho phép.
Lập cấu trúc và wireframe quanh nội dung của bạn
Sao chép thứ tự trang tham chiếu là cách nhanh nhất để nhận các giả định không phù hợp với doanh nghiệp bạn.
Bắt đầu từ nhu cầu người dùng (không phải tham chiếu)
Trước khi phác, liệt kê những gì khách cần biết trước khi mua:
- “Đây dành cho người như tôi không?”
- “Giá và bao gồm những gì?”
- “Tôi có thể tin họ không—bằng chứng, đánh giá, kết quả?”
- “Tiếp theo sẽ xảy ra gì nếu tôi liên hệ?”
Những câu hỏi đó là xương sống cho cấu trúc.
Tạo sitemap đơn giản và mục tiêu trang
Lập bản đồ các trang bạn thực sự cần và giao mỗi trang một nhiệm vụ duy nhất:
- Trang chủ: làm rõ bạn làm gì, dành cho ai, và bước tiếp theo
- Sản phẩm/Dịch vụ: giải thích đề nghị, lợi ích, chi tiết chính
- Giá: giảm lo lắng với tiers rõ ràng, nội dung kèm FAQ
- Liên hệ: làm cho việc liên lạc dễ; đặt kỳ vọng thời gian phản hồi
Thêm trang phụ (About, Case Studies, FAQ) chỉ khi thực sự có mục đích.
Viết dàn ý nội dung riêng cho từng trang
Phác thảo tiêu đề và phần dựa trên đề nghị của bạn, không phải chuỗi block tham chiếu. Quyết định bằng chứng sẽ hiển thị, phản bác điều gì, và bạn muốn người dùng làm gì tiếp theo.
Wireframe cho phù hợp nội dung của bạn
Wireframe là bản phác bố bố cục, không phải trang trí:
- Nếu bạn có ba case study mạnh, cho chúng không gian.
- Nếu giá là tuỳ biến, thiết kế luồng tư vấn thay vì bảng giá.
- Nếu sản phẩm của bạn trực quan, lên kế hoạch gallery hoặc phần demo.
Khi cấu trúc hoạt động, áp phong cách tham chiếu—nhưng không thừa hưởng blueprint của nó.
Tạo nội dung và hình ảnh nguyên bản (không “tìm và thay”)
Để thực thi rõ ràng khác biệt, từ ngữ và hình ảnh phải thuộc về bạn.
Viết lại thông điệp từ đầu (lợi ích, bằng chứng, CTA)
Bắt đầu từ điều đúng về doanh nghiệp bạn. Khung đơn giản:
- Lợi ích: khách nhận được kết quả gì (nhanh hơn, đơn giản hơn, an toàn hơn, tự tin hơn)?
- Bằng chứng: điều gì làm cho điều đó có thể tin được (số liệu, testimonial, case study, logo, chứng nhận)?
- Kêu gọi hành động: bước tiếp theo (đặt cuộc gọi, thử miễn phí, yêu cầu báo giá) theo giọng của bạn.
Bạn có thể giữ nhịp tham chiếu (câu ngắn, câu đập mạnh vs giải thích dài) nhưng đổi ý tưởng và diễn đạt. Tránh các câu đặc trưng hay phép ẩn dụ riêng của họ.
Dùng hình ảnh nguyên bản (hoặc tài sản được cấp phép)
Đừng lấy screenshot, icon, minh họa hay ảnh—dù có vẻ chung chung.
- Chụp screenshot của sản phẩm bạn.
- Dùng ảnh chụp riêng khi có thể.
- Nếu cần stock, dùng tài sản có bản quyền và lưu hồ sơ cấp phép.
Nếu muốn cùng vibe cho hero, tái tạo ý tưởng: cùng mức độ bóng bẩy, chủ thể và bố cục khác.
Đừng mô phỏng tiêu đề và thứ tự phần
Dù văn bản mới, sao chép luồng cùng thứ tự vẫn khiến trang giống. Sắp xếp lại câu chuyện theo điểm mạnh của bạn: dẫn bằng bằng chứng, gộp những phần mỏng, hoặc thêm phần mà tham chiếu không có.
Bắt đúng tông, giữ từ ngữ của mình
Giọng là cho phép; diễn đạt thì không. Quyết định voice (thân thiện, cao cấp, trực tiếp, dí dỏm) và áp dụng nhất quán cho tiêu đề, nút và microcopy.
Kiểm tra chất lượng: cùng cảm giác, thực thi rõ ràng khác
Mục tiêu là “cùng thể loại, bài hát khác.” Trước khi ra mắt, xác nhận bạn bắt được vibe mà không trùng chi tiết.
Bài test “cùng vibe”
Mở tham chiếu và bản nháp cạnh nhau 60 giây. Đóng tham chiếu và tự hỏi: bạn nhớ gì?
- Nếu bạn nhớ tâm trạng (sạch, tinh nghịch, cao cấp), bạn đang đúng hướng.
- Nếu bạn nhớ chi tiết cụ thể (bố cục hero exact, icon chính xác), bạn quá gần.
Kiểm tra trợ năng cơ bản
Một trang có thể giống nhưng tốt hơn cho người dùng thực tế. Kiểm tra:
- Tương phản và khả năng đọc (tránh chữ nhỏ, mảnh, tương phản thấp)
- Trạng thái hover/focus rõ ràng cho link và nút
- Điều hướng bằng bàn phím hợp lý qua menu, form, modal
Kiểm tra thực tế responsive
Mobile phải được thiết kế có chủ đích, không chỉ “thu nhỏ desktop.” Kiểm tra:
- Header mobile-first với hành động chính rõ
- Sections chảy lại hợp lý (xếp chồng, độ dài dòng ngắn hơn, vùng chạm lớn hơn)
- Không phụ thuộc vào hover cho tương tác quan trọng
Chạy checklist “quá gần?”
Trước khi ra mắt:
- Bạn đang dùng cùng pattern hero và lặp lại 2–3 phần tiếp theo theo cùng cách không?
- Màu và typography của bạn có tạo dấu ấn thương hiệu khác biệt không?
- Illustration, icon, ảnh và microcopy có phải của bạn hoặc được cấp phép không?
Nếu hai câu trở lên còn lấn cấn, thiết kế lại một lớp—spacing, typography, hoặc hình dạng component—để nhanh chóng phá cảm giác “bản sao”.
Hàng rào pháp lý và đạo đức (ngôn ngữ dễ hiểu)
Bạn có thể học từ trang mình ngưỡng mộ—hệ thang chữ, nhịp spacing, pattern component. Điều không nên làm là bê nguyên tác phẩm được bảo hộ hoặc làm cho trang giống đến mức người dùng nghĩ đó là cùng thương hiệu.
Những gì bản quyền thường bảo hộ
Bản quyền bảo hộ biểu đạt sáng tạo cụ thể, không phải ý tưởng chung.
- Văn bản: tiêu đề, đoạn, mô tả sản phẩm, slogan, microcopy. Đừng “viết lại bằng cách thay vài từ.”
- Ảnh & nhiếp ảnh: mặc định được bảo hộ. Không tải về, chụp màn hình hoặc mượn.
- Icon & minh họa: thường có bản quyền/giấy phép; phong cách tùy chỉnh dễ được bảo hộ. Tránh vẽ lại hoặc “redraw” nghệ thuật độc đáo.
- Mẫu UI: pattern phổ biến thường được dùng lại, nhưng sự kết hợp đặc trưng vẫn có thể gây vấn đề nếu sao chép quá sát.
Trade dress & nhầm lẫn thương hiệu (vấn đề “trông giống họ”)
Ngay cả khi không sao chép trực tiếp, bạn có thể gặp rắc rối nếu thiết kế gây nhầm lẫn.
Cẩn trọng với:
- Cách đặt logo, bảng màu và combo typography gần như giống hệt
- Một hero layout, phong cách minh họa hay linh vật đặc trưng khiến người ta nghĩ là “của họ”
- Tên sản phẩm, giọng điệu và cấu trúc thông điệp tương tự tới mức ngụ ý liên kết
Bài test đơn giản: nếu một cái nhìn nhanh khiến ai đó hỏi “đây có phải cùng công ty không?” bạn đã quá gần.
Khi nào nên hỏi luật sư
Cân nhắc rà soát pháp lý ngắn nếu bạn:
- Hoạt động cùng thị trường với thương hiệu tham chiếu
- Tái tạo hình ảnh nhận diện dễ nhận biết
- Không chắc về giấy phép font, ảnh, icon hoặc template
- Nhận khiếu nại, notice gỡ nội dung, hoặc “cease and desist”
Ghi lại quá trình (giúp hơn bạn nghĩ)
Giữ một đường dẫn làm việc nhẹ nhàng chứng minh công việc độc lập:
- Brief (mục tiêu, khán giả, ràng buộc)
- Mood board (nhiều tham chiếu)
- Wireframe và các bản nháp thể hiện lặp
- Ghi chú về tài sản có bản quyền (hóa đơn/ghi chú) và những gì làm nội bộ
Đó không phải quan liêu—là minh bạch, và giúp giữ công việc “được truyền cảm hứng bởi” trên phía đúng của đạo đức.
Câu hỏi thường gặp
Khi khách hàng nói “làm website giống thế này”, họ thực sự đang yêu cầu gì?
Thường có nghĩa là họ muốn cùng một vibe (sạch, cao cấp, vui nhộn, phong cách tạp chí), chứ không phải một bản sao từng pixel.
Công việc của bạn là chuyển phản ứng đó thành các quyết định cụ thể — typography, khoảng cách, vai trò màu sắc, component, giọng điệu — rồi triển khai những lựa chọn đó với thương hiệu, nội dung và ràng buộc của họ.
Sự khác nhau giữa phong cách, bố cục và nội dung là gì — và tại sao điều đó quan trọng?
Một cách đơn giản và an toàn để phân biệt:
- Phong cách: có thể tham khảo (hướng font, spacing, cảm giác component, hạn chế chuyển động).
- Bố cục: chấp nhận theo các mẫu chung (hero → lợi ích → bằng chứng → CTA), nhưng tránh các cấu trúc “đặc trưng” dễ nhận ra.
- Nội dung: không được sao chép (văn bản, hình ảnh, icon/illustration, sơ đồ).
Nếu không chắc chắn, hãy coi đó là nội dung và làm nó nguyên bản.
Tôi có thể mượn gì an toàn từ một trang tham khảo?
Hãy mượn nguyên tắc, không phải tài sản:
- Hướng typography (ví dụ: tiêu đề đậm + thân văn đơn giản)
- Mật độ/không gian (rộng rãi vs. chặt)
- Mẫu tương tác (nav cố định, accordion, hover)
- Hạng mục component (card, nút pill, icon outline như một họ phong cách)
Rồi xây lại với font khác, bảng màu riêng, copy của bạn và hình ảnh gốc để trông rõ ràng là của bạn.
Những gì tôi không bao giờ nên sao chép từ trang khác?
Tránh sao chép những thứ dễ được bảo hộ hoặc dễ nhận diện:
- Tiêu đề, đoạn văn, microcopy, FAQ, slogan
- Ảnh, video, texture nền, ảnh chụp màn hình
- Icon/illustration tùy chỉnh (không vẽ lại hoặc trace)
- Sơ đồ, infographic, animation đặc trưng
- Yếu tố thương hiệu (tên, logo, họa tiết nhận diện)
Cả phiên bản “chỉnh sửa nhẹ” đôi khi vẫn quá giống — bắt đầu từ thông điệp và tài sản của bạn.
Tại sao một bố cục ‘tương tự’ vẫn có thể rủi ro dù tôi đã thiết kế lại mọi thứ?
“Gần giống” tạo ra hai vấn đề:
- Danh tiếng: trông như hàng nhái, làm giảm niềm tin.
- Nhầm lẫn: người dùng có thể nghĩ bạn liên quan tới thương hiệu kia.
Nếu nhìn cạnh nhau ai cũng nói “hai trang này giống nhau quá”, hãy thay đổi một lớp: typography, nhịp spacing, hình dạng component, phong cách hình ảnh hoặc luồng trang.
Tại sao nên thu thập 3–5 trang tham khảo thay vì chỉ một?
Một nguồn tham khảo dễ khiến bạn sao chép chi tiết. Với 3–5 nguồn, bạn thấy được các tín hiệu lặp lại như:
- cùng cảm giác sạch và thoáng
- tiêu đề đậm kèm nhiều khoảng trắng
- chuyển động nhẹ nhàng, không hoa mỹ
- giọng điệu tự tin và thân thiện
Từ những mẫu chung đó bạn tạo logic phong cách mà không sao chép bất kỳ trang đơn lẻ nào.
Làm sao để lấy phản hồi hữu ích từ người không phải designer về các trang tham khảo?
Hỏi họ ghi chú nhanh trên mỗi ví dụ:
- 3 điều họ thích (phông chữ, màu, spacing, bố cục, hình ảnh, nav, chuyển động, giọng điệu)
- 3 điều họ không muốn (“không hero video lớn”, “không chữ mảnh xám nhỏ”, “không footer lộn xộn”)
- Một câu: “Nếu trang của chúng ta có cảm giác như thế này, nó sẽ là…”
Điều này biến “tôi thích” thành yêu cầu hữu dụng và giảm các vòng chỉnh sửa.
Làm sao xây mood board và mini style guide mà không biến nó thành cái scrapbook?
Dùng mood board để nắm bắt cảm giác, rồi chuyển thành quy tắc có thể xây dựng được.
Bao gồm một bộ nhỏ ví dụ cho:
- typography (đặc tính tiêu đề + thân)
- vai trò màu (neutrals, cách dùng accent, mức tương phản)
- phong cách hình ảnh (ảnh thật vs trừu tượng, ánh sáng, bố cục)
- pattern UI (nút, card, nav, mật độ spacing)
Rồi định nghĩa mini guide: thang kích thước chữ, kiểu nút/trạng thái, padding/shadow cho card, trạng thái focus/error cho form, và một danh sách “Nên / Không nên” ngắn để tránh sao chép vô ý.
Cách tốt nhất để tránh sao chép từng trang là gì?
Xây một hệ thống component thay vì sao chép từng trang:
- nhận diện các khối tái sử dụng (hero, card tính năng, testimonial, bảng giá, FAQ)
- thiết kế mỗi component theo thương hiệu bạn (phông chữ, màu, spacing, hình ảnh)
- đặt quy tắc biến thể (bán kính góc, cấp độ shadow, kiểu icon)
Cách này giữ vibe nhất quán nhưng đảm bảo thực thi rõ ràng là tác phẩm của bạn — đặc biệt khi nội dung của bạn không khớp với nội dung tham khảo.
Trước khi ra mắt, tôi nên kiểm tra gì để đảm bảo trang không phải là “bản sao”?
Chạy một lần kiểm tra “quá giống?” trước khi ra mắt:
- Test cạnh nhau: bạn nhớ mood hay chi tiết exact?
- Kiểm tra tính nguyên bản: copy, ảnh, icon, illustration có phải của bạn hoặc được cấp phép?
- Kiểm tra cấu trúc: thứ tự/độ ưu tiên các phần có khác chỗ cần khác?
- Trợ năng: tương phản, chữ dễ đọc, trạng thái focus rõ, điều hướng bằng bàn phím
- Responsive: mobile được thiết kế có chủ đích (không chỉ thu nhỏ desktop)
Nếu vẫn quá giống, thay đổi một lớp nền tảng (font, nhịp spacing, hình dạng component) thay vì sửa nhỏ rải rác.