Bagaimana Membina dan Memasarkan Kit UI yang Berjaya

Cerita di belakang Kit Kertas

Kit UI Kertas

Cabaran utama yang saya dan pasukan saya di Tim Kreatif telah berhadapan sejak hari 1 adalah cara untuk menjadikan hobi kami cara yang ekonomis untuk mengekalkan diri. Untuk melakukan ini, kami terpaksa belajar bagaimana untuk membina Kit UI yang cantik yang orang mahu menggunakan dan bagaimana untuk mendapatkannya di hadapan pengguna. Selepas beberapa percubaan dan banyak usaha dimasukkan ke dalamnya, kami telah memahami beberapa perkara yang kami fikir dapat membantu sesiapa yang cuba masuk ke dalam ruang ini.
 
 Selama beberapa bulan pertama, pasangan saya Alex bertanggungjawab terhadap perkembangan produk tersebut. Selepas kami mula mendapat daya tarikan pada beberapa kit, kami mendapat maklum balas daripada pelanggan kami yang mengatakan mereka berharap kami akan mengeluarkan lebih banyak lagi. Jadi itulah sebabnya saya mendapat diri saya terlibat langsung ke pengekodan untuk produk tersebut. Perlu diingat bahawa ini adalah percubaan pertama saya.
 
 Semasa artikel ini saya akan cuba untuk menerangkan sebaik mungkin usaha saya dalam membuat dan kemudian mencari penonton untuk salah satu kit kami yang paling popular: Kit Kertas. Saya akan cuba memberikan seberapa banyak maklumat yang mungkin, jadi hasilnya seperti gambar ini yang menggambarkan cara menggambar kuda:

Beberapa tahun yang lalu saya melihat petikan di twitter. Ia seperti ini: "Berikan saya enam jam untuk memotong pokok dan saya akan menghabiskan empat yang pertama mengasah kapak." Ia dikaitkan dengan Abraham Lincoln. Ini membuat banyak rasa untuk saya dan benar-benar mengubah perspektif saya dalam cara saya mendekati kerja.
 
 Saya pernah menjadi orang yang benar-benar berbuat baik, yang mengendalikan tugas. Selama bertahun-tahun kerja saya telah belajar untuk menjadi lebih sabar, mengasah kapak saya. Bagaimanakah cara ini diterjemahkan kepada Kit pembangunan dan UI? Pada dasarnya, penyelidikan. Sebelum menulis sebarang baris kod saya telah memeriksa semua Kit UI yang saya dapati di internet.
 
 Pasaran seperti WorldWideThemes.net dan BootstrapBay mempunyai pelbagai tema. Kebanyakan mereka dibina untuk tujuan tertentu. Mereka biasanya melakukan kerja yang baik jika anda cuba membina tapak persembahan tertentu. Tetapi kami mahu membina sesuatu yang boleh digunakan pemaju back-end dengan projek yang kompleks. Oleh itu, kami mengalih perhatian saya ke tapak kompleks seperti Airbnb, Uber, Twitter, Paper53 dan lain-lain. Unsur-unsur apa yang mereka gunakan? Reka bentuk apa yang mereka suka?

Elemen

Selepas melalui banyak laman web dengan tujuan yang berlainan: pembentangan, portfolio, sosial, kami datang dengan senarai unsur-unsur yang teras:

  • butang
  • input
  • kotak / radio
  • navigasi
  • dropdown
  • bar kemajuan / slider
  • menu
  • tipografi
  • imej
  • pemberitahuan
  • label
  • karusel

Meliputi lebih dari 90% fungsi yang anda perlukan untuk membina halaman.

Reka Bentuk dan Pembangunan

Salah satu trend yang paling besar dalam reka bentuk pada masa ini ialah rupa dan bentuk rata IOS. Saya sangat menyukai mereka, tetapi mereka bukan gaya saya. Saya mahu membina sesuatu yang suka bermain, menyeronokkan, mudah diikuti. Saya pergi banyak medium untuk pereka, seperti Dribbble dan Behance. Tetapi akhirnya saya menetap pada reka bentuk beberapa laman web yang benar-benar keren yang saya gunakan sendiri: Kertas 53 dan Headspace. Saya fikir mereka kelihatan hebat dan mereka mempunyai kesan yang sangat menenangkan apabila anda menavigasi mereka.
 
 Jadi saya buat palet warna dengan 6 warna, untuk menampung kelas asas untuk Bootstrap. Semua latar belakang cuba menyerupai kepingan kertas dan animasi dimaksudkan untuk meniru pergerakan sekeping kertas. Untuk fon saya pergi dengan font percuma yang ditawarkan oleh Google Font. Ia dipanggil Montserrat.
 
 Kit boleh menjadi sangat berguna tetapi sering orang tidak faham cara menggunakannya. Jadi saya buat 3 contoh halaman: Log Masuk, Profil dan Halaman Pendaratan untuk menunjukkan apa yang boleh anda bina dengannya. Orang juga boleh menggunakannya secara langsung semasa membina projek mereka.

Daftar Halaman dibuat dengan Kit KertasHalaman Profil dibuat dengan Kertas Kit.

Perkembangan itu bermakna mewujudkan fail SASS untuk setiap komponen. Fail Sass ini dikumpulkan kepada CSS dan ditambahkan selepas Bootstrap. Jadi, seseorang yang sudah mempunyai projek Bootstrap hanya boleh menambah fail tersuai dan mendapatkan reka bentuk baru. Pengubahsuaian Javascript adalah minimal kerana kita hanya bermain dengan animasi lalai untuk beberapa unsur lalai dalam Bootstrap.
 
 Selepas membangunkan unsur-unsur, kami menguji mereka pada semua pelayar dan skrin peranti. Alat yang hebat untuk melakukan ini adalah ini. Dan bahagian terakhir menambah imej. Saya berhubung dengan beberapa artis fav saya di Kertas 53 dan bertanya kepada mereka jika ia adalah ok untuk menggunakan lukisan mereka. Dan mereka gembira melakukannya :)
 
 Berita baiknya ialah membuat semua bekas persiapan membawa kepada masa pembangunan keseluruhan sebanyak 3 minggu. Iuhuu!

Promosi

Apabila segala-galanya siap, kami telah memasang kit di Kit Kertas. Kami juga berkongsi kit dengan beberapa kawan supaya mereka dapat memberitahu kami jika mereka mendapati apa-apa pepijat yang kami terlepas. Apabila semuanya mendapat lampu hijau, kami melakukan beberapa kempen pemasaran e-mel masuk yang mengumumkan kit (kepada pengguna yang telah melanggan Tim Kreatif). Maklum balas adalah positif supaya kami dapat menjangkau beberapa komuniti. Kami mendapat jawapan yang hebat mengenai Berita Hacker, Pemburuan Produk, Reddit. Lebih-lebih lagi, ada yang mengambilnya dan menggunakannya untuk kerja mereka sendiri. Ambil contoh Chris Pena, yang melakukan tutorial video dengannya.

Kit Kertas yang ditawarkan sebagai muat turun percuma pada Tim Kreatif.

Oleh kerana kebanyakan item yang kami gunakan untuk membuat kit itu adalah sumber terbuka kami fikir ia hanya adil kami juga melepaskannya untuk semua orang secara percuma. Jadi kami buat repo di GitHub dan semua orang boleh menyumbang kepadanya.

Penyelenggaraan

Selepas mencubanya, kami menemui perkara-perkara baru yang perlu kami jaga.

Cara terbaik bagi kami untuk mengekalkan aktiviti kami bergerak ke hadapan adalah membuat versi PRO yang pengguna dapat membayar. Oleh itu, kita kembali kepada ciri-ciri yang kita inggalkan apabila kita mula membuat rancangan untuk kit tersebut. Kami mengambil elemen tersebut dan membina pek yang lebih besar. Produk itu adalah hit dan ramai orang yang menggunakan kit percuma dengan senang hati menaikkan dan mengembangkan produk mereka dengan lebih mudah.
 
 Ini memberi kita masa untuk membangunkan papan pemuka dengan reka bentuk yang sama. Ini mengintegrasikan dengan baik untuk hujung belakang. Jadi, jika anda membina persembahan anda dan bahagian yang pengguna berinteraksi dengan menggunakan Kertas kertas; Papan Pemuka Kertas membuat pentadbir yang hebat. Kami juga mempunyai sumber terbuka dan mendapat ulasan positif.

Papan Pemuka Kertas

Pada masa akan datang, kami merancang untuk membuat lebih banyak versi produk. Lakaran sudah tersedia dan kami juga membina versi JPA. Kami telah mula membuat versi Sudut, ini adalah salah satu permintaan terbesar dari pengguna kami. Dan kami sedang melihat ReactJS, VueJS, dan sebagainya.

Jika anda berminat untuk bekerjasama dengan kami, hantarkan saya e-mel di cristina@creative-tim.com