Bộ icon cho website hoặc ứng dụng: cách lên kế hoạch

Icon là những hình nhỏ cho người dùng biết cần chạm vào đâu: trang chủ, giỏ hàng, giao hàng, hỗ trợ, tài khoản. Khi chúng được lấy từ nhiều bộ miễn phí khác nhau, website trông như được chắp vá, nét dày cạnh nét mảnh, góc bo tròn cạnh góc nhọn. Một bộ icon đồng bộ khắc phục điều đó và khiến ngay cả website đơn giản cũng trông hoàn thiện. Dưới đây là cách lên kế hoạch cho bộ icon.

Bộ icon đồng bộ cho website hoặc ứng dụng

Lập danh sách trước tiên

Hãy đi qua website hoặc ứng dụng của bạn và ghi lại mọi chỗ cần icon:

Menu chính: trang chủ, danh mục, tìm kiếm, giỏ hàng, tài khoản.
Tính năng hoặc lợi ích: giao hàng nhanh, thanh toán an toàn, đổi trả, hỗ trợ.
Liên hệ và thao tác: điện thoại, email, địa chỉ, chia sẻ, tải xuống.

Mô tả mỗi icon trong vài từ, ví dụ “giao hàng: một chiếc xe tải nhỏ” hoặc “đổi trả: một chiếc hộp có mũi tên”. Danh sách càng rõ thì càng ít phải chỉnh sửa về sau.

Bạn cần bao nhiêu icon

Khoảng 4: landing page có ba hoặc bốn lợi ích, hoặc một bài thuyết trình ngắn.
Khoảng 8: các mục chính và tính năng của một website nhỏ.
Khoảng 16: bộ đầy đủ cho ứng dụng hoặc website lớn hơn có nhiều mục.

Thường nên đặt nhiều hơn một chút so với nhu cầu hiện tại. Icon vẽ sau, trong một đơn hàng riêng, khó khớp hoàn toàn hơn.

Chọn một phong cách

Chọn một phong cách và giữ nó cho cả bộ:

Nét viền (outline): đường mảnh, nhẹ nhàng và hiện đại, hợp với giao diện gọn gàng.
Tô đặc (filled): hình khối đặc, dễ nhìn ở kích thước rất nhỏ.
Hai tông màu (duotone): hai sắc độ của một màu, có cá tính hơn một chút.
3D: khối mềm và đổ bóng, hợp với landing page tươi sáng.

Nếu bạn đã có vài icon ưng ý, hãy gửi liên kết để icon mới theo cùng phong cách.

Màu sắc

Dùng màu thương hiệu của bạn và ghi dưới dạng mã hex, như #1A73E8, nếu có. Một màu chính và một màu nhấn thường là đủ. Nếu chưa có màu thương hiệu, một bảng màu trung tính dùng được trên mọi nền.

Kích thước nhỏ quyết định tất cả

Icon trong menu thường chỉ rộng 24 pixel. Ở kích thước đó chi tiết biến mất, nên hình đơn giản sẽ thắng:

Mỗi icon một ý. Một chiếc xe tải cho giao hàng, không phải xe tải kèm con đường, đồng hồ và chiếc hộp.
Không có chữ bên trong. Chữ sẽ không đọc được khi icon nhỏ.
Biểu tượng quen thuộc. Kính lúp cho tìm kiếm và giỏ hàng cho mua sắm được hiểu ở mọi nơi.

Bạn nhận được gì và cách sử dụng

Một bộ icon thường gồm các tệp PNG riêng trên nền trong suốt, để mỗi icon có thể đặt trên bất kỳ màu nền nào. PNG là định dạng ảnh raster: dùng tốt cho website, ứng dụng và slide, nhưng không phải tệp vector có thể phóng to không giới hạn. Nếu bạn cần favicon, một công cụ chuyển đổi trực tuyến miễn phí sẽ đổi PNG thành tệp ICO trong một phút.

Tóm lại

Một danh sách rõ ràng, đúng số lượng icon, một phong cách và màu thương hiệu của bạn: đó là cách để bộ icon đồng nhất trên mọi màn hình. Nếu bạn muốn có người vẽ bộ icon cho mình, hãy đặt bộ icon: bạn gửi danh sách icon, phong cách và màu sắc, rồi nhận 4, 8 hoặc 16 icon đồng bộ dưới dạng các tệp PNG riêng trên nền trong suốt. Khoản thanh toán chỉ được chuyển đi sau khi bạn chấp nhận kết quả.