Xây dựng thư viện biểu tượng Pixel của HackerNoon

Trong kỷ nguyên kỹ thuật số hiện nay với các thiết kế phát triển nhanh chóng, mọi chi tiết nhỏ đều có thể ảnh hưởng đáng kể đến Trải nghiệm người dùng (UX) tổng thể. Ví dụ: các biểu tượng có thể nâng cao đáng kể sức hấp dẫn trực quan của sản phẩm.

Những gì bắt đầu như một nỗ lực nhằm giảm bớt sự phụ thuộc của chúng tôi vào nguồn lực của bên thứ ba đã trở thành một dự án kinh doanh quan trọng hơn.

Bộ sưu tập Biểu tượng Pixelated mã nguồn mở này được thiết kế bằng cách sử dụng lưới 24px để căn chỉnh và nhất quán hoàn hảo, từ đó làm phong phú thêm trải nghiệm web/ứng dụng/sản phẩm/trang/cuộc sống của bạn. Lấy cảm hứng từ phong cách thiết kế cổ điển của HackerNoon, những biểu tượng này gói gọn bản chất của kỷ nguyên vàng của Internet.

Ý tưởng đằng sau Thư viện biểu tượng Pixel của chúng tôi

Với tư cách là nhà thiết kế, chúng tôi thường tìm kiếm giải pháp để hợp lý hóa quy trình của mình.

Tại HackerNoon, ban đầu chúng tôi chuyển sang sử dụng các biểu tượng Font Awesome để thêm chức năng và tính thẩm mỹ cần thiết cho trang web. Những biểu tượng này phục vụ chúng tôi rất tốt bằng cách mang lại sự nhất quán và nhiều tùy chọn. Tuy nhiên, do dựa vào thư viện có sẵn, chúng tôi không thể phục vụ nhận dạng thương hiệu của mình khi nó phát triển nữa.

Những người sáng lập của chúng tôi, David và Linh , ban đầu đề xuất ý tưởng chuyển sang Thư viện Biểu tượng nội bộ trong một cuộc họp về sản phẩm của chúng tôi. Giai đoạn đầu tiên tập trung vào việc thay thế các biểu tượng Font Awesome hiện có trên HackerNoon bằng biểu tượng của chúng tôi. Sau này tập trung vào việc chia sẻ các biểu tượng này dưới dạng Thư viện Biểu tượng cho cộng đồng.

Quá trình chuyển đổi này cho phép chúng tôi thử thách bản thân một cách sáng tạo. Mặc dù hành trình này không phải là không có thử thách nhưng mỗi biểu tượng pixel mà chúng tôi tạo ra đều giúp thể hiện cá tính thương hiệu của chúng tôi. Những biểu tượng pixel này không chỉ đơn thuần là các yếu tố hình ảnh; giờ đây chúng phản ánh HackerNoon.

Thiết kế biểu tượng nội bộ của chúng tôi: Từ ý tưởng đến sáng tạo

Tạo thư viện biểu tượng là một hành trình thú vị thông qua sự sáng tạo, độ chính xác và khả năng giải quyết vấn đề. Dưới đây là một cái nhìn tổng quan về quá trình tạo ra các biểu tượng pixel này, mang đậm bản chất của HackerNoon.

1. Xác định ngôn ngữ thiết kế

2. Lên ý tưởng & Phác thảo

3. Thiết kế và đưa ý tưởng vào cuộc sống

4. Chuẩn bị xuất bản cộng đồng: Figma & GitHub

   
   

Xác định ngôn ngữ thiết kế

Hành trình của chúng tôi bắt đầu bằng việc xác định một ngôn ngữ thiết kế gắn kết. Điều này liên quan đến việc quyết định mức độ chi tiết, phong cách minh họa và tâm trạng mà chúng tôi muốn các biểu tượng của mình truyền tải. Việc thiết lập nền tảng này đảm bảo tính nhất quán trong toàn bộ thư viện.

• Về mức độ chi tiết, chúng tôi đã chọn cách tiếp cận tối giản và hướng tới các biểu tượng rõ ràng. Chúng tôi đảm bảo các biểu tượng sẽ không tạo ra sự lộn xộn về mặt hình ảnh khi thu nhỏ tỷ lệ, điều này giúp chúng tôi loại bỏ các chi tiết không cần thiết.

• Phong cách minh họa của chúng tôi được lấy cảm hứng đặc biệt từ logo HackerNoon . Phong cách thiết kế khối pixel lấy cảm hứng từ thập niên 80, cổ điển hoàn toàn phù hợp với thương hiệu của chúng tôi. Điều này đảm bảo ngôn ngữ thiết kế nhất quán với nhận dạng hình ảnh tổng thể. Chúng tôi gọi chúng là Biểu tượng Pixelated.

  
  

  
  

  

• Để duy trì tính nhất quán, chúng tôi đã chọn lưới 24px. (Lưới 24px được coi là lý tưởng khi thiết kế biểu tượng vì hầu hết các biểu tượng hệ thống được hiển thị ở kích thước 24x24). Điều này cho phép chúng tôi tạo các biểu tượng để xem ở tỷ lệ 100% với độ chính xác hoàn hảo đến từng pixel bằng cách cung cấp cho chúng tôi:

  
  

  • Vùng trực tiếp 22px dành cho nội dung biểu tượng

  • Và 1px phần đệm bao quanh khu vực trực tiếp

    
    

    

    
    

    
    

Lên ý tưởng & Phác thảo

Quá trình lên ý tưởng bắt đầu bằng việc liệt kê các chức năng được biểu thị bằng các biểu tượng hiện tại và trường hợp sử dụng tương ứng của chúng. Sau đó, chúng tôi suy nghĩ cách thiết kế lại các biểu tượng cho các chức năng này. Và sau đó tiếp theo là những bức vẽ nguệch ngoạc và phác thảo nhanh chóng. Những bản phác thảo thô này đã giúp chúng tôi hình dung các biểu tượng ở quy mô nhỏ hơn, cho phép lặp lại nhanh hơn và loại bỏ những ý tưởng không phù hợp.

Thiết kế các biểu tượng Pixelated

Bước quan trọng tiếp theo là chuyển đổi các khái niệm vẽ tay này thành các biểu tượng pixel. Giai đoạn này chủ yếu liên quan đến việc sử dụng Adobe Illustrator để tạo các biểu tượng pixel này và sau đó xuất chúng ở các định dạng và kích thước khác nhau để kiểm tra khả năng mở rộng.

• Chúng tôi bắt đầu bằng cách nhập những bản phác thảo thô này vào Illustrator.

  
  

  

• Sau đó, chúng tôi đã tạo lưới 24px bằng Công cụ lưới để bắt đầu quá trình tạo pixel.

• Chúng tôi đã sử dụng Công cụ Live Paint và điền vào từng ô vuông chiếm> 50% không gian.

  
  

• Khi đã hài lòng với thiết kế, chúng tôi đã mở rộng Live Paint (Menu đối tượng → Mở rộng) để tạo thành các hình dạng.

• Tiếp theo, chúng tôi sử dụng Công cụ tạo hình dạng để đơn giản hóa các hình dạng này và voilà! Biểu tượng pixel của chúng tôi đã sẵn sàng.

  
  

• Sau đó, chúng tôi xuất biểu tượng dưới dạng SVG, PNG ở 12px, 16px, 24px và 48px. (Chúng tôi đã chọn các kích thước này dựa trên các trường hợp sử dụng mà chúng tôi đã liệt kê trong giai đoạn lên ý tưởng)

  
  

• Hơn nữa, chúng tôi đã ghi lại các chi tiết cụ thể về các biểu tượng, chẳng hạn như loại của chúng. Hiện tại, chúng tôi có ba loại: Solid (Fill), Regular và Light Icons. Có một loại khác dành cho những biểu tượng không thuộc ba loại đầu tiên, đó là Logo thương hiệu . (Các biểu tượng tài liệu giúp duy trì tính nhất quán trong thiết kế và tạo điều kiện cập nhật trong tương lai)

  
  

Chuẩn bị xuất bản cộng đồng: Figma & GitHub

Khi chúng tôi đã xuất tất cả các biểu tượng ở định dạng mong muốn, chúng tôi đã sắp xếp các biểu tượng này và chuẩn bị chúng để xuất bản cộng đồng. Chúng tôi đã chọn Tệp cộng đồng Figma và Kho lưu trữ GitHub cho mục đích này.

Đây là cách chúng tôi chuẩn bị mọi thứ:

• Nhóm và sắp xếp: Chúng tôi đã sắp xếp các biểu tượng thành bốn bộ dựa trên loại của chúng: Logo đồng màu, Thông thường, Màu sáng và Thương hiệu, giúp người dùng dễ dàng tìm kiếm các biểu tượng cụ thể hơn.

  
  

• Quy ước đặt tên & Cấu trúc thư mục: Chúng tôi đã thiết lập quy ước đặt tên rõ ràng và mang tính mô tả để giúp người dùng xác định các biểu tượng dễ dàng hơn. Đối với GitHub Repo, chúng tôi đã chọn cấu trúc thư mục như sau: file-type/color-theme(nếu có)/size/icon-type/icon-name.file-extension (ví dụ: PNG/For Dark Mode/24px/ Solid/Ad.png và SVG/Solid/Ad.svg )

  
  

• Tạo Thư viện Thành phần & Xác định các Biến thể trong Figma: Hệ thống thành phần của Figma cho phép chúng tôi tạo các thành phần chính cho mỗi biểu tượng. Chúng tôi đã tạo các biến thể kích thước cho mọi biểu tượng, cho phép người dùng chia tỷ lệ biểu tượng trực tiếp qua các phiên bản mà không gặp bất kỳ rắc rối nào. Điều này đã hợp lý hóa quá trình cập nhật các biểu tượng và đảm bảo tính nhất quán trên các tệp thiết kế khác nhau.

• Thiết lập Kho lưu trữ GitHub: Chúng tôi đã tạo một kho lưu trữ GitHub chuyên dụng cho Thư viện Biểu tượng Pixel, cho phép chúng tôi quản lý và chia sẻ các biểu tượng của mình với cộng đồng phát triển và thiết kế rộng lớn hơn.

  
  

• Tài liệu trên Github: Chúng tôi đã tạo một tệp README toàn diện trong GitHub Repo của mình. Điều này bao gồm phần giới thiệu về Thư viện biểu tượng Pixel, thông tin về tất cả các phương pháp có thể sử dụng các biểu tượng pixel này trong dự án của bạn, chi tiết cấp phép, nguyên tắc đóng góp được xác định rõ ràng và những cân nhắc đặc biệt khác.

  
  

  
  

• Tài liệu về Figma: Đối với Figma, chúng tôi đã tạo một Trang Giới thiệu riêng, bao gồm phần giới thiệu chuyên sâu về Thư viện Biểu tượng Pixel cũng như hướng dẫn cách sử dụng thư viện thành phần và các biến thể. Chúng tôi cũng bao gồm danh sách các biểu tượng kèm theo tên của chúng để bạn dễ dàng tham khảo.

  
  

• Cấp phép: Chúng tôi đã xác định rõ ràng các điều khoản cấp phép cho thư viện biểu tượng của mình. Thư viện biểu tượng Pixel GitHub Repo & Tệp Figma được cấp phép theo Giấy phép CC BY 4.0, cho phép sử dụng với sự ghi nhận thích hợp cho HackerNoon.

Sản phẩm hoàn thiện:

Hành trình tạo Thư viện Biểu tượng Pixel của chúng tôi chứa đầy sự khám phá, thử thách và phát triển sáng tạo. Từ những khởi đầu khiêm tốn của chúng tôi bằng cách sử dụng các biểu tượng Font Awesome cho đến việc sử dụng các biểu tượng Nội bộ trên toàn trang web và cuối cùng là việc tạo ra Thư viện Biểu tượng Pixel của riêng chúng tôi.

Quá trình này đã dạy chúng ta rằng các biểu tượng không chỉ đơn thuần là biểu tượng mà còn là người kể chuyện theo đúng nghĩa của chúng.

Hãy tham gia cùng chúng tôi trong hành trình sáng tạo này và trở thành một trong những người đầu tiên dùng thử Thư viện biểu tượng Pixel của HackerNoon.

Luôn sáng tạo, luôn mang tính biểu tượng.