Başarılı Bir UI Kiti Nasıl Oluşturulur ve Pazarlanır

Paper Kit'in arkasındaki hikaye

Kağıt UI Takımı

Creative Tim'deki ekibim ve benim ilk günden beri karşılaştığımız en büyük zorluk, hobimizi kendimizi sürdürmenin ekonomik bir yolu haline getirmekti. Bunu yapmak için, insanların gerçekten kullanmak istedikleri güzel UI Kitlerini nasıl oluşturacağımızı ve kullanıcıların önüne nasıl çıkaracağımızı öğrenmek zorunda kaldık. Birkaç denemeden ve bu konuda çok çaba sarf ettikten sonra, bu alana girmeye çalışan kimseye yardım edebileceğini düşündüğümüz birkaç şey anladık.
 
 İlk birkaç ay boyunca, ortağım Alex, ürünlerin geliştirilmesinden sorumluydu. Bazı kitler üzerinde çekişe geçtikten sonra, müşterilerimizden daha fazla yayınlanmasını istediklerini söyleyen geri bildirimler aldık. Demek istediğim, kendimi doğrudan ürün kodlamasına dahil etmemdi. Bu benim ilk denememdi.
 
 Bu yazı sırasında en popüler kitlerimizden biri için bir kitle yaratma ve daha sonra kitleyi bulma konusundaki çabalarımı en iyi anlatmaya çalışacağım: Kağıt Seti. Olabildiğince fazla ayrıntı vermeye çalışacağım, sonuçta at çizmeyi açıklayan bu resim şöyle:

Birkaç yıl önce Twitter'dan bir alıntı gördüm. Şöyle şöyle devam ediyor: “Bana bir ağaç kesmek için altı saat ver ve ilk dördü baltayı bilerek harcayacağım.” Abraham Lincoln'e atfedilir. Bu benim için çok anlamlıydı ve işe yaklaşım şeklimdeki bakış açımı gerçekten değiştirdi.
 
 Eskiden işleri halletmek için işe yaramaz bir insandım. İş yıllarım boyunca daha sabırlı olmayı öğrendim, baltamı keskinleştirdim. Bu, geliştirme ve UI Kitine nasıl dönüşür? Temel olarak, araştırma. Herhangi bir kod satırını yazmadan önce, internette bulduğum tüm UI Kitlerini inceledim.
 
 ThemeForest ve BootstrapBay gibi pazarlar çok çeşitli temalara sahiptir. Çoğu belirli bir amaç için üretildi. Belirli bir sunum sitesi oluşturmaya çalışıyorsanız, genellikle iyi bir iş çıkarırlar. Ancak, arka uç geliştiricinin karmaşık bir projeyle kullanabileceği bir şey inşa etmek istedik. Bu yüzden dikkatimi Airbnb, Uber, Twitter, Paper53 vb. Gibi gerçek karmaşık sitelere kaydırdık. Hangi öğeleri kullanıyorlar? Hangi tasarımı tercih ediyorlar?

Elementler

Farklı amaçlarla birçok siteden geçtikten sonra: sunum, portföy, sosyal, temel olan unsurların listesini bulduk:

  • düğmeleri
  • girişler
  • Onay kutusu / radyo
  • navigasyon
  • yıkılmak
  • ilerleme çubukları / sürgüleri
  • menüler
  • matbaacılık
  • Görüntüler
  • bildirimleri
  • etiketler
  • atlıkarınca

Bu sayfa oluşturmak için gereken işlevselliğin% 90'ından fazlasını kapsar.

Tasarım ve gelişim

Şu an tasarımdaki en büyük trendlerden biri Material ve iOS düz görünüşü idi. Onları gerçekten sevdim ama onlar benim tarzım değildi. Oynak, eğlenceli, takip etmesi kolay bir şey inşa etmek istedim. Tasarımcılar için Dribbble ve Behance gibi birçok aracı kullandım. Ama sonunda kendimi kullandığım harika sitelerin tasarımına karar verdim: Paper 53 ve Headspace. Harika göründüklerini ve gezinirken gerçekten sakinleştirici bir etkisi olduğunu düşündüm.
 
 Bu yüzden Bootstrap için temel sınıfları kapsayacak şekilde 6 renkten oluşan bir renk paleti oluşturdum. Tüm arka planlar, kağıda benzemeye çalışıyor ve animasyonlar bir kağıdın hareketlerini taklit etmek içindir. Yazı tipleri için Google Yazı Tipleri tarafından sunulan ücretsiz bir yazı tipiyle gittim. Buna Montserrat denir.
 
 Bir kit çok faydalı olabilir ancak çoğu zaman insanlar nasıl kullanılacağını anlamamaktadır. Bu yüzden 3 örnek sayfa hazırladım: bir Giriş, bir Profil ve onunla neler yapabileceğinizi göstermek için bir Giriş Sayfası. İnsanlar, projelerini oluştururken bunları doğrudan kullanabilirler.

Paper Kit ile yapılan Kayıt SayfasıPaper Kit ile yapılan Profil Sayfası.

Geliştirme, her bileşen için SASS dosyaları oluşturmak anlamına geliyordu. Bu Sass dosyaları CSS'ye derlendi ve Bootstrap'den sonra eklendi. Öyleyse, zaten bir Bootstrap projesi olan biri sadece özel dosyaları ekleyebilir ve yeni tasarımı alabilir. Javascript değişiklikleri çok azdı çünkü Bootstrap'daki bazı varsayılan elementler için sadece varsayılan animasyonlarla oynadık.
 
 Öğeleri geliştirdikten sonra, onları tüm tarayıcı ve cihaz ekranlarında test ettik. Bunu yapmak için harika bir araçtır. Ve görüntüleri eklemenin son kısmı. Paper 53'teki favorilerimden bazılarıyla temasa geçtim ve çizimlerini kullanmanın uygun olup olmadığını sordum. Ve bunu yapmaktan mutlu oldular :)
 
 İyi haber şu ki, tüm eski hazırlıkları yapmak 3 hafta toplam gelişme süresine yol açtı. Iuhuu!

tanıtım

Her şey hazır olduğunda, kiti Paper Kit'e koyduk. Ayrıca kiti birkaç arkadaşımızla paylaştık, böylece kaçırdığımız herhangi bir hata bulduklarında bize haber verebilirler. Her şey yeşil ışığa ulaştığında, kiti belirten bazı e-posta pazarlama kampanyaları yaptık (Creative Tim'e zaten abone olan kullanıcılara). Geribildirim olumluydu, bu yüzden bazı topluluklara ulaştık. Hacker News, Product Hunt, Reddit konusunda çok iyi tepkiler aldık. Dahası, bazıları aldı ve kendi işleri için kullandı. Örnek bir video eğitimi veren Chris Pena'yı ele alalım.

Paper Kit, Creative Tim'e ücretsiz indirilebildi.

Kiti oluşturmak için kullandığımız öğelerin çoğu açık kaynak olduğundan, herkesin ücretsiz olarak çıkarmasının sadece adil olduğunu düşündük. Böylece GitHub'da bir repo oluşturduk ve herkes buna katkıda bulunabilir.

Bakım

Lauch yaptıktan sonra, dikkat etmemiz gereken yeni şeyler keşfettik.

Faaliyetlerimizi devam ettirmek için en iyi yol, kullanıcıların ödeyebilecekleri bir PRO sürümü hazırlamaktı. Kit için ilk planımızı yaptığımızda gözden kaçırdığımız özelliklere tekrar baktık. Bu elementleri aldık ve daha büyük bir paket yaptık. Ürün çok etkileyiciydi ve ücretsiz seti kullanan birçok kişi ürünlerini daha kolay bir şekilde yükseltip geliştirmekten mutlu oldular.
 
 Bu da bize aynı tasarıma sahip bir gösterge panosu geliştirme zamanı verdi. Bu, arka uç için güzel bir şekilde bütünleşir. Dolayısıyla, sunumunuzu ve kullanıcının Paper kitini kullanarak etkileşime girdiği kısmı oluşturuyorsanız; Kağıt Gösterge Paneli harika bir yönetici için yapar. Ayrıca açık kaynaklı ve olumlu eleştiriler aldık.

Kağıt Gösterge Tablosu

Gelecekte, ürün için daha fazla sürüm oluşturmayı planlıyoruz. Eskiz zaten hazır ve PSD versiyonunu da hazırlıyoruz. Angular sürümünü oluşturmaya başladık, bu kullanıcılarımızdan en büyük isteğimizden biri. Ve ReactJS, VueJS, vb.

Bizimle işbirliği yapmak istiyorsanız, cristina@creative-tim.com adresine bir e-posta gönderin.