Cara Membangun dan Memasarkan Kit UI yang Berhasil

Kisah di balik Paper Kit

Kit UI Kertas

Tantangan utama yang saya dan tim saya di Tim Kreatif hadapi sejak hari pertama adalah bagaimana menjadikan hobi kita cara ekonomis untuk mempertahankan diri. Untuk melakukan ini, kami harus mempelajari cara membuat Kit UI yang indah yang benar-benar ingin digunakan orang dan cara membuatnya di depan pengguna. Setelah beberapa kali mencoba dan banyak upaya yang dilakukan, kami telah memahami beberapa hal yang kami pikir dapat membantu siapa pun yang mencoba masuk ke ruang ini.
 
 Selama beberapa bulan pertama, mitra saya Alex bertanggung jawab atas pengembangan produk. Setelah kami mulai mendapatkan daya tarik pada beberapa kit, kami mendapat umpan balik dari para pelanggan kami dengan mengatakan mereka berharap kami merilis lebih banyak. Jadi itulah intinya saya melibatkan diri secara langsung ke dalam pengkodean untuk produk. Ingatlah ini adalah percobaan pertama saya.
 
 Selama artikel ini saya akan mencoba menjelaskan upaya saya sebaik mungkin dalam menciptakan dan kemudian menemukan audiens untuk salah satu kit kami yang paling populer: Paper Kit. Saya akan mencoba memberikan detail sebanyak mungkin, sehingga hasilnya seperti gambar ini yang menggambarkan cara menggambar kuda:

Beberapa tahun yang lalu saya melihat kutipan di twitter. Bunyinya seperti ini: "Beri saya enam jam untuk menebang pohon dan saya akan menghabiskan empat pertama mengasah kapak." Ini dikaitkan dengan Abraham Lincoln. Ini masuk akal bagi saya dan benar-benar mengubah perspektif saya tentang cara saya mendekati pekerjaan.
 
 Saya dulunya adalah tipe orang yang benar-benar menyelesaikan pekerjaan, menjalankan tugas-tugas. Selama bertahun-tahun bekerja, saya belajar lebih sabar, mengasah kapak. Bagaimana ini diterjemahkan ke pengembangan dan Kit UI? Pada dasarnya penelitian. Sebelum menulis baris kode apa pun, saya telah memeriksa semua Kit UI yang saya temukan di internet.
 
 Pasar seperti ThemeForest dan BootstrapBay memiliki berbagai macam tema. Kebanyakan dari mereka dibangun untuk tujuan tertentu. Mereka biasanya melakukan pekerjaan dengan baik jika Anda mencoba membangun situs presentasi tertentu. Tetapi kami ingin membangun sesuatu yang dapat digunakan oleh pengembang back-end dengan proyek yang kompleks. Jadi kami mengalihkan perhatian saya ke situs yang sangat kompleks seperti Airbnb, Uber, Twitter, Paper53 dll. Elemen apa yang mereka gunakan? Desain apa yang mereka sukai?

Elemen-elemen

Setelah melalui banyak situs dengan tujuan berbeda: presentasi, portofolio, sosial, kami menemukan daftar elemen yang merupakan inti:

  • tombol
  • input
  • kotak centang / radio
  • navigasi
  • dropdown
  • progress bar / slider
  • menu
  • tipografi
  • gambar
  • pemberitahuan
  • label
  • korsel

Ini mencakup lebih dari 90% fungsionalitas yang Anda perlukan untuk membangun halaman.

Perancangan dan pengembangan

Salah satu tren terbesar dalam desain saat ini adalah Material dan tampilan datar iOS. Saya sangat suka itu, tapi itu bukan gayaku. Saya ingin membangun sesuatu yang menyenangkan, menyenangkan, mudah diikuti. Saya melanjutkan banyak media untuk desainer, seperti Dribbble dan Behance. Tapi saya akhirnya memilih desain beberapa situs keren yang saya gunakan: Paper 53 and Headspace. Saya pikir mereka tampak hebat dan mereka memiliki efek yang sangat menenangkan ketika Anda menavigasi mereka.
 
 Jadi saya membuat palet warna dengan 6 warna, untuk menutupi kelas dasar untuk Bootstrap. Semua latar belakang berusaha menyerupai lembaran kertas dan animasi dimaksudkan untuk meniru gerakan selembar kertas. Untuk font saya pergi dengan font gratis yang ditawarkan oleh Google Fonts. Itu disebut Montserrat.
 
 Kit bisa sangat berguna tetapi seringkali orang tidak mengerti cara menggunakannya. Jadi saya membuat 3 halaman contoh: Login, Profil, dan Halaman Arahan untuk menunjukkan apa yang dapat Anda buat dengannya. Orang juga dapat menggunakannya secara langsung ketika membangun proyek mereka.

Halaman Pendaftaran dibuat dengan Paper KitHalaman Profil dibuat dengan Paper Kit.

Pengembangan berarti membuat file SASS untuk setiap komponen. File-file Sass ini dikompilasi ke CSS dan ditambahkan setelah Bootstrap. Jadi, seseorang yang sudah memiliki proyek Bootstrap dapat menambahkan file kustom dan mendapatkan desain baru. Modifikasi Javascript minimal karena kami hanya bermain dengan animasi default untuk beberapa elemen default di Bootstrap.
 
 Setelah mengembangkan elemen, kami mengujinya di semua layar browser dan perangkat. Alat yang hebat untuk melakukan ini adalah ini. Dan bagian terakhir dari penambahan gambar. Saya menghubungi beberapa seniman favorit saya di Paper 53 dan bertanya apakah boleh menggunakan gambar mereka. Dan mereka senang melakukannya :)
 
 Berita baiknya adalah bahwa membuat semua persiapan sebelumnya menghasilkan waktu pengembangan 3 minggu total. Iuhuu!

Promosi

Ketika semuanya sudah siap, kami telah memposting kit pada Paper Kit. Kami juga telah berbagi kit dengan beberapa teman sehingga mereka dapat memberi tahu kami jika mereka menemukan bug yang kami lewatkan. Ketika semuanya mendapat lampu hijau, kami melakukan beberapa kampanye pemasaran email masuk mengumumkan kit (untuk pengguna yang sudah berlangganan Tim Kreatif). Umpan baliknya positif jadi kami menghubungi beberapa komunitas. Kami mendapat tanggapan luar biasa tentang Berita Peretas, Perburuan Produk, Reddit. Bahkan lebih, beberapa mengambilnya dan menggunakannya untuk pekerjaan mereka sendiri. Ambil contoh Chris Pena, yang melakukan tutorial video dengannya.

Paper Kit ditawarkan sebagai unduhan gratis di Creative Tim.

Karena sebagian besar item yang kami gunakan untuk membuat kit adalah open-source, kami pikir itu adil, kami juga merilisnya untuk semua orang secara gratis. Jadi kami membuat repo di GitHub dan semua orang bisa berkontribusi padanya.

Pemeliharaan

Setelah membawanya, kami menemukan hal-hal baru yang harus kami jaga.

Cara terbaik bagi kami untuk melanjutkan aktivitas kami adalah membuat versi PRO yang dapat dibayar pengguna. Jadi kami melihat kembali ke fitur yang kami abaikan ketika kami pertama kali membuat rencana untuk kit. Kami mengambil elemen-elemen itu dan membangun paket yang lebih besar. Produk ini sukses dan banyak orang yang menggunakan kit gratis senang untuk meningkatkan dan mengembangkan produk mereka dengan lebih mudah.
 
 Ini memberi kami waktu untuk juga mengembangkan dashboard dengan desain yang sama. Ini terintegrasi dengan baik untuk back-end. Jadi, jika Anda membuat presentasi dan bagian yang berinteraksi dengan pengguna menggunakan Paper kit; Paper Dashboard menjadi admin yang hebat. Kami juga membuka-sumbernya dan menerima ulasan positif.

Dasbor Kertas

Di masa depan, kami berencana membuat lebih banyak versi untuk produk. Sketsa sudah tersedia dan kami juga sedang membangun versi PSD. Kami sudah mulai membuat versi Angular, ini adalah salah satu permintaan terbesar dari pengguna kami. Dan kami sedang melihat ke ReactJS, VueJS, dll.

Jika Anda tertarik berkolaborasi dengan kami, kirimkan saya email di cristina@creative-tim.com