Anatomi papan pemuka Bootstrap yang menghasilkan $ 1,000 setiap bulan

Kami di Creative Tim selalu ingin menyampaikan alat yang hebat kepada semua pembangun web yang menggunakan produk kami. Sekiranya anda ingin membaca lebih lanjut mengenai bagaimana kami membina perniagaan kami dan apakah dorongan kami, anda boleh menyemak artikel ini: Menumbuhkan projek sampingan menjadi perniagaan $ 17,000 sebulan.

Kami mahu melihat laman web dan aplikasi web yang lebih baik di internet. Oleh itu, kami memutuskan untuk berkongsi beberapa "bahan rahsia" yang menjadi asas salah satu papan pemuka kami yang paling popular: Light Bootstrap Dashboard. Sudah tentu, mereka tidak akan menjadi rahsia lagi, kerana kami akan berkongsi dengan anda. ?

Dalam kajian kes ini, saya akan berkongsi bagaimana kami mendapat idea untuk membuat papan pemuka, di mana kami mendapat inspirasi, bagaimana kami melaksanakan semuanya, bagaimana ia digunakan di dalam alat dalaman Stanford dan bagaimana kami membiayai pembangunan dan sokongannya. Berikut adalah gambaran keseluruhan artikel:

  1. Struktur asas dan fungsi teras
  2. Bagaimana reka bentuk dibuat
  3. Dibangun di atas sumber terbuka dan mengapa anda harus berdiri di atas bahu gergasi
  4. Lancarkan, Bangkit dan Bersinar
  5. Bagaimana kami membiayai sokongan dan menyelesaikan permintaan pemaju
  6. Rancangan pembangunan masa depan

Saya akan cuba memberikan seberapa banyak maklumat yang saya dapat, dengan harapan tutorial ini tidak seperti ini:

1. Struktur asas dan fungsi teras

Anda harus memikirkan proses di sebalik membuat papan pemuka sebagai ujian yang harus anda lalui setelah anda belajar banyak perkara. Sudah tentu anda akan belajar banyak semasa pengembangan produk. Tetapi pertama, anda harus memiliki pengetahuan yang kuat tentang apa itu "itu" dan bagaimana "digunakan". Sebelum menulis baris pertama kod, anda harus membuat kajian, membuat rancangan, membuat senarai dan sketsa yang harus dilakukan, dan cuba memvisualisasikan apa yang anda mahukan pada akhirnya.

Oleh kerana anda tidak mencipta semula roda, anda perlu melihat-lihat syarikat yang mencipta produk hebat untuk mendapatkan inspirasi (seperti Heroku, Slack, Mailchimp, Stripe). Lihat juga persaingan anda. Anda akan mendapat banyak maklumat. Dan semasa anda memulakan, lebih mudah untuk mengembangkan produk kerana anda membuat kerja rumah. Anda harus mengasah kapak anda, sebelum mula memotong:

"Sekiranya saya mempunyai lapan jam untuk menebang pohon, saya akan menghabiskan enam jam untuk mengasah kapak saya." - Abraham Lincoln

Kami melakukan kerja rumah kami dan kami mempunyai senarai lebih dari 100 papan pemuka percuma sebagai contoh dari mana kami dapat memperoleh inspirasi. Berikut adalah beberapa daripadanya:

Anda mempunyai senarai besar papan pemuka, dengan banyak warna, animasi, ikon cantik, carta kecil, carta besar, bar sisi statik atau tetap dan beratus-ratus ciri yang berbeza. Bagaimana anda tahu mana pilihan terbaik untuk khalayak anda?

Oleh kerana kami tidak tahu apa yang diinginkan oleh orang di dalam papan pemuka, kami memutuskan untuk menuliskan semua ciri yang terdapat pada papan pemuka ini dan hanya menggunakan yang paling umum. Kami menyedari bahawa ciri teras menyelesaikan sekitar 95% kes di mana anda memerlukan papan pemuka. Selebihnya 5% menyelesaikan masalah yang sangat spesifik.

Elemen asasnya ialah butang, ikon, tipografi, bar sisi, panel utama, bar navigasi dan dropdown. Ciri-ciri utama di kebanyakan papan pemuka adalah:

  1. Jadual
  2. Pemberitahuan
  3. Senarai Tugas
  4. Kad (untuk pelbagai jenis bentuk dan visualisasi maklumat yang lebih mudah)
  5. Carta (carta donat, carta garis, carta palang)
  6. Peta Google

Dengan penyesuaian visual yang kecil, anda dapat menghasilkan semula 95% papan pemuka dari mana-mana syarikat di dunia hanya dengan menggunakan elemen teras. Maka anda mempunyai baki 5%, yang selalu berbeza bergantung pada syarikat dan masalah yang diselesaikan. Di sini kita dapat menjumpai:

  1. Kad Sistem Kanban
  2. Fungsi seret & lepas
  3. Komponen garis masa
  4. Penyunting WYSIWYG
  5. Menu Sisi Navigasi 8 Tingkat
  6. Pemuat Naik Berbilang Fail + Seret & Lepas Muat Naik Fail
  7. Borang X-Boleh diedit
  8. Carta Morris, Carta Google, Carta Flot, amChart, Carta Aliran dan pelbagai jenis carta lain
  9. Dan senarai itu boleh diteruskan ke lebih daripada 200 ciri

Masalahnya ialah setiap plugin baru ini menambah CSS, JavaScript atau pustaka jQuery, dan HTML. Kami telah membina produk pada HTML biasa, tanpa kerangka kerja atau modular, jadi semua CSS / JavaScript akan berada dalam satu fail.

Jangan salah faham, saya tidak mengatakan bahawa ciri-cirinya tidak bagus. Ini adalah plugin hebat yang dikembangkan oleh orang hebat. Tetapi itu bukan sesuatu yang kami mahukan di papan pemuka ringkas kami.

Oleh itu, kami memutuskan untuk menjadikan produk itu sekecil mungkin (ingat namanya?). Papan Pemuka Bootstrap Ringan . Dan kami memutuskan untuk menerapkan hanya ciri-ciri yang menyelesaikan inti 95%.

2. Bagaimana reka bentuk dibuat

Setelah kami membuat rancangan untuk elemen-elemen yang akan dimiliki produk, kami harus memikirkan reka bentuk yang akan menjadi luar biasa. Reka bentuk yang mesra pengguna yang membuat orang ingin mempunyai papan pemuka ini di dalam sistem pengurusan kandungan mereka. Kami sudah mempunyai Kit Bootstrap Get Shit Done yang terkenal. Pembangun web menyukainya dan ia telah dimuat turun lebih daripada 30,000 kali. Oleh itu, kami memutuskan untuk menggunakannya sebagai reka bentuk teras untuk elemen asas seperti Butang, Navbar, Input, dll.

Kami menyedari bahawa kami memerlukan lebih daripada itu, untuk memberi kesan dan membuat orang sangat menginginkan produk kami. Kami tidak mahu menjadi "papan pemuka lain berdasarkan Bootstrap". Ke mana anda pergi apabila anda mahukan sumber reka bentuk yang hebat?

Sekiranya anda mencari "dashboard" di Dribbble, anda akan menemui banyak papan pemuka dan panel pentadbir yang sangat cantik. Sebenarnya, bagi mereka yang tidak tahu, Dribbble adalah seperti kokain visual. Lihat beberapa contoh yang dibuat oleh Cosmin Capitanu dan Mike dari CreativeMints:

Melihat semua contoh indah ini membuat kita sedar bahawa jika kita membina sesuatu seperti itu, kita pasti akan menonjol dari orang ramai. Juga, walaupun papan pemuka atau carta kelihatan sangat bagus, mereka akan sangat sukar atau mustahil untuk kita membuat kod dalam HTML, CSS dan JavaScript. Atau mereka menyelesaikan masalah yang sangat spesifik, seperti papan pemuka terbaru dengan Ukuran Tubuh.

Tidak mungkin 2 tahun yang lalu, kerana tahap pengetahuan dan pengalaman kami dengan HTML / CSS tidak begitu tinggi. Saya yakin bahawa jika kita ingin melaksanakannya hari ini, kita mempunyai peluang yang baik untuk membuat sesuatu yang serupa. Juga, keupayaan teknologi dan penyemak imbas akan membantu kita lebih banyak.

Kami ingin membina sesuatu yang dapat digunakan oleh banyak orang dari pelbagai bidang perniagaan. Terdapat juga papan pemuka yang ringkas dan cantik, tetapi kami tidak mahu menggunakannya sebagai inspirasi kerana kami mahukan sesuatu yang berbeza.

Saya tidak dapat menjelaskan dengan tepat apa yang kami mahukan, tetapi kami tidak merasa selesa dengan mana-mana contoh. Oleh itu, kami terus melakukan penyelidikan sehingga kami menjumpai sesuatu yang sangat kami sukai:

Ia tidak sempurna atau luar biasa seperti yang kita mahukan. Tetapi kami merasakan bahawa itu adalah pilihan yang tepat dan ini adalah contoh yang sangat baik dari mana kami dapat membina papan pemuka kami. Malah Pablo Picasso mengatakan bahawa pereka hebat mencuri dan Apple menghormati kata-katanya:

Kami tidak dapat berbuat demikian. Papan pemuka dari Heroku cukup baik sehingga memberi kita percikan itu. Oleh itu, kami memutuskan untuk menggunakannya hanya untuk inspirasi dan bukan untuk hasil akhir. Inilah lelaran pertama:

Ini adalah permulaan yang cukup baik. Untuk mendapatkan gambaran yang lebih baik tentang tampilannya, kita hanya perlu mengisi kawasan yang betul dengan beberapa kad dengan carta:

Warna kad tidak kelihatan begitu baik. Mereka terlalu terang untuk melihat bar sisi kiri. Oleh itu, kami mula menguji pelbagai kombinasi warna untuk carta dan bar sisi.

Pada ketika ini kami menyedari bahawa kami tidak perlu menyimpan hanya 1 warna untuk latar belakang bar sisi. Dan kita harus membiarkan pengguna memilih warna yang mereka mahukan. Kami tahu bahawa Apple mempunyai beberapa kecerunan yang indah untuk Aplikasi Kecergasan mereka, jadi kami memutuskan untuk menggunakan kecerunan tersebut sebagai asas untuk kecerunan masa depan kami.

Kami selalu berfikir bahawa jika kami melihat apa yang syarikat terbaik di dunia lakukan dari segi Reka Bentuk dan UX, kami akan menetapkan standard yang sangat tinggi untuk antara muka kami. Dengan cara ini, semakin banyak pembangun web akan mendapat akses percuma ke produk berkualiti tinggi.

Semasa kami melakukan semua kombinasi warna, kecerunan, kad dan carta yang berbeza ini, kami melihat bahawa lelaki dari Metalab, yang membina antara muka untuk Slack, menulis sebuah artikel: Slack's 2.8 Billion Dollar Secret Sauce. Ini akhirnya menjadi inspirasi untuk langkah seterusnya. Idea keseluruhan artikel adalah bahawa sos rahsia Slack dihasilkan dengan gabungan antara muka yang hebat dan suka bermain dengan interaksi kecil, yang menjadikan produk lebih mesra pengguna.

"Ia kelihatan berbeza, rasanya berbeda dan kedengarannya berbeza."

Kami mahu menambahkan sesuatu yang tidak ada di papan pemuka yang laintelah. Saya selalu menyukai bagaimana kecerunan dengan ketelusan dapat melihat gambar. Dan saya mula bermain dengan gambar yang berbeza dan kelegapan kecerunan. Omong-omong, Duotone Gradient Image yang kami gunakan pada tahun 2015 (kami bahkan tidak tahu bahawa ia mempunyai nama) nampaknya menjadi salah satu trend dalam reka bentuk web untuk tahun 2017. Ini cukup keren, bukan? ?

Tidak berpuas hati sepenuhnya ...

Ini adalah pandangan yang membuat kita merasa bahagia, itu sempurna untuk kita? Kami juga menambahkan interaksi kecil seperti animasi dropdown pembukaan atau kesan persembahan pemberitahuan:

Menambah gambar dengan kecerunan dan animasi kecil membuat kita berasa seperti lelaki ini:

3. Dibangun di atas sumber terbuka dan mengapa anda harus berdiri di bahu gergasi

Seperti yang kami katakan pada awalnya, kami tidak mahu mencipta semula roda. Kami juga tidak mempunyai wang untuk pakar kontrak yang mampu membina elemen yang diperlukan untuk papan pemuka. Kami memutuskan bahawa pilihan terbaik untuk kami adalah menggunakan apa yang dibuat dan dikongsi oleh orang lain secara percuma atau sumber terbuka .

Kami baru-baru ini mendapati bahawa apa yang sebenarnya kami lakukan adalah berdiri di bahu gergasi. Itu bermaksud kita menggunakan semaksimum mungkin dari alat yang sudah kuat dan dikendalikan dengan baik oleh masyarakat besar. Untuk lebih lanjut mengenai perkara ini dan mengapa anda harus menggunakan teknik ini semasa anda ingin membina sesuatu dari awal membaca artikel hebat ini, yang ditulis oleh Quincy Larson: Cara berdiri di atas bahu gergasi.

Mari kita lihat apa yang sebenarnya berada di bawah tudung.

  • Framework: Bootstrap - Bootstrap adalah kerangka HTML, CSS, dan JavaScript yang paling popular untuk membangunkan projek pertama bergerak responsif di web.
  • Design Layer: Get Shit Done Kit - Kit Antaramuka Pengguna Bootstrap 3 Percuma. Ini adalah titik permulaan terbaik untuk setiap projek dalam talian yang sedang anda bina. Ini telah menjadi tanda dagangan bagi komuniti dalam talian antara muka yang bersih dan cantik.
  • Font: Roboto - Font Google yang mempunyai dua sifat. Ia mempunyai kerangka mekanikal dan bentuknya sebahagian besarnya berbentuk geometri.
  • Ikon kecil: Font Awesome - Font Awesome memberi anda ikon vektor berskala yang dapat disesuaikan menggunakan CSS.
  • Ikon besar: Ikon Stroke 7 - Ini adalah satu set lengkap 202 ikon corak nipis yang diilhamkan oleh iOS 7.
  • Carta: Chartist.js - Chartist.js adalah produk komuniti yang kecewa dengan kebolehan yang disediakan oleh perpustakaan grafik lain.
  • Pemberitahuan: Bootstrap Notify - Plugin ini membantu anda mengubah amaran bootstrap standard menjadi "growl" seperti pemberitahuan.
  • Peta: Peta Google - Pemalam untuk melihat peta.
  • Foto: Unsplash - Foto beresolusi tinggi percuma (buat apa sahaja yang anda mahukan)
"Tidak ada yang tidak berguna. Segala sesuatu, termasuk kejayaan peribadi anda, mempunyai harga yang mesti dibayar ”- Napoleon Hill

Oleh kerana kami banyak menggunakan komuniti, adalah wajar untuk memberi kembali kepada komuniti. Oleh itu, kami memutuskan beberapa minggu yang lalu untuk melepaskannya di bawah Lesen MIT. Dengan cara ini, lebih banyak pembangun dapat menyumbang dan menggunakannya tanpa batasan undang-undang, untuk projek peribadi dan komersial.

4. Lancarkan, Bangkit dan Bersinar

Melakukan penyelidikan selama sekitar 50-60 hari (mengasah kapak) memberi kita kemungkinan untuk mengembangkan papan pemuka hanya dalam 15 hari (memotong pokok). ?

Apa yang anda buat setelah anda melancarkan projek? Anda perlu melihat apa maklum balasnya, jika orang ingin menggunakannya dan jika papan pemuka ringkas yang anda buat dapat menyelesaikan masalah bagi mereka. Sekiranya mereka tidak mahu menggunakannya, anda tidak mempunyai perniagaan. Kami mengemukakannya pada pelbagai komuniti dan ia berjalan dengan baik. Sebagai contoh, ia mendapat:

  • 170 suara positif pada Berita Peretas, puncak ke kedudukan 9 dan lebih daripada 88.000 tontonan untuk minggu itu
  • 247 suara positif pada / r / webdev subreddit
  • 80 suara positif pada / r / web_design subreddit (disekat pada 80 kerana mendapat tag "spam", kami mempunyai beberapa pop timbul yang kemudian kami hapus?)

Masyarakat mengesahkan idea tersebut. Kami juga mendapat banyak maklum balas, untuk menambahkan fail SASS untuk penyesuaian yang lebih mudah atau siarkan di GitHub.

Kemudian kami telah melihat bahawa terdapat banyak pemula yang hanya ingin belajar bagaimana menggunakan papan pemuka ini. Ia sangat indah sehingga orang yang tidak berinteraksi dengan sesuatu seperti itu ingin belajar bagaimana bekerja dengannya.

Kami menghabiskan masa sekitar 3 minggu untuk mengembangkan satu siri tutorial video mengenai cara meniru papan pemuka WordPress menggunakan produk kami. Kami memilih untuk menggunakan papan pemuka WordPress kerana ia adalah papan pemuka yang sangat popular. Dan kami ingin membiarkan orang memahami bahawa mereka boleh membina apa sahaja menggunakan produk kami.

Tutorial diterima dengan baik dan mempunyai lebih daripada 78,000 tontonan hari ini. Berikut adalah video pertama mengenai Cara membuat templat admin responsif menggunakan Light Bootstrap Dashboard 1/3.

5. Bagaimana kita membiayai sokongan dan permintaan dari pembangun web

Membangun produk dengan mudah, tetap hidup adalah sukar.

Terdapat banyak plugin / templat hebat di luar sana yang hampir mati kerana pencipta mereka tidak mempunyai wang yang mencukupi atau mereka tidak memperoleh pendapatan yang cukup untuk meneruskan pengembangan atau menyelesaikan masalah.

Kami tidak mahu kes yang sama untuk produk kami. Pilihan terbaik untuk memastikan produk tetap hidup adalah dengan membuat versi PRO yang dapat menjana pendapatan yang cukup untuk menyokong pengembangan berterusan.

Kami menggunakan maklum balas daripada pembangun web dan memutuskan untuk membuat versi Premium dengan lebih banyak elemen dan pemalam. Kami ingin menolong juga beberapa lelaki yang mahukan ciri khas dan termasuk dalam kategori 5%. Memilih plugin yang tepat yang dapat membantu sebilangan besar dari kategori 5% adalah sukar bagi kami.

Kami mula sekali lagi melakukan penyelidikan di papan pemuka premium. Dan kami menambah plugin seperti Kalendar Penuh, DataTables.net, Sweet Alert, Bootstrap Wizard dan beberapa halaman tambahan seperti Halaman Log Masuk, Halaman Daftar, Halaman Kunci.

Berikut adalah pratonton langsung versi PRO. Anda akan melihat bahawa kami menyimpan struktur yang sama dan ingin menjadikannya ringan, tanpa terlalu banyak pilihan dan ciri.

Dengan memperoleh pendapatan dari versi PRO, kami tidak hanya menyokong produk tetapi juga membuat jenis fail baru seperti versi JPA / Sketsa atau versi Angular 2. Kedua-duanya dikongsi secara percuma.

6. Rancangan pembangunan masa depan

Berikut adalah beberapa statistik mengenai papan pemuka:

Sangat mudah untuk menyesuaikannya agar sesuai dengan jenama anda. Ia digunakan dalam alat dalaman seperti Katalog Perubatan Kecemasan Jabatan Stanford:

Kami mendapat banyak permintaan daripada pembangun web yang mahu Papan Pemuka dibangun pada kerangka yang berbeza seperti Angular 2, Angular CLI, React, Meteor, VueJS atau sebagai Rails Gem. Membuat semua versi ini dan menyokongnya secara percuma di bawah lesen MIT akan berfungsi hanya jika kita mempunyai versi PRO untuk masing-masing. Kami bermula dengan Angular 2 dan kami telah melihat banyak orang yang menggunakannya dan kami mendapat banyak maklum balas mengenai cara memperbaikinya. Oleh itu, jika anda ingin terlibat dalam kerangka kerja lain atau jika anda mempunyai idea tentang bagaimana menjadikan produk ini lebih baik, kami dengan senang hati akan bercakap lebih banyak.

Diperlukan banyak keberanian untuk menunjukkan sumber kami dan proses yang kami lalui di belakang membina Light Bootstrap Dashboard. Harap anda dapat mempelajari sesuatu dari ini dan jika anda mempunyai maklum balas atau cadangan, saya dengan senang hati akan bercakap dengan anda dalam komen.

Pautan berguna:

  • Muat turun versi HTML dari www.creative-tim.com
  • Muat turun versi Angular dari www.creative-tim.com
  • Muat turun versi JPA / Sketsa dari www.pixelsvibe.com
  • Main dengannya di pratonton langsung
  • Menyumbang dan melaporkan masalah di repositori GitHub
  • Lihat blog kami: //blog.creative-tim.com/

Cari saya di: