Anatómia palubnej dosky Bootstrap, ktorá každý mesiac zarobí 1 000 dolárov

My v spoločnosti Creative Tim sme vždy chceli dodávať vynikajúce nástroje všetkým webovým vývojárom, ktorí používajú naše produkty. Ak si chcete prečítať viac o tom, ako sme vybudovali naše podnikanie a čo je našou hnacou silou, môžete si prečítať tento článok: Rast vedľajšieho projektu na podnikanie v hodnote 17 000 dolárov mesačne.

Chceme vidieť lepšie webové stránky a webové aplikácie na internete. Preto sme sa rozhodli zdieľať niektoré z „tajných zložiek“, ktoré tvoria základ jedného z našich najpopulárnejších dashboardov: Light Bootstrap Dashboard. Samozrejme, už nebudú tajomstvom, pretože sa o ne s vami podelíme. ?

V tejto prípadovej štúdii sa podelím o to, ako sme dostali nápad vytvoriť dashboard, kde sme získali inšpiráciu, ako sme všetko implementovali, ako sa to použilo v interných nástrojoch Stanfordu a ako sme financovali jeho vývoj a podporu. Tu je prehľad článku:

  1. Základná štruktúra a základná funkčnosť
  2. Ako vznikol dizajn
  3. Postavené na vrchole otvoreného zdroja a prečo by ste mali stáť na pleciach obrov
  4. Spustite, vstaňte a zažiarte
  5. Ako financujeme podporu a riešime požiadavky vývojárov
  6. Plány budúceho rozvoja

Pokúsim sa poskytnúť čo najviac informácií s nádejou, že tento návod nebude taký:

1. Základná štruktúra a základná funkčnosť

Proces, ktorý stojí za vytvorením palubnej dosky, by ste mali považovať za test, ktorý musíte podstúpiť, keď sa naučíte veľa. Počas vývoja produktu sa samozrejme veľa dozviete. Najprv však musíte mať dôkladné znalosti o tom, čo je „to“ a ako sa „používa“. Pred napísaním prvého riadku kódu by ste si mali urobiť prieskum, urobiť plány, vytvoriť zoznamy úloh a náčrty a pokúsiť sa vizualizovať, čo nakoniec budete chcieť mať.

Pretože neobjavujete nové koleso, musíte sa poobzerať po spoločnostiach, ktoré vytvárajú skvelé produkty, aby ste získali inšpiráciu (napríklad Heroku, Slack, Mailchimp, Stripe). Pozerajte sa tiež na svoju konkurenciu. Získaš veľa informácií. A keď začnete, bude ľahšie produkt vyvíjať, pretože ste si urobili domácu úlohu. Pred začatím rezania musíte nabrúsiť sekeru:

"Keby som mal osem hodín na rúbanie stromov, strávil by som šesť hodín ostrením svojej sekery." - Abrahám Lincoln

Urobili sme si domáce úlohy a ako príklady, z ktorých môžeme čerpať inšpiráciu, máme obrovský zoznam viac ako 100 dashboardov zdarma. Tu sú niektoré z nich:

Máte obrovský zoznam informačných panelov s množstvom farieb, animácií, krásnych ikon, malých grafov, veľkých grafov, statického alebo pevného bočného panela a stovkami rôznych funkcií. Ako viete, ktorá je najlepšia voľba pre vaše publikum?

Pretože sme nevedeli, čo ľudia na palubnej doske chcú, rozhodli sme sa spísať všetky funkcie, ktoré tieto informačné panely obsahujú, a používať iba tie najbežnejšie. Uvedomili sme si, že základné funkcie riešia okolo 95% prípadov, keď potrebujete prístrojovú dosku. Zvyšných 5% rieši veľmi konkrétne problémy.

Základnými prvkami sú tlačidlá, ikony, typografia, bočný panel, hlavný panel, navigačné lišty a rozbaľovacie ponuky. Hlavné funkcie väčšiny informačných panelov sú:

  1. Tabuľky
  2. Oznámenia
  3. Zoznamy úloh
  4. Karty (pre rôzne typy formulárov a ľahšiu vizualizáciu informácií)
  5. Grafy (prstencový, čiarový, stĺpcový)
  6. Google Mapy

Vďaka malým vizuálnym úpravám môžete pomocou základných prvkov reprodukovať 95% ľubovoľného panela od ktorejkoľvek spoločnosti na svete. Potom máte zvyšných 5%, ktoré sa vždy líšia v závislosti od spoločnosti a problémov, ktoré rieši. Tu nájdeme:

  1. Systémové karty Kanban
  2. Funkcia Drag & Drop
  3. Komponenty časovej osi
  4. Editor WYSIWYG
  5. 8-úrovňová ponuka bočného panela navigácie
  6. Multi File Uploader + Drag & Drop File Uploader
  7. Formulár X-editovateľný
  8. Morris Chart, Google Chart, Flot Chart, amChart, Flows Chart a mnoho ďalších typov grafov
  9. A zoznam môže pokračovať s viac ako 200 funkciami

Problém je v tom, že každý z týchto nových doplnkov pridáva ďalšie knižnice CSS, JavaScript alebo jQuery a HTML. Produkt sme postavili na jednoduchom HTML, bez rámcov alebo modulárnych trikov, takže všetky CSS / JavaScript by boli v jednom súbore.

Nechápte ma zle, nehovorím, že vlastnosti neboli dobré. Jedná sa o skvelé doplnky vyvinuté úžasnými ľuďmi. Ale nebolo to niečo, čo by sme chceli mať na našej jednoduchej palubnej doske.

Rozhodli sme sa preto, aby bol produkt čo najľahší (pamätáte na názov?). Panel s ľahkým bootstrapom . A rozhodli sme sa implementovať iba tie funkcie, ktoré riešili jadro 95%.

2. Ako vznikol dizajn

Keď sme vytvorili náš plán pre prvky, ktoré produkt bude mať, museli sme vymyslieť vynikajúci dizajn. Užívateľsky prívetivý dizajn, vďaka ktorému by ľudia chceli mať tento informačný panel vo svojom systéme na správu obsahu. Už sme tu mali slávnu súpravu Bootstrap Get Shit Done Kit. Webovým vývojárom sa to páčilo a bol stiahnutý viac ako 30 000-krát. Takže sme sa rozhodli použiť to ako základný dizajn pre základné prvky ako tlačidlá, navigačné lišty, vstupy atď.

Uvedomili sme si, že potrebujeme viac než len to, aby sme presadili a prinútili ľudí, aby veľmi chceli náš produkt. Nechceli sme byť „ďalším dashboardom založeným na Bootstrape“. Kam pôjdete, keď chcete skvelý zdroj dizajnu?

Ak hľadáte „dashboard“ na Dribbble, nájdete veľa neuveriteľne krásnych dashboardov a administračných panelov. Pre tých, ktorí to nevedia, je Dribbble ako vizuálny kokaín. Skontrolujte niektoré z týchto príkladov od Cosmina Capitanu a Mika z CreativeMints:

Keď sme videli všetky tieto krásne príklady, uvedomili sme si, že ak niečo také postavíme, určite budeme vyčnievať z davu. Aj keď dashboardy alebo grafy vyzerajú veľmi dobre, bude pre nás veľmi ťažké alebo nemožné skutočne kódovať v HTML, CSS a JavaScripte. Alebo riešia veľmi konkrétny problém, napríklad najnovšiu palubnú dosku s Body Measurements.

Pred 2 rokmi to bolo nemožné, pretože naša úroveň vedomostí a skúseností s HTML / CSS nebola taká vysoká. Som si istý, že ak by sme ich chceli dnes implementovať, mali by sme veľkú šancu vytvoriť niečo veľmi podobné. Ďalej nám pomôže technológia a kapacity prehľadávačov.

Chceli sme vytvoriť niečo, čo by mohlo využiť veľa ľudí z rôznych obchodných oblastí. K dispozícii boli aj niektoré jednoduché a nádherné palubné dosky, ale nechceli sme ich použiť ako inšpiráciu, pretože sme chceli niečo iné.

Neviem presne vysvetliť, čo sme chceli, ale ani jeden z príkladov nám nebol vyhovujúci. Pokračovali sme teda v výskume, kým sme nenašli niečo, čo sa nám naozaj páčilo:

Nebolo to dokonalé ani také vynikajúce, ako sme chceli. Cítili sme však, že je to správna voľba, a je to veľmi dobrý príklad, z ktorého môžeme zostaviť našu palubnú dosku. Aj Pablo Picasso povedal, že veľkí návrhári kradnú a Apple rešpektoval jeho slovo:

To sme nedokázali. Palubná doska z Heroku bola dosť dobrá, že nám dodávala tú iskru. Rozhodli sme sa ho teda použiť iba pre inšpiráciu a nie pre konečný výsledok. Tu je prvá iterácia:

Je to celkom dobrý začiatok. Aby sme mali lepší prehľad o tom, ako to bude vyzerať, stačí vyplniť pravú oblasť niekoľkými kartami s grafmi:

Farby kariet nevyzerali tak dobre. Boli príliš jasné na to, ako vyzeral ľavý bočný panel. Začali sme teda testovať rôzne kombinácie farieb pre grafy a bočný panel.

V tomto bode sme si uvedomili, že si nemusíme nechať iba jednu farbu pozadia bočného panela. A mali by sme nechať našich používateľov, aby si vybrali, akú farbu chcú. Vedeli sme, že Apple má pre svoju aplikáciu Fitness nejaké krásne prechody, a tak sme sa rozhodli tieto prechody použiť ako základ pre naše budúce prechody.

Vždy sme si mysleli, že ak sledujeme, čo najlepšie spoločnosti na svete robia v oblasti dizajnu a UX, nastavíme veľmi vysoké štandardy pre naše rozhrania. Týmto spôsobom bude mať čoraz viac webových vývojárov bezplatný prístup k vysoko kvalitným produktom.

Keď sme robili všetky tieto rôzne kombinácie farieb, prechodov, kariet a grafov, videli sme, že chlapci z Metalabu, ktorí vytvorili rozhranie pre Slack, napísali článok: Slackova 2,8 miliárd dolárová tajná omáčka. To nakoniec bolo inšpiráciou pre ďalšie kroky. Celková myšlienka článku bola taká, že Slackova tajná omáčka je vytvorená kombináciou skvelého a hravého rozhrania s malými interakciami, čo robí produkt užívateľsky príjemnejším.

"Vyzerá to inak, cíti sa to inak a znie to inak."

Chceli sme pridať niečo, čo žiadny z ostatných informačných panelovmal. Vždy som miloval, ako môže gradient s určitou priehľadnosťou pozerať cez obrázok. A začal som sa hrať s rôznymi obrázkami a nepriehľadnosťou gradientu. Mimochodom, obraz Duotone Gradient, ktorý sme použili v roku 2015 (ani sme nevedeli, že má názov), sa javí ako jeden z trendov webdizajnu pre rok 2017. To je celkom fajn, nie? ?

Nie som úplne spokojný ...

Toto bol pohľad, vďaka ktorému sme sa cítili šťastní, bol pre nás dokonalý? Pridali sme tiež malé interakcie, ako je úvodná rozbaľovacia animácia alebo efekt zobrazenia oznámenia:

Po pridaní obrázku s prechodmi a malými animáciami sme sa cítili ako tento človek:

3. Postavené na vrchole otvoreného zdroja a prečo by ste mali stáť na pleciach obrov

Ako sme si povedali na začiatku, nechceli sme znovu objavovať koleso. Nemali sme ani peniaze na to, aby sme zazmluvnili odborníkov schopných zostaviť prvky potrebné pre prístrojovú dosku. Rozhodli sme sa, že najlepšou voľbou pre nás je použiť to, čo ostatní ľudia vytvorili a zdieľali zadarmo alebo otvorene .

Nedávno sme zistili, že to, čo sme vlastne robili, bolo stáť na pleciach obrov. To znamená, že sme použili čo najviac z nástrojov, ktoré sú už silné a dobre udržiavané veľkými komunitami. Viac informácií o tom a o tom, prečo by ste mali používať túto techniku, keď chcete stavať niečo od nuly, nájdete v tomto úžasnom článku, ktorý napísal Quincy Larson: Ako stáť na pleciach obrov.

Poďme sa pozrieť na to, čo sa vlastne pod kapotou nachádza.

  • Rámec: Bootstrap - Bootstrap je najpopulárnejší rámec HTML, CSS a JavaScript na vývoj responzívnych mobilných prvých projektov na webe.
  • Dizajnová vrstva: Získajte sadu Shit Done - bezplatná súprava používateľského rozhrania Bootstrap 3. Toto je najlepší východiskový bod pre každý online projekt, ktorý budujete. Stala sa ochrannou známkou pre online komunitu prehľadného a pekne vyzerajúceho rozhrania.
  • Písmo: Roboto - písmo Google, ktoré má dvojakú povahu. Má mechanickú kostru a formy sú do značnej miery geometrické.
  • Malé ikony: Font Awesome - Font Awesome vám poskytne škálovateľné vektorové ikony, ktoré je možné prispôsobiť pomocou CSS.
  • Veľké ikony: Ikony ťahu 7 - Toto je kompletná sada 202 ikon tenkého ťahu inšpirovaných systémom iOS 7.
  • Grafy: Chartist.js - Chartist.js je produktom komunity, ktorá bola sklamaná zo schopností, ktoré poskytujú ďalšie knižnice grafov.
  • Upozornenia: Bootstrap Notify - Tento doplnok vám pomôže zmeniť štandardné upozornenia bootstrapu na „growl“ podobné upozorneniam.
  • Mapy: Google Maps - doplnok na prezeranie máp.
  • Fotografie: Unsplash - bezplatné (s čímkoľvek chcete) fotografie vo vysokom rozlíšení.
"Neexistuje nič ako niečo pre nič za nič." Všetko, vrátane vášho osobného úspechu, má cenu, ktorú musíte zaplatiť “- Napoleon Hill

Pretože sme veľa využili z komunity, bolo by fér vrátiť komunite. Takže sme sa pred pár týždňami rozhodli vydať ho pod licenciou MIT. Týmto spôsobom môže viac vývojárov prispievať a používať ho bez akýchkoľvek právnych obmedzení na osobné a komerčné projekty.

4. Spustite, vstaňte a zažiarte

Prieskum okolo 50 - 60 dní (zaostrenie sekery) nám dal možnosť vyvinúť palubnú dosku iba za 15 dní (sekanie stromu). ?

Čo robíte po spustení projektu? Musíte zistiť, aké to má spätná väzba, či by ju ľudia chceli použiť a či vám problém robí jednoduchý panel, ktorý ste vytvorili. Ak to nechcú použiť, nemáte firmu. Predložili sme ho na rôzne komunity a darilo sa mu veľmi dobre. Napríklad:

  • 170 hlasov za Hacker News, vrchol z pozície 9 a viac ako 88 000 zhliadnutí za daný týždeň
  • 247 hlasov za /redd / webdev subreddit
  • 80 hlasov za /red / web_design subreddit (blokované pri 80, pretože dostali značku „spam“, mali sme nejaké vyskakovacie okná na odber ... ktoré sme neskôr odstránili?)

Komunita tento nápad potvrdila. Máme tiež veľa spätnej väzby, aby sme mohli pridať súbory SASS pre jednoduchšie prispôsobenie alebo ich zverejniť na GitHub.

Potom sme videli, že bolo veľa začiatočníkov, ktorí sa len chceli naučiť používať tento informačný panel. Bolo to také krásne, že ľudia, ktorí s niečím takým nereagovali, sa chceli naučiť, ako s tým pracovať.

Strávili sme asi 3 týždne vývojom série videonávodov, ako replikovať riadiaci panel WordPress pomocou nášho produktu. Rozhodli sme sa použiť dashboard WordPress, pretože je to veľmi populárny dashboard. A chceli sme umožniť ľuďom pochopiť, že pomocou nášho produktu môžu postaviť čokoľvek.

Výukové programy boli veľmi dobre prijaté a od dnešného dňa majú viac ako 78 000 pozretí. Tu je prvé video o tom, ako vytvoriť responzívnu šablónu správcu pomocou ovládacieho panela Light Bootstrap 1/3.

5. Ako financujeme podporu a požiadavky webových vývojárov

Vytvoriť produkt ľahko, udržať ho pri živote je ťažké.

Existuje veľa skvelých doplnkov / šablón, ktoré umierajú, pretože ich tvorcovia nemajú dostatok peňazí alebo nedosahujú dostatočné príjmy, aby mohli pokračovať vo vývoji alebo opraviť problémy.

Nechceli sme rovnaký prípad pre náš produkt. Najlepšou možnosťou, ako udržať produkt nažive, bolo vytvoriť verziu PRO, ktorá môže generovať dostatočné príjmy na podporu neustáleho vývoja.

Využili sme spätnú väzbu od webových vývojárov a rozhodli sme sa vytvoriť verziu Premium s ďalšími prvkami a doplnkami. Chceli sme pomôcť aj niektorým chlapcom, ktorí chceli konkrétne vlastnosti a boli v kategórii 5%. Výber správnych doplnkov, ktoré nám môžu pomôcť z kategórie 5%, ako sme mohli, bolo pre nás veľmi ťažké.

Opäť sme začali robiť prieskum na prémiovom prístrojovom paneli. A pridali sme doplnky ako Full Calendar, DataTables.net, Sweet Alert, Bootstrap Wizard a nejaké ďalšie stránky ako Login Page, Register Page, Lock Page.

Tu je živý náhľad verzie PRO. Uvidíte, že sme zachovali rovnakú štruktúru a chceli sme ju zjednodušiť, bez príliš veľa možností a funkcií.

Vďaka výnosu z verzie PRO sme nielen podporovali produkt, ale tiež vytvárali nové typy súborov, ako je verzia PSD / Sketch alebo verzia Angular 2. Obe sú zdieľané zadarmo.

6. Plány budúceho rozvoja

Tu je niekoľko štatistík o informačnom paneli:

Je veľmi ľahké ho prispôsobiť tak, aby zodpovedal vašej značke. Používalo sa to v interných nástrojoch, ako je katalóg pohotovostného lekárstva v Stanforde:

Dostali sme veľa požiadaviek od webových vývojárov, ktorí chcú mať Dashboard postavený na rôznych frameworkoch ako Angular 2, Angular CLI, React, Meteor, VueJS alebo ako Rails Gem. Vytvorenie všetkých týchto verzií a ich bezplatná podpora v rámci licencie MIT bude fungovať, iba ak budeme mať verzie PRO pre každú z nich. Začali sme s Angular 2 a videli sme veľa ľudí, ktorí ho používajú, a dostali sme veľa spätnej väzby, ako to vylepšiť. Takže ak sa chcete zapojiť do ďalších rámcov alebo máte nejaké nápady, ako vylepšiť tieto produkty, radi sa s vami porozprávame.

Stálo to veľa odvahy, aby sme ukázali naše zdroje a postup, ktorý sme mali za vybudovaním Dashboardu Light Bootstrap. Dúfam, že sa z toho niečo dozviete, a ak máte akékoľvek pripomienky alebo návrhy, budem sa s vami rád rozprávať v komentároch.

Užitočné odkazy:

  • Stiahnite si verziu HTML zo stránky www.creative-tim.com
  • Stiahnite si hranatú verziu zo stránky www.creative-tim.com
  • Stiahnite si verziu PSD / Sketch zo stránky www.pixelsvibe.com
  • Pohrajte sa s ním v živom náhľade
  • Prispievajte a nahlasujte problémy v úložisku GitHub
  • Navštívte náš blog: //blog.creative-tim.com/

Nájdete ma na:

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