A Bootstrap műszerfal anatómiája, amely havonta 1000 dollárt keres

Programozás

Mi, a Creative Tim, mindig is remek eszközöket szerettünk volna nyújtani minden webfejlesztőnek, aki használja a termékeinket. Ha többet szeretne megtudni arról, hogyan építettük fel üzletünket, és mi a hajtóerőnk, akkor ellenőrizze ezt a cikket: Egy mellékprojekt növekedése 17 000 dolláros havi vállalkozássá

Jobb weboldalakat és webalkalmazásokat szeretnénk látni az interneten. Ezért úgy döntöttünk, hogy megosztjuk azokat a „titkos összetevőket”, amelyek az egyik legnépszerűbb műszerfal alapját képezik: a Light Bootstrap Dashboard. Természetesen nem lesznek többé titok, mert megosztjuk veletek őket. ?

Ebben az esettanulmányban megosztom, hogyan jutott eszünkbe egy műszerfal létrehozása, honnan merítettünk ihletet, hogyan valósítottunk meg mindent, hogyan használtuk fel a Stanford belső eszközein belül, és hogyan finanszíroztuk a fejlesztést és annak támogatását. Itt található a cikk áttekintése:

  1. Az alapvető felépítés és az alapvető funkcionalitás
  2. Hogyan készült a tervezés
  3. A nyílt forráskód tetejére épül, és miért kell állnia az óriások vállán
  4. Indítsd, emelkedj és ragyogj
  5. Hogyan finanszírozzuk a támogatást és megoldjuk a fejlesztők kéréseit
  6. Jövőbeli fejlesztési tervek

Igyekszem minél több információt megadni, remélve, hogy ez az oktatóanyag nem ilyen lesz:

1. Az alapvető felépítés és az alapvető funkcionalitás

Az irányítópult létrehozásának folyamata mint teszt, amelyet el kell végeznie, miután sokat tanult. Természetesen sokat fog tanulni a termék fejlesztése során. Először azonban erős ismeretekkel kell rendelkeznie arról, hogy mi az a „mi”, és hogyan „használják”. Az első kódsor megírása előtt kutatnia kell, terveket kell készítenie, feladatlistákat és vázlatokat kell készítenie, és meg kell próbálnia elképzelni, hogy mi lesz a végén.

Mivel nem újból feltalálja a kereket, körül kell néznie azoknál a vállalatoknál, amelyek remek termékeket készítenek, hogy ihletet kapjanak (például Heroku, Slack, Mailchimp, Stripe). Nézze meg a versenyét is. Nagyon sok információt fog kapni. És amikor elkezdi, könnyebb lesz a terméket fejleszteni, mert elvégezte a házi feladatát. A vágás megkezdése előtt meg kell élesítenie a fejszét:

- Ha nyolc órám lett volna egy fát feldarabolni, akkor hat órát töltöttem a fejszém élesítésével. - Abraham Lincoln

Megtettük a házi feladatainkat, és hatalmas, több mint 100 ingyenes műszerfalat tartalmazó listát kapunk példaként, amelyekből ihletet meríthetünk. Itt van néhány közülük:

Hatalmas műszerfal-listája van, sok színnel, animációval, gyönyörű ikonokkal, kis diagramokkal, nagy diagramokkal, statikus vagy fix oldalsávval és több száz különféle funkcióval. Honnan tudja, hogy melyik a legjobb megoldás a közönség számára?

Mivel nem tudtuk, mit akarnak az emberek az irányítópulton belül, úgy döntöttünk, hogy felírjuk az összes funkciót, amelyet ezek az irányítópultok tartalmaznak, és csak a leggyakoribbakat használjuk. Rájöttünk, hogy az alapvető funkciók megoldják az esetek 95% -át, amikor műszerfalra van szükség. A fennmaradó 5% nagyon specifikus problémákat old meg.

Az alapelemek a gombok, ikonok, tipográfia, oldalsáv, fő panel, navigációs sávok és legördülő menük. Az irányítópultok legtöbb jellemzője a következő:

  1. Táblázatok
  2. Értesítések
  3. Feladatlisták
  4. Kártyák (különböző típusú űrlapokhoz és az információk könnyebb megjelenítéséhez)
  5. Diagramok (fánkdiagram, vonaldiagram, oszlopdiagram)
  6. Google térkép

Kis vizuális kiigazításokkal a világ bármely vállalatának irányítópultjának 95% -át reprodukálhatja, csak az alapvető elemek használatával. Ezután megvan a fennmaradó 5%, amely a vállalattól és az általa megoldott problémáktól függően mindig más. Itt megtalálhatjuk:

  1. Kanban rendszerkártyák
  2. Fogd és vidd funkciók
  3. Idősor összetevői
  4. WYSIWYG szerkesztő
  5. 8 szintes navigációs oldalsáv menü
  6. Több fájl feltöltő + Fogd és vidd fájl feltöltő
  7. X-űrlap szerkeszthető
  8. Morris Chart, Google Chart, Flot Chart, amChart, Flows Chart és még sok más típusú diagram
  9. És a lista folytathatja a több mint 200 funkciót

A probléma az, hogy ezek az új bővítmények mindegyike extra CSS, JavaScript vagy jQuery könyvtárakat és HTML-t ad hozzá. A terméket egyszerű HTML-re építettük, nincsenek keretrendszerek vagy moduláris trükkök, így az összes CSS / JavaScript egyetlen fájlban lenne.

Félreértés ne essék, nem azt mondom, hogy a funkciók nem voltak jók. Remek pluginok, amelyeket fantasztikus emberek fejlesztettek ki. De nem ezt szerettük volna az egyszerű műszerfalon.

Ezért úgy döntöttünk, hogy a terméket a lehető legkönnyebben tartjuk (emlékszel a névre?). Könnyű rendszerindító műszerfal . És úgy döntöttünk, hogy csak azokat a funkciókat valósítjuk meg, amelyek megoldják az alapvető 95% -ot.

2. Hogyan készült a tervezés

Miután megterveztük a termék rendelkezésére álló elemeket, gondolnunk kellett egy kiemelkedő kialakításra. Felhasználóbarát kialakítás, amely arra készteti az embereket, hogy ezt az irányítópultot tartalomkezelő rendszerükön belül helyezzék el. Már megvolt a híres Bootstrap Get Shit Done Kit. A webfejlesztők imádták, és több mint 30 000 alkalommal töltötték le. Ezért úgy döntöttünk, hogy ezt olyan alapelemekként alkalmazzuk, mint a gombok, a navigációs sávok, az inputok stb.

Rájöttünk, hogy ennél többre van szükségünk azért, hogy hatást érjünk el, és hogy az emberek nagyon vágyakozzanak a termékünkre. Nem akartunk „egy újabb irányítópult lenni a Bootstrap alapján”. Hová megy, ha nagyszerű tervezési erőforrásra vágyik?

Ha a „műszerfalra” keres a Dribbble-n, rengeteg hihetetlenül gyönyörű műszerfalat és adminisztrációs panelt talál. Valójában azok számára, akik nem tudják, a Dribbble olyan, mint a vizuális kokain. Nézze meg ezeket a példákat, amelyeket Cosmin Capitanu és Mike készített a CreativeMints-től:

Látva ezeket a gyönyörű példákat, rájöttünk, hogy ha valami hasonlót építünk, akkor biztosan kiemelkedünk a tömegből. Továbbá, még ha az irányítópultok vagy a diagramok is nagyon jól néznek ki, nagyon nehéz vagy lehetetlen lesz kódolnunk HTML-ben, CSS-ben és JavaScript-ben. Vagy egy nagyon konkrét problémát oldanak meg, például a legújabb, a Testmérésekkel ellátott irányítópultot.

2 éve lehetetlen volt, mert a HTML / CSS-kel kapcsolatos ismereteink és tapasztalataink nem voltak olyan magasak. Biztos vagyok benne, hogy ha ma szeretnénk megvalósítani őket, jó esélyünk lenne valami nagyon hasonló létrehozására. Ezenkívül a technológia és a böngésző kapacitása is jobban segít nekünk.

Olyan dolgot akartunk építeni, amelyet sokféle üzleti területről származó ember használhat. Volt néhány egyszerű és gyönyörű műszerfal is, de nem akartuk őket inspirációként használni, mert valami mást akartunk.

Nem tudom pontosan megmagyarázni, hogy mit is akartunk, de egyik példát sem éreztük jól. Tehát folytattuk a kutatásunkat, amíg nem találtunk valamit, ami nagyon tetszett:

Nem volt tökéletes és nem is olyan kiemelkedő, mint szerettük volna. De úgy éreztük, hogy ez a megfelelő választás, és ez egy nagyon jó példa, amelyből felépíthetjük a műszerfalat. Még Pablo Picasso is azt mondta, hogy a nagyszerű tervezők lopnak, az Apple pedig tiszteletben tartja szavát:

Ezt nem tehettük meg. A Heroku műszerfala elég jó volt ahhoz, hogy megcsillanjon bennünket. Ezért úgy döntöttünk, hogy csak inspirációra, és nem a végeredményre használjuk fel. Itt van az első iteráció:

Nagyon jó kezdet. Ahhoz, hogy jobban lássuk, hogyan fog kinézni, csak fel kell töltenünk a megfelelő területet néhány kártyával, amelyek diagramokkal rendelkeznek:

A kártyák színei nem tűntek olyan jól. Túl fényesek voltak ahhoz, hogy nézzen ki a bal oldalsáv. Ezért elkezdtük tesztelni a diagramok és az oldalsáv különböző színkombinációit.

Ezen a ponton rájöttünk, hogy az oldalsáv hátteréhez nem csak egy színt kell megtartanunk. És hagynunk kell a felhasználóinknak, hogy melyik színt válasszák. Tudtuk, hogy az Apple néhány gyönyörű színátmenettel rendelkezik a Fitness alkalmazásához, ezért úgy döntöttünk, hogy ezeket a színátmeneteket használjuk a jövőbeli lejtők alapjául.

Mindig azt gondoltuk, hogy ha figyeljük, mit csinálnak a világ legjobb vállalatai a Design és az UX terén, akkor nagyon magas követelményeket fogunk felállítani az interfészeinkkel szemben. Ily módon egyre több webfejlesztő ingyenes hozzáférést kap a kiváló minőségű termékekhez.

Míg a színek, a színátmenetek, a kártyák és a grafikonok összes kombinációját végeztük, láttuk, hogy a Metalab srácai, akik a Slack kezelőfelületét építették, írtak egy cikket: a Slack 2,8 milliárd dolláros titkos szószát. Ez végül inspirációt jelentett a következő lépésekhez. A cikk általános elképzelése az volt, hogy a Slack titkos szószát egy remek és játékos felület, valamint a kis interakciók kombinációja hozza létre, ami felhasználóbarátabbá teszi a terméket.

"Másképp néz ki, másképp érzi magát és másként hangzik."

Hozzá akartunk adni valamit, amelyet a többi irányítópult nem tartalmazvolt. Mindig is szerettem, hogy egy átlátszó színátmenet hogyan nézhet át a képen. És elkezdtem különböző képekkel és színátmenetek átlátszatlanságával játszani. Egyébként a Duotone Gradient Image, amelyet 2015-ben használtunk (még azt sem tudtuk, hogy van neve), a 2017-es webdesign egyik trendjének tűnik. Ez nagyon klassz, nem? ?

Nem teljesen elégedett…

Ez volt az a nézet, amely boldoggá tett minket, csak tökéletes volt számunkra? Kis interakciókat is felvettünk, például a nyitó legördülő menü animációját vagy az értesítés show-hatását:

A kép hozzáadása a lejtőkkel és a kis animációkkal úgy éreztük magunkat, mint ez a srác:

3. A nyílt forráskód tetejére épül, és miért kell állnia az óriások vállán

Ahogy az elején mondtuk, nem akartuk újra feltalálni a kereket. Arra sem volt pénzünk, hogy olyan szakértőket szerződtessünk, akik képesek a műszerfalhoz szükséges elemek felépítésére. Úgy döntöttünk, hogy a legjobb megoldás számunkra az, ha ingyenesen vagy nyílt forráskódúként használjuk azt, amit mások létrehoztak és megosztottak .

Nemrég fedeztük fel, hogy amit tettünk, az óriások vállán állt. Ez azt jelenti, hogy a lehető legtöbbet használtuk olyan eszközökből, amelyek már nagy teljesítményűek, és amelyeket a nagy közösségek jól karbantartanak. Ha többet szeretne tudni erről és arról, miért érdemes ezt a technikát használni, ha valamit a semmiből szeretne felépíteni, olvassa el ezt a fantasztikus cikket, amelyet Quincy Larson írt: Hogyan állhatunk az óriások vállára.

Nézzük meg, mi is van valójában a motorháztető alatt.

  • Keret: Bootstrap - A Bootstrap a legnépszerűbb HTML, CSS és JavaScript keretrendszer az adaptív, mobil első projektek fejlesztésére az interneten.
  • Tervezési réteg: Get Shit Done Kit - Ingyenes Bootstrap 3 felhasználói felület készlet. Ez a legjobb kiindulópont minden épülő online projekthez. A tiszta és szép megjelenésű felület védjegyévé vált az online közösség számára.
  • Betűtípus: Roboto - kettős természetű Google betűtípus. Mechanikus csontváza van, és a formák nagyrészt geometrikusak.
  • Kis ikonok: Awesome Font - A Font Awesome méretezhető vektoros ikonokat ad, amelyek testreszabhatók a CSS használatával.
  • Nagy ikonok: Stroke 7 Icons - Ez egy teljes 202 vékony stroke ikon, amelyet az iOS 7 inspirált.
  • Diagramok: Chartist.js - A Chartist.js egy olyan közösség terméke, amely csalódott más diagramkönyvtárak képességei miatt.
  • Értesítések: Bootstrap Notify - Ez a plugin segít a szokásos bootstrap riasztások „morgás” jellegű értesítésekké alakításában.
  • Térképek: Google Maps - bővítmény a térképek megtekintéséhez.
  • Fotók: Unsplash - Ingyenes (bármit csinál) nagyfelbontású fotók.
„Nincs olyan, hogy valami a semmiért. Mindennek, beleértve a személyes sikereit is, ára van, amelyet fizetni kell ”- Napoleon Hill

Mivel sokat használtunk a közösségből, méltányos lenne visszaadni a közösségnek. Tehát pár hete úgy döntöttünk, hogy kiadjuk MIT License alatt. Ily módon több fejlesztő hozzájárulhat és jogi korlátozások nélkül felhasználhatja személyes és kereskedelmi projektekhez.

4. Indítás, emelkedés és ragyogás

Körülbelül 50-60 napig végzett kutatás (a fejsze élezése) lehetővé tette számunkra, hogy mindössze 15 nap alatt kifejlesszük a műszerfalat (a fa feldarabolása). ?

Mit csinálsz egy projekt elindítása után? Látnia kell, hogy mi a visszajelzés, ha az emberek szeretnék használni, és az Ön által létrehozott egyszerű irányítópult megoldja-e a problémát számukra. Ha nem akarják használni, akkor nincs vállalkozása. Különböző közösségeknél küldtük el, és nagyon jól sikerült. Például:

  • 170 pozitív szavazat érkezett a Hacker News-ra, a csúcs a 9. helyre, és több mint 88.000 megtekintés volt az adott héten
  • 247 pozitív szavazat a / r / webdev subreddit fájlról
  • 80 pozitív szavazat a / r / web_design subreddit webhelyen (80-nál blokkolva, mert megkapta a „spam” címkét, volt néhány feliratkozó felugró ablakunk, amelyeket később eltávolítottunk?)

A közösség érvényesítette az ötletet. Sok visszajelzést is kaptunk, hogy hozzáadjuk a SASS fájlokat a könnyebb testreszabáshoz, vagy közzétehetjük a GitHub-on.

Aztán láttuk, hogy sok kezdő volt, aki csak meg akarta tanulni ennek az irányítópultnak a használatát. Olyan gyönyörű volt, hogy azok, akik nem léptek kapcsolatba ilyesmivel, meg akarták tanulni, hogyan kell vele dolgozni.

Körülbelül 3 hetet töltöttünk egy video-oktatósorozat fejlesztésével, amellyel megismételhetjük a WordPress irányítópultját termékünk segítségével. A WordPress irányítópult használatát választottuk, mert ez egy nagyon népszerű irányítópult. És szerettük volna megértetni az emberekkel, hogy a termékünkkel bármit felépíthetnek.

Az oktatóanyagokat nagyon jól fogadták, és ma már több mint 78 000 megtekintéssel rendelkeznek. Itt található az első videó arról, hogy miként hozhatunk létre adaptív admin sablont a Light Bootstrap Dashboard 1/3 segítségével.

5. Hogyan finanszírozzuk a webfejlesztők támogatását és kéréseit?

Egy terméket könnyű elkészíteni, életben tartani nehéz.

Sok nagyszerű plugin / sablon van haldoklóban, mert az alkotóiknak nincs elegendő készpénzük, vagy nincs elég bevételük a fejlesztés folytatásához vagy a problémák megoldásához.

Nem akartuk ugyanezt a terméket. A termék életben tartásának legjobb lehetősége egy PRO verzió létrehozása volt, amely elegendő bevételt generálhat a folyamatos fejlesztéshez.

Felhasználtuk a webfejlesztők visszajelzéseit, és úgy döntöttünk, hogy létrehozunk egy Premium verziót, amely több elemet és bővítményt tartalmaz. Segíteni akartunk azoknak a srácoknak is, akik különleges tulajdonságokra vágynak és az 5% kategóriába tartoznak. Az 5% -os kategóriából nagyon nehéz volt kiválasztani a megfelelő beépülő modulokat, amelyek a lehető legnagyobb mértékben segíthetnek.

Újra elkezdtük kutatni a prémium műszerfalat. És hozzáadtunk olyan beépülő modulokat, mint a Teljes naptár, a DataTables.net, az Édes figyelmeztetés, a Bootstrap varázsló és néhány további oldalt, mint a Bejelentkezés oldal, Regisztrációs oldal, Oldal zárolása

Itt található a PRO verzió élő előnézete. Látni fogja, hogy ugyanazt a struktúrát tartottuk fenn, és könnyűvé tettük, túl sok lehetőség és funkció nélkül.

Miután a PRO verzióból származó bevétel nem csak a terméket támogatta, hanem új fájltípusokat is létrehoztunk, például a PSD / Sketch vagy Angular 2 verziókat. Mindkettőt ingyen osztják meg.

6. Jövőbeli fejlesztési tervek

Íme néhány statisztika az irányítópultról:

Nagyon könnyű testre szabni, hogy megfeleljen a márkának. Olyan belső eszközökben használták, mint a Stanford Sürgősségi Orvosi Osztály katalógusa:

Sok kérést kaptunk olyan webfejlesztőktől, akik azt szeretnék, hogy az Irányítópult különböző keretrendszerekre épüljön, mint például az Angular 2, az Angular CLI, a React, a Meteor, a VueJS vagy a Rails Gem. Ezeknek a verzióknak a létrehozása és ingyenes támogatása MIT licenc alatt csak akkor működik, ha mindegyikünkhöz lesznek PRO verziók. Az Angular 2-vel kezdtük, és sok embert láttunk már, akik használják, és rengeteg visszajelzést kaptunk arról, hogyan lehetne továbbfejleszteni. Tehát, ha részt akar venni a többi keretrendszerben, vagy van ötlete arról, hogyan lehetne jobbá tenni ezeket a termékeket, szívesen beszélnénk tovább.

Nagy bátorság kellett ahhoz, hogy megmutassuk forrásainkat és a folyamatot, amely a Light Bootstrap Dashboard építése mögött állt. Remélem, hogy tanul valamit ebből, és ha bármilyen visszajelzése vagy javaslata van, szívesen beszélnék veled a megjegyzésekben.

Hasznos Linkek:

  • Töltse le a HTML verziót a www.creative-tim.com webhelyről
  • Töltse le az Angular verziót a www.creative-tim.com webhelyről
  • Töltse le a PSD / Sketch verziót a www.pixelsvibe.com webhelyről
  • Játsszon vele az élő előzetesben
  • Hozzájárulni és jelenteni a problémákat a GitHub-adattáron
  • Ellenőrizze blogunkat: //blog.creative-tim.com/

Keressen meg:

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