Bootstrap informācijas paneļa anatomija, kas katru mēnesi nopelna 1000 ASV dolāru

Mēs, Creative Tim, vienmēr esam vēlējušies piegādāt lieliskus rīkus visiem tīmekļa izstrādātājiem, kuri izmanto mūsu produktus. Ja vēlaties uzzināt vairāk par to, kā mēs esam uzbūvējuši savu biznesu un kāds ir mūsu dzinulis, varat pārbaudīt šo rakstu: Sānu projekta izveide 17 000 ASV dolāru mēnesī.

Mēs vēlamies redzēt labākas vietnes un tīmekļa lietotnes internetā. Tāpēc mēs nolēmām dalīties ar dažām “slepenajām sastāvdaļām”, kas veido pamatu vienam no mūsu populārākajiem informācijas paneļiem: Light Bootstrap Dashboard. Protams, tie vairs nebūs noslēpums, jo mēs dalīsimies ar jums. ?

Šajā gadījuma izpētē es dalīšos, kā mums radās ideja izveidot informācijas paneli, kur mēs guvām iedvesmu, kā mēs visu ieviesām, kā tas tika izmantots Stanforda iekšējos rīkos un kā mēs finansējām attīstību un tā atbalstu. Šeit ir raksta pārskats:

  1. Pamatstruktūra un galvenā funkcionalitāte
  2. Kā dizains tika izveidots
  3. Uzbūvēts virs atvērtā koda un kāpēc jums vajadzētu stāvēt uz milžu pleciem
  4. Uzsākt, Rise un Shine
  5. Kā mēs finansējam atbalstu un risinām izstrādātāju pieprasījumus
  6. Nākotnes attīstības plāni

Es centīšos sniegt pēc iespējas vairāk informācijas, cerot, ka šī apmācība nebūs šāda:

1. Pamatstruktūra un galvenā funkcionalitāte

Informācijas paneļa izveides process jums būtu jādomā par testu, kas jums jāveic pēc tam, kad esat daudz iemācījies. Protams, izstrādājuma izstrādes laikā jūs daudz uzzināsiet. Bet vispirms jums ir jābūt spēcīgām zināšanām par to, kas ir “tas” un kā tas “tiek izmantots”. Pirms pirmās koda rindas uzrakstīšanas jums vajadzētu veikt dažus pētījumus, sastādīt plānus, izveidot uzdevumu sarakstus un skices un mēģināt vizualizēt to, ko jūs vēlaties iegūt beigās.

Tā kā jūs no jauna neizgudrojat riteni, jums jāaplūko apkārtējie uzņēmumi, kas rada lieliskus produktus, lai iegūtu iedvesmu (piemēram, Heroku, Slack, Mailchimp, Stripe). Apskatiet arī savu konkurenci. Jūs saņemsiet daudz informācijas. Sākot darbu, produktu būs vieglāk izstrādāt, jo jūs izpildījāt mājasdarbu. Pirms sākat griezt, jums jāasina cirvis:

"Ja man būtu astoņas stundas, lai nocirstu koku, es pavadītu sešas stundas, cirpjot cirvi." - Ābrahams Linkolns

Mēs izpildījām mājasdarbus, un mums ir milzīgs vairāk nekā 100 bezmaksas informācijas paneļu saraksts kā piemēri, no kuriem mēs varam smelties iedvesmu. Šeit ir daži no tiem:

Jums ir milzīgs informācijas paneļu saraksts ar daudzām krāsām, animācijām, skaistām ikonām, mazām diagrammām, lielām diagrammām, statisku vai fiksētu sānjoslu un simtiem dažādu funkciju. Kā uzzināt, kurš ir labākais variants jūsu auditorijai?

Tā kā mēs nezinājām, ko cilvēki vēlas informācijas paneļa iekšienē, mēs nolēmām pierakstīt visas funkcijas, kuras satur šie informācijas paneļi, un izmantot tikai visizplatītākās. Mēs sapratām, ka galvenās funkcijas atrisina aptuveni 95% gadījumu, kad jums ir nepieciešams informācijas panelis. Atlikušie 5% atrisina ļoti specifiskas problēmas.

Pamatelementi ir pogas, ikonas, tipogrāfija, sānjosla, galvenais panelis, navigācijas joslas un nolaižamās izvēlnes. Galvenās iezīmes lielākajā daļā informācijas paneļu ir šādas:

  1. Galdi
  2. Paziņojumi
  3. Uzdevumu saraksti
  4. Kartes (dažāda veida veidiem un ērtākai informācijas vizualizēšanai)
  5. Diagrammas (virtuļu diagramma, līniju diagramma, joslu diagramma)
  6. Google kartes

Izmantojot nelielas vizuālās korekcijas, jūs varat reproducēt 95% jebkura paneļa no jebkura uzņēmuma pasaulē, vienkārši izmantojot galvenos elementus. Tad jums ir atlikušie 5%, kas vienmēr ir atšķirīgi atkarībā no uzņēmuma un tā risinātajām problēmām. Šeit mēs varam atrast:

  1. Kanban sistēmas kartes
  2. Velciet un nometiet funkcionalitāti
  3. Laika skalas komponenti
  4. WYSIWYG redaktors
  5. 8 līmeņu navigācijas sānjoslas izvēlne
  6. Vairāku failu augšupielādētājs + Velciet un nometiet failu augšupielādētāju
  7. X veidlapa ir rediģējama
  8. Morisa diagramma, Google diagramma, Flot diagramma, amChart, Plūsmas diagramma un daudzi citi diagrammu veidi
  9. Un sarakstā var turpināt izmantot vairāk nekā 200 funkcijas

Problēma ir tā, ka katrs no šiem jaunajiem spraudņiem pievieno papildu CSS, JavaScript vai jQuery bibliotēkas un HTML. Mēs esam izveidojuši produktu uz vienkārša HTML, bez rāmjiem vai moduļu trikiem, tāpēc visi CSS / JavaScript būtu vienā failā.

Nepārprotiet, es nesaku, ka funkcijas nebija labas. Tie ir lieliski spraudņi, kurus izstrādājuši lieliski cilvēki. Bet tas nebija kaut kas tāds, ko mēs vēlējāmies, lai tas būtu mūsu vienkāršajā informācijas panelī.

Tāpēc mēs nolēmām saglabāt produktu pēc iespējas vieglāku (atceraties nosaukumu?). Viegls sāknēšanas siksnas panelis . Un mēs nolēmām ieviest tikai tās funkcijas, kas atrisināja 95% galveno.

2. Kā tika izveidots dizains

Pēc tam, kad mēs esam izstrādājuši izstrādājuma elementu plānu, mums bija jādomā par izcilu dizainu. Lietotājam draudzīgs dizains, kas cilvēkiem liek vēlēties, lai šis informācijas panelis būtu viņu satura pārvaldības sistēmā. Mums jau bija slavenais komplekts Bootstrap Get Shit Done Kit. Tīmekļa izstrādātājiem tas patika, un tas ir lejupielādēts vairāk nekā 30 000 reižu. Tāpēc mēs nolēmām to izmantot kā pamatelementu, piemēram, pogas, navigācijas joslas, ievades utt.

Mēs sapratām, ka mums tomēr ir vajadzīgs kas vairāk, lai radītu iespaidu un liktu cilvēkiem ļoti vēlēties mūsu produktu. Mēs nevēlējāmies būt “vēl viens informācijas panelis, kura pamatā ir Bootstrap”. Kurp jūs dodaties, kad vēlaties lielisku dizaina resursu?

Ja vietnē Dribbble meklējat “informācijas panelis”, atradīsit daudz neticami skaistu informācijas paneļu un administratora paneļu. Patiesībā tiem, kas nezina, Dribls ir kā vizuāls kokaīns. Pārbaudiet dažus no šiem piemēriem, ko izveidojuši Cosmin Capitanu un Mike no CreativeMints:

Redzot visus šos skaistos piemērus, mēs sapratām, ka, ja mēs uzbūvēsim kaut ko tādu, mēs noteikti izcelsimies no pūļa. Turklāt, pat ja informācijas paneļi vai diagrammas izskatās ļoti labi, mums būs ļoti grūti vai neiespējami faktiski kodēt HTML, CSS un JavaScript. Vai arī viņi risina ļoti specifisku problēmu, piemēram, jaunāko informācijas paneli ar ķermeņa mērījumiem.

Pirms 2 gadiem tas nebija iespējams, jo mūsu zināšanu un pieredzes līmenis ar HTML / CSS nebija tik augsts. Esmu pārliecināts, ka, ja mēs vēlētos tos ieviest šodien, mums būtu labas izredzes izveidot kaut ko ļoti līdzīgu. Arī tehnoloģija un pārlūka iespējas mums palīdzēs vairāk.

Mēs vēlējāmies izveidot kaut ko tādu, ko var izmantot daudzi cilvēki no dažādām uzņēmējdarbības jomām. Bija arī daži vienkārši un skaisti informācijas paneļi, taču mēs nevēlējāmies tos izmantot kā iedvesmu, jo vēlējāmies kaut ko citu.

Es nevaru precīzi izskaidrot, ko mēs vēlējāmies, taču mēs nejutāmies ērti nevienā no piemēriem. Tāpēc mēs turpinājām pētīt, līdz atradām kaut ko, kas mums patiešām patika:

Tas nebija ideāls un tik izcils, kā mēs to vēlējāmies. Bet mēs uzskatījām, ka tā ir pareizā izvēle, un tas ir ļoti labs piemērs, no kura mēs varam izveidot savu informācijas paneli. Pat Pablo Pikaso teica, ka izcili dizaineri zog un Apple ciena viņa vārdu:

Mēs to nevarējām izdarīt. Heroku informācijas panelis bija pietiekami labs, ka tas mums iedeva šo dzirksti. Tāpēc mēs nolēmām to izmantot tikai iedvesmai, nevis gala rezultātam. Šeit ir pirmā iterācija:

Tas ir diezgan labs sākums. Lai labāk apskatītu, kā tas izskatīsies, mums vienkārši jāaizpilda pareizais apgabals ar dažām kartēm ar diagrammām:

Kartīšu krāsas neizskatījās tik labi. Viņi bija pārāk spilgti, lai skatītos kreiso sānjoslu. Tāpēc mēs sākām testēt dažādas krāsu kombinācijas diagrammām un sānjoslai.

Šajā brīdī mēs sapratām, ka sānjoslas fonam nav jāsaglabā tikai viena krāsa. Un mums jāļauj lietotājiem izvēlēties, kuru krāsu viņi vēlas. Mēs zinājām, ka Apple fitnesa lietotnei ir daži skaisti gradienti, tāpēc mēs nolēmām izmantot šos gradientus kā pamatu mūsu nākotnes slīpumiem.

Mēs vienmēr esam domājuši, ka, ja mēs vērojam, ko dizaina un UX jomā dara labākie pasaules uzņēmumi, mēs savām saskarnēm izvirzīsim ļoti augstus standartus. Tādā veidā arvien vairāk tīmekļa izstrādātājiem būs brīva pieeja augstas kvalitātes produktiem.

Kamēr mēs darījām visas šīs dažādās krāsu, gradientu, kāršu un diagrammu kombinācijas, mēs redzējām, ka puiši no Metalab, kuri izveidoja saskarni Slack, uzrakstīja rakstu: Slack 2,8 miljardu dolāru slepenā mērce. Tas beidzot bija iedvesma nākamajiem soļiem. Raksta vispārējā ideja bija tāda, ka Slack slepeno mērci rada lieliskas un rotaļīgas saskarnes kombinācija ar nelielu mijiedarbību, kas padara produktu lietotājam draudzīgāku.

"Tas izskatās citādi, tas jūtas citādi un izklausās citādi."

Mēs vēlējāmies pievienot kaut ko citubija. Man vienmēr ir paticis, kā gradients ar zināmu caurspīdīgumu var izskatīties pār attēlu. Un es esmu sākusi spēlēt ar dažādiem attēliem un gradienta necaurredzamību. Starp citu, Duotone Gradient Image, kuru izmantojām 2015. gadā (mēs pat nezinājām, ka tam ir nosaukums), šķiet, ir viena no 2017. gada tīmekļa dizaina tendencēm. Tas ir diezgan forši, vai ne? ?

Nav pilnībā apmierināts ...

Tas bija skats, kas mums lika justies laimīgiem, vai tas mums vienkārši bija ideāls? Mēs pievienojām arī nelielas mijiedarbības, piemēram, nolaižamās izvēlnes animāciju vai paziņojuma šova efektu:

Attēla pievienošana ar gradientiem un mazajām animācijām lika mums justies kā šim puisim:

3. Uzbūvēts virs atvērtā koda un kāpēc jums vajadzētu stāvēt uz milžu pleciem

Kā mēs teicām sākumā, mēs nevēlējāmies no jauna izgudrot riteni. Mums nebija arī naudas, lai noslēgtu līgumus ar ekspertiem, kuri varētu izveidot paneļa vajadzībām nepieciešamos elementus. Mēs nolēmām, ka labākais risinājums mums ir izmantot to, ko citi cilvēki izveidoja un kopīgoja par brīvu vai atvērtu avotu .

Mēs nesen atklājām, ka tas, ko mēs faktiski darījām, stāvēja uz milžu pleciem. Tas nozīmē, ka mēs izmantojām pēc iespējas vairāk no rīkiem, kas jau ir spēcīgi un labi kopti lielās kopienās. Lai uzzinātu vairāk par to un kāpēc jums vajadzētu izmantot šo paņēmienu, ja vēlaties izveidot kaut ko no nulles, izlasiet šo lielisko rakstu, kuru uzrakstījis Kvinsijs Larsons: Kā stāvēt uz milžu pleciem.

Apskatīsim, kas patiesībā atrodas zem pārsega.

  • Sistēma: Bootstrap - Bootstrap ir vispopulārākais HTML, CSS un JavaScript ietvars, lai tīmeklī izstrādātu atsaucīgus, pirmos mobilos projektus.
  • Dizaina slānis: Get Shit Done Kit - bezmaksas Bootstrap 3 lietotāja saskarnes komplekts. Tas ir labākais sākuma punkts jebkuram jūsu veidotajam tiešsaistes projektam. Tā ir kļuvusi par tīras un jaukas saskarnes tiešsaistes kopienas preču zīmi.
  • Fonts: Roboto - Google fonts, kam ir divējāds raksturs. Tam ir mehānisks skelets, un formas lielākoties ir ģeometriskas.
  • Mazas ikonas: Fonts Awesome - Fonts Awesome sniedz mērogojamas vektora ikonas, kuras var pielāgot, izmantojot CSS.
  • Lielas ikonas: Stroke 7 ikonas - tas ir pilns 202 plānu insultu ikonu komplekts, kas iedvesmots no iOS 7.
  • Diagrammas: Chartist.js - Chartist.js ir kopienas produkts, kas bija vīlušies par citu diagrammu bibliotēku sniegtajām spējām.
  • Paziņojumi: Bootstrap Notify - šis spraudnis palīdz pārvērst standarta sāknēšanas joslas brīdinājumus par tādiem paziņojumiem kā rēciens.
  • Maps: Google Maps - spraudnis karšu skatīšanai.
  • Fotoattēli: atdalīšana - bezmaksas (dariet visu, ko vēlaties) augstas izšķirtspējas fotoattēli.
“Nav nekā tāda, kas būtu par velti. Visam, ieskaitot jūsu personīgos panākumus, ir cena, kas jāmaksā ”- Napoleona kalns

Tā kā mēs daudz izmantojām no kopienas, būtu godīgi atdot sabiedrībai. Tāpēc pirms pāris nedēļām mēs nolēmām to atbrīvot ar MIT licenci. Tādā veidā vairāk izstrādātāju var palīdzēt un izmantot to bez jebkādiem juridiskiem ierobežojumiem personīgiem un komerciāliem projektiem.

4. Uzsākt, celties un spīdēt

Veicot pētījumu apmēram 50-60 dienas (asinot cirvi), mums bija iespēja izstrādāt paneļu tikai 15 dienu laikā (sasmalcinot koku). ?

Ko jūs darāt pēc projekta uzsākšanas? Jums ir jāredz, kādas ir atsauksmes par to, vai cilvēki vēlas to izmantot un vai jūsu izveidotais vienkāršais informācijas panelis viņiem atrisina problēmu. Ja viņi nevēlas to izmantot, tad jums nav biznesa. Mēs to iesniedzām dažādās kopienās, un tas veicās ļoti labi. Piemēram, tas ieguva:

  • 170 pozitīvi vērtējumi vietnē Hacker News, sasniedzot 9. pozīciju un vairāk nekā 88 000 skatījumu šajā nedēļā
  • 247 pozitīvi vērtējumi vietnē / r / webdev subreddit
  • 80 pozitīvi vērtējumi vietnē / r / web_design subreddit (bloķēts pie 80, jo tas ieguva tagu “spam”, mums bija daži abonēšanas uznirstošie logi ... kurus mēs vēlāk noņemām?)

Sabiedrība šo ideju apstiprināja. Mēs esam saņēmuši arī daudz atsauksmju, lai pievienotu SASS failus ērtākai pielāgošanai vai ievietotu tos vietnē GitHub.

Tad mēs esam redzējuši, ka bija daudz iesācēju, kuri vienkārši vēlējās iemācīties izmantot šo informācijas paneli. Tas bija tik skaisti, ka cilvēki, kas nesadarbojās ar kaut ko tādu, vēlējās iemācīties to strādāt.

Mēs pavadījām apmēram 3 nedēļas, izstrādājot virkni video pamācību par to, kā kopēt WordPress informācijas paneli, izmantojot mūsu produktu. Mēs izvēlējāmies izmantot WordPress informācijas paneli, jo tas ir ļoti populārs informācijas panelis. Mēs vēlējāmies ļaut cilvēkiem saprast, ka viņi var izveidot visu, izmantojot mūsu produktu.

Apmācības tika ļoti atzinīgi novērtētas, un šodien tām ir vairāk nekā 78 000 skatījumu. Šis ir pirmais videoklips par to, kā izveidot atsaucīgu administratora veidni, izmantojot Light Bootstrap Dashboard 1/3.

5. Kā mēs finansējam tīmekļa izstrādātāju atbalstu un pieprasījumus

Ērti izveidot produktu, uzturēt to dzīvu ir grūti.

Tur ir daudz lielisku spraudņu / veidņu, kas mirst, jo to veidotājiem nav pietiekami daudz naudas vai viņi negūst pietiekami daudz ieņēmumu, lai turpinātu attīstību vai novērstu problēmas.

Mēs nevēlējāmies to pašu lietu savam produktam. Labākais produkta uzturēšanas veids bija PRO versijas izveide, kas var radīt pietiekami daudz ieņēmumu, lai atbalstītu nepārtrauktu attīstību.

Mēs izmantojām tīmekļa izstrādātāju atsauksmes un nolēmām izveidot Premium versiju ar vairāk elementiem un spraudņiem. Mēs vēlējāmies palīdzēt arī dažiem puišiem, kuri vēlējās īpašas iezīmes un piederēja 5% kategorijai. Izvēlēties pareizos spraudņus, kas varētu palīdzēt cik vien iespējams, no 5% kategorijas mums bija ļoti grūti.

Mēs atkal sākām pētīt augstākās klases informācijas paneli. Mēs pievienojām tādus spraudņus kā Pilns kalendārs, DataTables.net, Sweet Alert, Bootstrap Wizard un dažas papildu lapas, piemēram, Pieteikšanās lapa, Reģistrācijas lapa, Bloķēšanas lapa.

Šeit ir PRO versijas tiešraides priekšskatījums. Jūs redzēsiet, ka mēs saglabājām to pašu struktūru un vēlējāmies padarīt to vieglu, bez pārāk daudzām iespējām un funkcijām.

Ņemot vērā ieņēmumus no PRO versijas, mēs ne tikai atbalstījām produktu, bet arī izveidojām jaunus failu tipus, piemēram, PSD / Sketch versiju vai Angular 2 versiju. Abi tiek dalīti bez maksas.

6. Nākotnes attīstības plāni

Šeit ir daži statistikas dati par informācijas paneli:

To ir ļoti viegli pielāgot, lai tas atbilstu jūsu zīmolam. To izmantoja iekšējos rīkos, piemēram, Stenfordas Neatliekamās medicīnas departamenta katalogā:

Mums ir daudz pieprasījumu no tīmekļa izstrādātājiem, kuri vēlas, lai informācijas panelis būtu veidots uz dažādiem ietvariem, piemēram, Angular 2, Angular CLI, React, Meteor, VueJS vai kā Rails Gem. Visu šo versiju izveidošana un bezmaksas atbalstīšana saskaņā ar MIT licenci darbosies tikai tad, ja mums katrai būs PRO versijas. Mēs sākām ar Angular 2, un mēs esam redzējuši daudz cilvēku, kas to izmanto, un esam saņēmuši daudz atsauksmju par to, kā to uzlabot. Tāpēc, ja vēlaties iesaistīties citu struktūru izstrādē vai ja jums ir kādas idejas, kā padarīt šos produktus labākus, mēs labprāt runātu vairāk.

Bija nepieciešama liela drosme, lai parādītu savus avotus un procesu, kas mums bija aiz Light Bootstrap Dashboard veidošanas. Ceru, ka uzzināsiet kaut ko no tā, un, ja jums ir kādas atsauksmes vai ieteikumi, es labprāt ar jums runātu komentāros.

Noderīgas saites:

  • Lejupielādējiet HTML versiju vietnē www.creative-tim.com
  • Lejupielādējiet Angular versiju no www.creative-tim.com
  • Lejupielādējiet PSD / Sketch versiju vietnē www.pixelsvibe.com
  • Spēlējiet ar to tiešajā priekšskatījumā
  • Piedāvājiet un ziņojiet par problēmām GitHub repozitorijā
  • Pārbaudiet mūsu emuāru: //blog.creative-tim.com/

Atrodi mani vietnē:

  • E-pasts: [email protected]
  • Facebook: //www.facebook.com/axelut
  • Twitter: //twitter.com/axelut