HackerNoon'un Piksel Simge Kitaplığını Oluşturma Hakkında

Hızla gelişen tasarımların mevcut dijital çağında, her küçük ayrıntı genel Kullanıcı Deneyimini (UX) önemli ölçüde etkileyebilir. Örneğin simgeler, bir ürünün görsel çekiciliğini önemli ölçüde artırabilir.

Üçüncü taraf kaynaklara olan bağımlılığımızı azaltma çabası olarak başlayan şey, daha önemli bir girişime dönüştü.

Bu açık kaynaklı Pikselleştirilmiş Simge koleksiyonu, mükemmel hizalama ve tutarlılık için 24 piksellik bir ızgara kullanılarak tasarlandı ve böylece web/uygulama/ürün/sayfa/yaşam deneyiminizi zenginleştirdi. HackerNoon'un retro tasarım havasından ilham alan bu simgeler, internetin altın çağının özünü yansıtıyor.

Piksel Simge Kütüphanemizin Arkasındaki Konsept

Tasarımcılar olarak süreçlerimizi kolaylaştırmak için sıklıkla çözümler ararız.

HackerNoon'da siteye gerekli işlevselliği ve estetiği eklemek için başlangıçta Font Awesome simgelerine yöneldik. Bu simgeler tutarlılık ve geniş bir seçenek yelpazesi sunarak bize çok iyi hizmet etti. Ancak önceden var olan bir kütüphaneye güvenerek, gelişen marka kimliğimize artık hizmet edemiyorduk.

Kurucularımız David ve Linh , ilk olarak ürün toplantılarımızdan birinde şirket içi Simge Kütüphanesine geçiş yapma fikrini önerdiler. İlk aşama, HackerNoon'daki mevcut Font Awesome simgelerini kendi simgelerimizle değiştirmeye odaklandı. İkincisi, bu simgeleri topluluk için bir Simge Kitaplığı olarak paylaşmaya odaklandı.

Bu geçiş, kendimize yaratıcı bir şekilde meydan okumamıza olanak sağladı. Yolculuk zorluklardan yoksun olmasa da, oluşturduğumuz her pikselli simge, markamızın kişiliğinin parlamasına olanak sağladı. Bu pikselli simgeler, yalnızca görsel öğelerden daha fazlası haline geldi; artık HackerNoon'un bir yansımasıdırlar.

Şirket İçi Simgelerimizi Tasarlamak: Konseptten Yaratılışa

Bir simge kitaplığı oluşturmak, yaratıcılık, hassasiyet ve problem çözme yoluyla heyecan verici bir yolculuktu. HackerNoon'un özüyle dolu bu pikselli simgelerin yapımının ardındaki sürece bir göz atalım.

1. Tasarım Dilini Tanımlamak

2. Fikir ve Eskiz

3. Fikirleri Tasarlamak ve Hayata Geçirmek

4. Topluluk Yayınına Hazırlık: Figma ve GitHub

   
   

Tasarım Dilini Tanımlamak

Yolculuğumuz tutarlı bir tasarım dili tanımlayarak başladı. Bu, simgelerimizin iletmesini istediğimiz ayrıntı düzeyine, illüstrasyon stiline ve ruh haline karar vermeyi içeriyordu. Bu temeli oluşturmak, kütüphane genelinde tutarlılığı sağladı.

• Ayrıntı düzeyi için minimalist bir yaklaşımı tercih ettik ve temiz simgeler hedefledik. Simgelerin ölçeklendiğinde görsel karmaşa yaratmamasını sağladık, bu da gereksiz ayrıntıları ortadan kaldırmamıza yardımcı oldu.

• İllüstrasyon Stilimiz özellikle HackerNoon logosundan ilham aldı. Retro, 80'lerden ilham alan piksel blok tasarım stili, markamızla mükemmel bir uyum içindedir. Bu, tasarım dilinin genel görsel kimlikle tutarlı olmasını sağladı. Biz bunlara Pikselli Simgeler diyoruz.

  
  

  
  

  

• Tutarlılığı korumak için 24 piksellik bir ızgarayı tercih ettik. (Çoğu sistem simgesi 24x24 boyutunda görüntülendiğinden, simgeleri tasarlarken 24 piksellik bir ızgara ideal olarak kabul edilir). Bu bize aşağıdakileri sağlayarak %100 ölçekte mükemmel piksel doğruluğuyla görüntülenecek simgeler oluşturmamıza olanak sağladı:

  
  

  • Simge içeriği için 22 piksellik canlı alan

  • Ve canlı alanı çevreleyen 1 piksellik dolgu

    
    

    

    
    

    
    

Fikir ve Eskiz

Fikir süreci, mevcut simgelerin temsil ettiği işlevlerin ve bunların ilgili kullanım durumlarının listelenmesiyle başladı. Daha sonra bu işlevler için simgeleri nasıl yeniden tasarlayabileceğimiz konusunda beyin fırtınası yaptık. Daha sonra hızlı karalamalar ve eskizlerle devam etti. Bu kaba taslaklar, simgeleri daha küçük ölçekte görselleştirmemize yardımcı oldu, daha hızlı yinelemelere ve uymayan fikirlerin atılmasına olanak sağladı.

Pikselli Simgelerin Tasarlanması

Bir sonraki önemli adım, elle çizilmiş bu konseptleri pikselli simgelere dönüştürmekti. Bu aşama öncelikle bu pikselli simgeleri oluşturmak için Adobe Illustrator'ın kullanılmasını ve daha sonra ölçeklenebilirliği test etmek için bunları farklı formatlarda ve boyutlarda dışa aktarmayı içeriyordu.

• Bu kaba çizimleri Illustrator'a aktararak başladık.

  
  

  

• Daha sonra pikselleştirme işlemini başlatmak için Izgara Aracını kullanarak 24 piksellik bir ızgara oluşturduk.

• Canlı Boyama Aracını kullandık ve %50'den fazla alan kaplayan her kareyi doldurduk.

  
  

• Tasarımdan memnun kaldığımızda Canlı Boyama'yı (Nesne Menüsü → Genişlet) şekiller oluşturacak şekilde genişlettik.

• Daha sonra bu şekilleri basitleştirmek için Şekil Oluşturucu Aracını kullandık ve işte! Pikselli ikonumuz hazırdı.

  
  

• Daha sonra simgeyi 12px, 16px, 24px ve 48px boyutunda SVG, PNG olarak dışa aktardık. (Bu boyutları fikir aşamasında listelediğimiz kullanım senaryolarına göre seçtik)

  
  

• Ayrıca simgelerle ilgili türleri gibi belirli ayrıntıları da belgeledik. Şu anda üç türümüz var: Düz (Dolgu), Normal ve Açık Simgeler. İlk üçe girmeyen simgeler için başka bir tür daha var: Marka Logoları . (Simgelerin belgelenmesi tasarım tutarlılığının korunmasına yardımcı olur ve gelecekteki güncellemeleri kolaylaştırır)

  
  

Topluluk Yayınına Hazırlık: Figma ve GitHub

Tüm ikonları istenilen formatlarda dışa aktardıktan sonra bu ikonları düzenleyip topluluk yayınına hazırladık. Bu amaçla Figma Topluluk Dosyasını ve GitHub Deposunu seçtik.

Her şeyi şu şekilde hazırladık:

• Gruplandırma ve Düzenleme: Simgeleri türlerine göre dört grup halinde düzenledik: Düz, Normal, Hafif ve Marka Logoları, böylece kullanıcıların belirli simgeleri aramasını kolaylaştırdık.

  
  

• Adlandırma Kuralı ve Klasör Yapısı: Kullanıcıların simgeleri tanımlamasını kolaylaştırmak için açık ve açıklayıcı bir adlandırma kuralı oluşturduk. GitHub Repo için şu şekilde bir klasör yapısı seçtik: file-type/color-theme(varsa)/size/icon-type/icon-name.file-extension (örn: PNG/For Dark Mode/24px/ Solid/Ad.png ve SVG/Solid/Ad.svg )

  
  

• Figma'da Bileşen Kütüphanesi Oluşturma ve Varyantları Tanımlama: Figma'nın bileşen sistemi, her simge için ana bileşenler oluşturmamıza olanak sağladı. Her simge için boyut değişkenleri oluşturduk ve kullanıcıların simgeleri herhangi bir sorun yaşamadan doğrudan örnekler üzerinden ölçeklendirmelerine olanak sağladık. Bu, simgelerin güncellenmesi sürecini kolaylaştırdı ve farklı tasarım dosyaları arasında tutarlılık sağladı.

• GitHub Deposunu Kurma: Piksel Simge Kitaplığımız için simgelerimizi yönetmemize ve daha geniş tasarım ve geliştirme topluluğuyla paylaşmamıza olanak tanıyan özel bir GitHub deposu oluşturduk.

  
  

• Github ile ilgili belgeler: GitHub Repo'muzda kapsamlı bir README dosyası hazırladık. Bu, Piksel Simge Kitaplığı'na bir giriş, bu pikselli simgeleri projenizde kullanmanın tüm olası yöntemleri hakkında bilgi, lisanslama ayrıntıları, iyi tanımlanmış katkıda bulunma yönergeleri ve diğer özel hususları içeriyordu.

  
  

  
  

• Figma ile ilgili Belgeler: Figma için, Pixel Icon Library'ye derinlemesine bir giriş ve bileşen kütüphanesi ile varyantlarının kullanımına ilişkin bir eğitim içeren ayrı bir Hakkında Sayfası oluşturduk. Ayrıca kolay referans olması açısından simgelerin adlarının yer aldığı bir liste de ekledik.

  
  

• Lisanslama: Simge kitaplığımız için lisanslama koşullarını açıkça tanımladık. Pixel Icon Library GitHub Repo ve Figma Dosyası, HackerNoon'a uygun şekilde atıf yapılarak kullanıma izin veren CC BY 4.0 Lisansı kapsamında lisanslanmıştır.

Bitmiş ürün:

Piksel Simge Kitaplığı'nı oluşturma yolculuğumuz yaratıcı keşifler, zorluklar ve büyümeyle doluydu. Font Awesome simgelerini kullanmaya başladığımız mütevazi başlangıcımızdan, site genelinde Şirket İçi simgeleri kullanmaya ve son olarak kendi Piksel Simge Kitaplığımızı oluşturmaya kadar.

Bu süreç bize ikonların sadece birer sembol olmadığını, başlı başına bir hikaye anlatıcısı olduğunu öğretti.

Bu yaratıcı yolculukta bize katılın ve HackerNoon'un Pixel Icon Library'sini deneyen ilk kişiler arasında olun.

Yaratıcı Kalın, İkonik Kalın.