Bootstrap-kojelaudan anatomia, joka ansaitsee 1000 dollaria kuukaudessa

Me Creative Timissä olemme aina halunneet toimittaa upeita työkaluja kaikille web-kehittäjille, jotka käyttävät tuotteitamme. Jos haluat lukea lisää siitä, miten olemme rakentaneet liiketoimintamme ja mikä on ajomme, voit tarkistaa tämän artikkelin: Sivuprojektin kasvattaminen 17 000 dollarin kuukausiliiketoiminnaksi.

Haluamme nähdä parempia verkkosivustoja ja verkkosovelluksia Internetissä. Joten päätimme jakaa joitain "salaisia ​​ainesosia", jotka muodostavat perustan yhdelle suosituimmista kojelaudoistamme: Light Bootstrap Dashboard. Tietysti ne eivät ole enää salaisuus, koska aiomme jakaa ne kanssasi. ?

Tässä tapaustutkimuksessa jaan kuinka saimme idean luoda kojelauta, mistä saimme inspiraatiota, kuinka toteutimme kaiken, miten sitä käytettiin Stanfordin sisäisissä työkaluissa ja kuinka rahoitimme kehityksen ja sen tuen. Tässä on yleiskatsaus artikkelista:

  1. Perusrakenne ja ydintoiminnot
  2. Kuinka suunnittelu luotiin
  3. Rakennettu avoimen lähdekoodin päälle ja miksi sinun pitäisi seisoa jättiläisten harteilla
  4. Käynnistä, nouse ja loista
  5. Kuinka rahoitamme tuen ja ratkaisemme kehittäjien pyynnöt
  6. Tulevat kehityssuunnitelmat

Yritän antaa niin paljon tietoa kuin pystyn, toivoen, että tämä opetusohjelma ei ole tällainen:

1. Perusrakenne ja ydintoiminnot

Kojelaudan luomisen taustalla oleva prosessi tulisi ajatella testinä, joka sinun on suoritettava oppimisen jälkeen. Tietenkin opit paljon tuotekehityksen aikana. Mutta ensin sinun on oltava vahva tieto siitä, mikä on "tuo" ja miten sitä "käytetään". Ennen kuin kirjoitat ensimmäisen koodirivin, sinun tulisi tehdä tutkimuksia, tehdä suunnitelmia, luoda tehtäväluetteloita ja luonnoksia ja yrittää visualisoida mitä haluat lopulta saada.

Koska et ole keksinyt pyörää uudelleen, sinun on tarkasteltava yrityksiä, jotka luovat upeita tuotteita saadakseen inspiraatiota (kuten Heroku, Slack, Mailchimp, Stripe). Katso myös kilpailuasi. Saat paljon tietoa. Ja kun aloitat, tuotteen kehittäminen on helpompaa, koska teit kotitehtävät. Sinun on teroitettava kirves ennen leikkaamisen aloittamista:

"Jos minulla olisi kahdeksan tuntia kaataa puuta, vietän kuusi tuntia kirveeni teroittamiseen." - Abraham Lincoln

Teimme kotitehtävät ja meillä on valtava luettelo yli 100 ilmaisesta kojelaudasta esimerkkeinä, joista voimme saada inspiraatiota. Tässä on joitakin niistä:

Sinulla on valtava luettelo kojelaudoista, jossa on paljon värejä, animaatioita, kauniita kuvakkeita, pieniä kaavioita, isoja kaavioita, staattinen tai kiinteä sivupalkki ja satoja erilaisia ​​ominaisuuksia. Mistä tiedät, mikä on paras vaihtoehto yleisöllesi?

Koska emme tienneet, mitä ihmiset haluavat kojelaudan sisällä, päätimme kirjoittaa kaikki ominaisuudet, joita näissä kojelaudoissa on, ja käyttää vain yleisimpiä. Ymmärsimme, että ydinominaisuudet ratkaisevat noin 95% tapauksista, joissa tarvitset kojelautaa. Loput 5% ratkaisee hyvin erityisiä ongelmia.

Peruselementit ovat painikkeet, kuvakkeet, typografia, sivupalkki, pääpaneeli, navbar ja pudotusvalikot. Useimpien koontinäyttöjen ydinominaisuudet ovat:

  1. Taulukot
  2. Ilmoitukset
  3. Tehtäväluettelot
  4. Kortit (erityyppisille lomakkeille ja tiedon helpommalle visualisoinnille)
  5. Kaaviot (donitsikaavio, viivakaavio, pylväskaavio)
  6. Google Kartat

Pienillä visuaalisilla säätöillä voit toistaa 95% minkä tahansa maailman yrityksen kojelaudasta pelkästään ydinelementtien avulla. Sitten sinulla on loput 5%, mikä on aina erilainen riippuen yrityksestä ja sen ratkaisemista ongelmista. Täältä löydät:

  1. Kanban-järjestelmäkortit
  2. Vedä ja pudota -toiminto
  3. Aikajanan komponentit
  4. WYSIWYG-editori
  5. 8-tason navigoinnin sivupalkin valikko
  6. Usean tiedoston latausohjelma + Vedä ja pudota tiedostojen latausohjelma
  7. Lomake X-muokattava
  8. Morris-kaavio, Google-kaavio, kaavio, amChart, vuokaavio ja monia muita kaavioita
  9. Ja luettelo voi jatkua yli 200 ominaisuuteen

Ongelmana on, että jokainen näistä uusista laajennuksista lisää ylimääräisiä CSS-, JavaScript- tai jQuery-kirjastoja ja HTML: ää. Olemme rakentaneet tuotteen tavalliselle HTML: lle, ei kehyksiä tai modulaarisia temppuja, joten kaikki CSS / JavaScript olisivat yhdessä tiedostossa.

Älä ymmärrä minua väärin, en sano, että ominaisuudet eivät olleet hyviä. Nämä ovat upeita laajennuksia, jotka ovat kehittäneet mahtavat ihmiset. Mutta se ei ollut jotain, mitä halusimme olla yksinkertaisessa kojelaudassa.

Joten päätimme pitää tuotteen mahdollisimman kevyenä (muistatko nimen?). Kevyt Bootstrap-kojelauta . Ja päätimme toteuttaa vain ne ominaisuudet, jotka ratkaisivat ytimen 95%.

2. Miten suunnittelu luotiin

Sen jälkeen kun olemme suunnitelleet tuotteella olevat elementit, meidän oli ajateltava suunnittelua, joka olisi erinomainen. Käyttäjäystävällinen muotoilu, joka saa ihmiset haluamaan tämän hallintapaneelin sisällönhallintajärjestelmänsä sisällä. Meillä oli jo kuuluisa Bootstrap Get Shit Done Kit. Verkkokehittäjät rakastivat sitä ja sitä on ladattu yli 30000 kertaa. Joten päätimme käyttää sitä peruselementteinä, kuten painikkeet, navigaattorit, tulot jne.

Ymmärsimme, että tarvitsemme kuitenkin muutakin, jotta voimme vaikuttaa ja saada ihmiset kipeästi haluamaan tuotteitamme. Emme halunneet olla "toinen Bootstrapiin perustuva hallintapaneeli". Minne menet, kun haluat upean muotoiluresurssin?

Jos haet Dribbble-hakusanalla "kojelauta", löydät paljon uskomattoman kauniita kojelautoja ja järjestelmänvalvojapaneeleja. Itse asiassa niille, jotka eivät tiedä, Dribbble on kuin visuaalinen kokaiini. Katso joitain näistä esimerkkeistä, jotka ovat esittäneet Cosmin Capitanu ja Mike CreativeMintsistä:

Kaikkien näiden kauniiden esimerkkien näkeminen sai meidät ymmärtämään, että jos rakennamme jotain sellaista, erotumme ehdottomasti joukosta. Vaikka koontinäytöt tai kaaviot näyttävätkin hyvältä, niiden on todella vaikea tai mahdotonta koodata HTML-, CSS- ja JavaScript-koodeja. Tai he ratkaisevat hyvin spesifisen ongelman, kuten uusimman kojelaudan, jossa on kehonmittaukset.

Se oli mahdotonta 2 vuotta sitten, koska tietämyksemme ja kokemuksemme HTML / CSS: stä eivät olleet niin korkeat. Olen varma, että jos haluaisimme toteuttaa ne tänään, meillä olisi hyvät mahdollisuudet luoda jotain hyvin samanlaista. Myös tekniikka ja selainkapasiteetti auttavat meitä enemmän.

Halusimme rakentaa jotain, jota voivat käyttää monet ihmiset eri liiketoiminta-alueilta. Siellä oli myös yksinkertaisia ​​ja kauniita kojelautoja, mutta emme halunneet käyttää niitä inspiraationa, koska halusimme jotain erilaista.

En voi selittää tarkalleen, mitä halusimme, mutta emme tunteneet oloaan mukavaksi missään esimerkissä. Joten jatkoimme tutkimusta, kunnes löysimme jotain, josta pidimme todella:

Se ei ollut täydellinen eikä niin erinomainen kuin halusimme sen olevan. Mutta tunsimme, että se on oikea valinta ja se on erittäin hyvä esimerkki, josta voimme rakentaa kojelautamme. Jopa Pablo Picasso sanoi, että suuret suunnittelijat varastavat ja Apple kunnioittaa hänen sanaansa:

Emme voineet tehdä sitä. Herokun kojelauta oli tarpeeksi hyvä, että se antoi meille kipinän. Joten päätimme käyttää sitä vain inspiraatioon eikä lopputulokseen. Tässä on ensimmäinen iterointi:

Se on melko hyvä alku. Jotta saisimme paremman kuvan sen ulkoasusta, meidän on vain täytettävä oikea alue joillakin kaavioilla olevilla korteilla:

Korttien värit eivät näyttäneet niin hyviltä. Ne olivat liian kirkkaita, kuinka vasen sivupalkki näytti. Joten aloimme testata erilaisia ​​väriyhdistelmiä kaavioille ja sivupalkille.

Tässä vaiheessa huomasimme, että meidän ei tarvitse pitää vain yhtä väriä sivupalkin taustaa varten. Ja meidän pitäisi antaa käyttäjien valita, minkä värin he haluavat. Tiesimme, että Applella oli kauniita kaltevuuksia Fitness-sovellukselleen, joten päätimme käyttää näitä kaltevuuksia tulevaisuuden kaltevuuksien pohjana.

Olemme aina ajatelleet, että jos katsomme, mitä maailman parhaat yritykset tekevät suunnittelun ja käyttöliittymän suhteen, asetamme käyttöliittymillemme erittäin korkeat vaatimukset. Tällä tavoin yhä useammalla web-kehittäjällä on vapaa pääsy korkealaatuisiin tuotteisiin.

Kun teimme näitä eri väri-, kaltevuus-, kortti- ja kaavioyhdistelmiä, huomasimme, että Metalabin kaverit, jotka rakensivat Slack-käyttöliittymän, kirjoittivat artikkelin: Slackin 2,8 miljardin dollarin salainen kastike. Tämä päätyi inspiraationa seuraaville vaiheille. Artikkelin yleisenä ajatuksena oli, että Slackin salainen kastike syntyy yhdistämällä loistava ja leikkisä käyttöliittymä pieniin vuorovaikutuksiin, mikä tekee tuotteesta käyttäjäystävällisemmän.

"Se näyttää erilaiselta, se tuntuu erilaiselta ja kuulostaa erilaiselta."

Halusimme lisätä jotain, jota mikään muu kojelauta ei oleoli. Olen aina rakastanut, kuinka läpinäkyvä liukuvärjäys voi näyttää kuvan. Ja olen alkanut leikkiä erilaisilla kuvilla ja kaltevuuden peittävyydellä. Muuten, vuonna 2015 käyttämämme Duotone Gradient Image (emme edes tienneet, että sillä on nimi) näyttää olevan yksi verkkosuunnittelun trendeistä vuonna 2017. Tämä on aika siistiä, eikö olekin? ?

Ei täysin tyytyväinen…

Tämä näkymä sai meidät tuntemaan olonsa onnelliseksi, se oli juuri täydellinen meille? Lisäsimme myös pieniä vuorovaikutuksia, kuten avattavan avattavan animaation tai ilmoituksen show-vaikutuksen:

Kuvan lisääminen kaltevuuksien ja pienten animaatioiden avulla sai meidät tuntemaan tämän kaverin:

3. Rakennettu avoimen lähdekoodin päälle ja miksi sinun pitäisi seisoa jättiläisten harteilla

Kuten sanoimme alussa, emme halunneet keksiä pyörää uudelleen. Meillä ei myöskään ollut rahaa sopimusasiantuntijoille, jotka pystyivät rakentamaan kojelautaan tarvittavat elementit. Päätimme, että paras vaihtoehto meille on käyttää sitä, mitä muut ihmiset ovat luoneet ja jakaneet ilmaiseksi tai avoimena lähdekoodina .

Huomasimme äskettäin, että mitä teimme, seisoi jättiläisten harteilla. Tämä tarkoittaa, että käytimme niin paljon kuin pystyimme työkaluista, jotka ovat jo tehokkaita ja suurten yhteisöjen ylläpitämiä. Lisätietoja tästä ja miksi sinun tulisi käyttää tätä tekniikkaa, kun haluat rakentaa jotain tyhjästä, lue tämä mahtava artikkeli, jonka on kirjoittanut Quincy Larson: Kuinka seistä jättiläisten harteilla.

Katsotaanpa, mitä todella on hupun alla.

  • Kehys: Bootstrap - Bootstrap on suosituin HTML-, CSS- ja JavaScript-kehys reagoivien, mobiilien ensimmäisten projektien kehittämiseen verkossa.
  • Suunnittelukerros: Hanki paska valmis -sarja - ilmainen Bootstrap 3 -käyttöliittymäsarja. Tämä on paras lähtökohta rakennettaville online-projekteille. Siitä on tullut tavaramerkki verkkoyhteisölle, joka on puhdas ja hyvännäköinen käyttöliittymä.
  • Fontti: Roboto - Google-fontti, jolla on kaksoisluonne. Siinä on mekaaninen luuranko ja muodot ovat pääosin geometrisia.
  • Pienet kuvakkeet: Font Awesome - Font Awesome antaa sinulle skaalattavat vektorikuvakkeet, jotka voidaan mukauttaa CSS: n avulla.
  • Suuret kuvakkeet: Stroke 7 -kuvakkeet - Tämä on täydellinen 202 ohutviivakuvaketta, jotka on saanut inspiraationsa iOS 7: stä.
  • Kaaviot: Chartist.js - Chartist.js on yhteisö, joka on pettynyt muiden kartoituskirjastojen tarjoamiin kykyihin.
  • Ilmoitukset: Bootstrap Notify - Tämä laajennus auttaa sinua muuttamaan tavalliset käynnistyshihnan hälytykset murron kaltaisiksi ilmoituksiksi.
  • Kartat: Google Maps - laajennus karttojen katseluun.
  • Kuvat: Unsplash - Ilmaisia ​​(tee mitä haluat) korkean resoluution valokuvia.
"Ei ole mitään sellaista kuin mitään ei mitään. Kaikella, myös henkilökohtaisella menestykselläsi, on hinta, joka on maksettava ”- Napoleon Hill

Koska käytimme paljon yhteisöltä, olisi reilua antaa takaisin yhteisölle. Joten päätimme muutama viikko sitten vapauttaa sen MIT-lisenssillä. Tällä tavoin useampi kehittäjä voi osallistua ja käyttää sitä ilman oikeudellisia rajoituksia henkilökohtaisiin ja kaupallisiin projekteihin.

4. Käynnistä, nouse ja loista

Tutkimuksen tekeminen noin 50-60 päivän ajan (kirveen teroitus) antoi meille mahdollisuuden kehittää kojelauta vain 15 päivässä (puun hakkaaminen). ?

Mitä teet projektin käynnistämisen jälkeen? Sinun täytyy nähdä, mitä palautetta siitä on, jos ihmiset haluavat käyttää sitä ja ratkaiseeko luomasi yksinkertainen kojelauta heille ongelman. Jos he eivät halua käyttää sitä, sinulla ei ole yritystä. Toimitimme sen eri yhteisöissä ja se meni hyvin. Esimerkiksi se sai:

  • 170 positiivista ääntä Hacker News -sivustolla, huippu 9. sijalle ja yli 88.000 katselukertaa tällä viikolla
  • 247 positiivista ääntä / r / webdev subreddit -palvelussa
  • 80 positiivista ääntä / r / web_design subredditissä (estetty 80: ssä, koska se sai “spam” -tunnisteen, meillä oli joitain tilausikkunoita ... jotka poistimme myöhemmin?)

Yhteisö vahvisti idean. Meillä on myös paljon palautetta, jotta voimme lisätä SASS-tiedostot räätälöinnin helpottamiseksi tai lähettää sen GitHubiin.

Sitten olemme nähneet, että oli paljon aloittelijoita, jotka halusivat vain oppia käyttämään tätä kojelautaa. Se oli niin kaunista, että ihmiset, jotka eivät olleet vuorovaikutuksessa sellaisen kanssa, halusivat oppia työskentelemään sen kanssa.

Vietimme noin 3 viikkoa kehittämällä useita opetusohjelmia siitä, kuinka kopioida WordPress-hallintapaneeli tuotteellamme. Päätimme käyttää WordPress-hallintapaneelia, koska se on erittäin suosittu koontinäyttö. Ja halusimme antaa ihmisten ymmärtää, että he voivat rakentaa mitä tahansa käyttämällä tuotteitamme.

Opetusohjelmat otettiin erittäin hyvin vastaan, ja niillä on tänään yli 78 000 katselukertaa. Tässä on ensimmäinen video reagoivan järjestelmänvalvojan mallin luomisesta Light Bootstrap Dashboard 1/3 -sovelluksella.

5. Kuinka rahoitamme web-kehittäjien tuen ja pyynnöt

Tuotteen rakentaminen helpoksi, pitäminen elossa on vaikeaa.

Siellä on paljon upeita laajennuksia / malleja, jotka ovat kuolemassa, koska niiden tekijöillä ei ole tarpeeksi käteistä tai he eivät tuota tarpeeksi tuloja jatkaakseen kehitystä tai korjaamaan ongelmat.

Emme halunneet samaa tapaa tuotteellemme. Paras tapa pitää tuote hengissä oli luoda PRO-versio, joka voi tuottaa riittävästi tuloja jatkuvan kehityksen tukemiseksi.

Käytimme web-kehittäjien palautetta ja päätimme luoda Premium-version, jossa on enemmän elementtejä ja laajennuksia. Halusimme auttaa myös joitain kavereita, jotka halusivat erityispiirteitä ja olivat 5% luokassa. Oikeiden laajennusten valitseminen, jotka voivat auttaa niin paljon kuin mahdollista 5% -luokasta, oli meille erittäin vaikeaa.

Aloitimme jälleen tehdä tutkimusta premium-kojelaudasta. Ja lisäsimme laajennuksia, kuten Full Calendar, DataTables.net, Sweet Alert, Bootstrap Wizard ja joitain ylimääräisiä sivuja, kuten Login Page, Register Page, Lock Page.

Tässä on PRO-version live-esikatselu. Huomaat, että säilytimme saman rakenteen ja halusimme tehdä siitä kevyen ilman liian monia vaihtoehtoja ja ominaisuuksia.

PRO-version tuotot saivat meidät paitsi tukemaan tuotetta myös luomaan uusia tiedostotyyppejä, kuten PSD / Sketch-versio tai Angular 2 -versio. Molemmat jaetaan ilmaiseksi.

6. Tulevat kehityssuunnitelmat

Tässä on joitain tilastoja kojelaudasta:

Se on erittäin helppo mukauttaa vastaamaan tuotemerkkiäsi. Sitä käytettiin sisäisissä työkaluissa, kuten Stanfordin ensihoidon laitosluettelossa:

Meillä on paljon pyyntöjä web-kehittäjiltä, ​​jotka haluavat, että hallintapaneeli rakennetaan erilaisille kehyksille, kuten Angular 2, Angular CLI, React, Meteor, VueJS tai Rails Gem. Kaikkien näiden versioiden luominen ja tukeminen ilmaiseksi MIT-lisenssillä toimii vain, jos meillä on jokaiselle PRO-versiot. Aloitimme Angular 2: sta ja olemme nähneet monia ihmisiä, jotka käyttävät sitä, ja meillä on paljon palautetta sen parantamisesta. Joten jos haluat osallistua muihin kehyksiin tai jos sinulla on ideoita näiden tuotteiden parantamiseksi, puhumme mielellämme lisää.

Kesti paljon rohkeutta näyttää lähteemme ja prosessi, joka meillä oli Light Bootstrap Dashboardin rakentamisen takana. Toivottavasti opit jotain tästä, ja jos sinulla on palautetta tai ehdotuksia, keskustelen mielelläni kanssasi kommenteissa.

Hyödyllisiä linkkejä:

  • Lataa HTML-versio osoitteesta www.creative-tim.com
  • Lataa Angular-versio osoitteesta www.creative-tim.com
  • Lataa PSD / Sketch-versio osoitteesta www.pixelsvibe.com
  • Pelaa sen kanssa live-esikatselussa
  • Osallistu ja ilmoita ongelmista GitHub-arkistossa
  • Tarkista blogi: //blog.creative-tim.com/

Löydä minut:

  • Sähköposti: [email protected]
  • Facebook: //www.facebook.com/axelut
  • Twitter: //twitter.com/axelut