Anatomien på et Bootstrap-instrumentbræt, der tjener $ 1.000 hver måned

Vi hos Creative Tim har altid ønsket at levere gode værktøjer til alle webudviklere, der bruger vores produkter. Hvis du vil læse mere om, hvordan vi har opbygget vores forretning, og hvad der er vores drev, kan du tjekke denne artikel: Udvide et sideprojekt til en $ 17.000 måneders forretning.

Vi ønsker at se bedre websteder og webapps på internettet. Så vi besluttede at dele nogle af de "hemmelige ingredienser", der danner basen for et af vores mest populære dashboards: Light Bootstrap Dashboard. Selvfølgelig vil de ikke være en hemmelighed længere, fordi vi deler dem med dig. ?

I denne casestudie vil jeg fortælle, hvordan vi fik ideen til at skabe et dashboard, hvor vi fik inspiration, hvordan vi implementerede alt, hvordan det blev brugt i Stanfords interne værktøjer, og hvordan vi finansierede udviklingen og støtten til det. Her er en oversigt over artiklen:

  1. Den grundlæggende struktur og kernefunktionalitet
  2. Hvordan designet blev oprettet
  3. Bygget oven på open source, og hvorfor du skal stå på giganter
  4. Launch, Rise and Shine
  5. Hvordan vi finansierer supporten og løser anmodningerne fra udviklerne
  6. Fremtidige udviklingsplaner

Jeg vil forsøge at give så meget information som muligt, med håb om at denne tutorial ikke vil være sådan:

1. Den grundlæggende struktur og kernefunktionalitet

Du skal tænke på processen bag oprettelse af instrumentbrættet som en test, du skal tage, når du har lært meget. Selvfølgelig lærer du meget under udviklingen af ​​produktet. Men først skal du have stærk viden om, hvad der er "det", og hvordan det "bruges". Før du skriver den første linje kode, skal du undersøge, lave planer, oprette to-do lister og skitser og prøve at visualisere, hvad du vil have til sidst.

Da du ikke genopfinder hjulet, skal du kigge rundt på virksomheder, der skaber gode produkter for at få inspiration (såsom Heroku, Slack, Mailchimp, Stripe). Se også på din konkurrence. Du får en masse information. Og når du starter, bliver det lettere at udvikle produktet, fordi du lavede dine lektier. Du skal slibe din økse, inden du begynder at skære:

"Hvis jeg havde otte timer til at hugge et træ ned, ville jeg bruge seks timer på at slibe min økse." - Abraham Lincoln

Vi lavede vores lektier, og vi har en enorm liste med over 100 gratis dashboards som eksempler, hvorfra vi kan få inspiration. Her er nogle af dem:

Du har en enorm liste over dashboards med mange farver, animationer, smukke ikoner, små diagrammer, store diagrammer, statisk eller fast sidebjælke og hundredvis af forskellige funktioner. Hvordan ved du, hvilken der er den bedste mulighed for dit publikum?

Da vi ikke vidste, hvad folk vil have inde i et dashboard, besluttede vi at nedskrive alle de funktioner, som disse dashboards indeholder og kun bruge de mest almindelige. Vi indså, at kernefunktionerne løser omkring 95% af de tilfælde, hvor du har brug for et dashboard. De resterende 5% løser meget specifikke problemer.

De grundlæggende elementer er knapper, ikoner, typografi, sidepanel, hovedpanel, navigationslinjer og dropdown. Kernefunktionerne i de fleste dashboards er:

  1. Tabeller
  2. Meddelelser
  3. Opgavelister
  4. Kort (til forskellige former for former og lettere visualisering af informationen)
  5. Diagrammer (doughnutdiagram, linjediagram, søjlediagram)
  6. Google kort

Med små visuelle justeringer kan du gengive 95% af ethvert dashboard fra enhver virksomhed i verden bare ved hjælp af kerneelementerne. Så har du de resterende 5%, hvilket altid er forskelligt afhængigt af virksomheden og de problemer, det løser. Her kan vi finde:

  1. Kanban-systemkort
  2. Træk og slip-funktionalitet
  3. Tidslinjekomponenter
  4. WYSIWYG Editor
  5. 8-niveau navigations sidebar menu
  6. Multi File Uploader + Træk og slip File Uploader
  7. Form X-redigerbar
  8. Morris Chart, Google Chart, Flot Chart, amChart, Flows Chart og mange andre typer diagrammer
  9. Og listen kan fortsætte med mere end 200 funktioner

Problemet er, at hvert af disse nye plugins tilføjer ekstra CSS-, JavaScript- eller jQuery-biblioteker og HTML. Vi har bygget produktet på almindelig HTML, ingen rammer eller modulære tricks, så al CSS / JavaScript ville være i en enkelt fil.

Misforstå mig ikke, jeg siger ikke, at funktionerne ikke var gode. Disse er gode plugins udviklet af fantastiske mennesker. Men det var ikke noget, vi ønskede at have i vores enkle dashboard.

Så vi besluttede at holde produktet så let som muligt (husker du navnet?). Let Bootstrap Dashboard . Og vi besluttede kun at implementere de funktioner, der løste kernen 95%.

2. Hvordan designet blev oprettet

Efter at vi lavede vores plan for de elementer, som produktet ville have, måtte vi tænke på et design, der ville være fremragende. Et brugervenligt design, der får folk til at have dette instrumentbræt inde i deres indholdsstyringssystem. Vi havde allerede det berømte Bootstrap Get Shit Done Kit. Webudviklere elskede det, og det er blevet downloadet mere end 30.000 gange. Så vi besluttede at bruge det som kerne design til grundlæggende elementer som knapper, Navbars, input osv.

Vi indså, at vi dog har brug for mere end det, for at få indflydelse og få folk til at have meget lyst til vores produkt. Vi ønskede ikke at være ”et andet instrumentbræt baseret på Bootstrap”. Hvor skal du hen, når du vil have en god designressource?

Hvis du søger på "dashboard" på Dribbble, finder du mange utroligt smukke dashboards og admin-paneler. For dem der ikke ved det, er Dribbble faktisk som visuel kokain. Tjek nogle af disse eksempler lavet af Cosmin Capitanu og Mike fra CreativeMints:

At se alle disse smukke eksempler fik os til at indse, at hvis vi bygger noget lignende, vil vi helt sikkert skille os ud fra mængden. Selvom dashboards eller diagrammet ser meget godt ud, vil de også være meget svære eller umulige for os at kode i HTML, CSS og JavaScript. Eller de løser et meget specifikt problem, som det seneste dashboard med Body Measurements.

Det var umuligt for 2 år siden, fordi vores niveau af viden og erfaring med HTML / CSS ikke var så højt. Jeg er sikker på, at hvis vi gerne vil implementere dem i dag, ville vi have en god chance for at skabe noget meget lignende. Også teknologien og browserkapacitet hjælper os mere.

Vi ønskede at bygge noget, der kan bruges af mange mennesker fra forskellige forretningsområder. Der var også nogle enkle og smukke dashboards, men vi ønskede ikke at bruge dem som inspiration, fordi vi ønskede noget andet.

Jeg kan ikke forklare nøjagtigt, hvad vi ønskede, men vi følte os ikke komfortable med nogen af ​​eksemplerne. Så vi fortsatte med at undersøge, indtil vi fandt noget, som vi virkelig kunne lide:

Det var ikke perfekt eller så fremragende, som vi ville have det. Men vi følte, at det er det rigtige valg, og det er et meget godt eksempel, hvorfra vi kan bygge vores dashboard. Selv Pablo Picasso sagde, at store designere stjæler, og Apple respekterede hans ord:

Vi kunne ikke gøre det. Instrumentbrættet fra Heroku var godt nok til, at det gav os den gnist. Så vi besluttede kun at bruge det til inspiration og ikke til det endelige resultat. Her er den første iteration:

Det er en ret god start. For at få et bedre overblik over, hvordan det vil se ud, skal vi bare udfylde det rigtige område med nogle kort med diagrammer:

Kortenes farver så ikke så godt ud. De var for lyse til, hvordan venstre sidebjælke så ud. Så vi begyndte at teste forskellige kombinationer af farver til diagrammerne og sidebjælken.

På dette tidspunkt indså vi, at vi ikke behøver kun at beholde 1 farve til sidebjælkens baggrund. Og vi skal lade vores brugere vælge, hvilken farve de vil have. Vi vidste, at Apple havde nogle smukke gradienter til deres Fitness-app, så vi besluttede at bruge disse gradienter som basen for vores fremtidige gradienter.

Vi har altid tænkt, at hvis vi ser på, hvad de bedste virksomheder i verden laver med hensyn til design og UX, vil vi sætte meget høje standarder for vores grænseflader. På denne måde vil flere og flere webudviklere have fri adgang til produkter af høj kvalitet.

Mens vi lavede alle disse forskellige kombinationer af farver, gradienter, kort og diagrammer, så vi, at fyrene fra Metalab, der byggede grænsefladen til Slack, skrev en artikel: Slacks 2,8 milliarder dollar hemmelige sauce. Dette endte med at blive en inspiration til de næste trin. Den overordnede idé med artiklen var, at Slacks hemmelige sauce er skabt af kombinationen af ​​en fantastisk og legende grænseflade med små interaktioner, hvilket gør produktet mere brugervenligt.

"Det ser anderledes ud, det føles anderledes og det lyder anderledes."

Vi ønskede at tilføje noget, som ingen af ​​de andre dashboardshavde. Jeg har altid elsket, hvordan en gradient med en vis gennemsigtighed kan se ud over et billede. Og jeg er begyndt at lege med forskellige billeder og gradientens opacitet. Forresten ser Duotone Gradient-billedet, som vi brugte i 2015 (vi vidste ikke engang, at det har et navn), at være en af ​​tendenser inden for webdesign i 2017. Dette er ret sejt, er det ikke? ?

Ikke helt tilfreds ...

Dette var den opfattelse, der fik os til at føle os lykkelige, det var bare perfekt for os?. Vi tilføjede også små interaktioner som åbningsrullelisten eller animationseffekten af ​​meddelelsen:

Tilføjelse af billedet med gradienterne over og de små animationer fik os til at føle os som denne fyr:

3. Bygget oven på open source, og hvorfor du skal stå på giganternes skuldre

Som vi sagde i starten, ville vi ikke genopfinde hjulet. Vi havde heller ikke pengene til at indgå eksperter i stand til at opbygge de nødvendige elementer til instrumentbrættet. Vi besluttede, at den bedste mulighed for os er at bruge, hvad andre mennesker oprettede og delte gratis eller open source .

Vi opdagede for nylig, at hvad vi faktisk gjorde, var at stå på giganternes skuldre. Det betyder, at vi brugte så meget som muligt fra værktøjer, der allerede er stærke og godt vedligeholdt af store samfund. For mere om dette, og hvorfor du skal bruge denne teknik, når du vil bygge noget fra bunden, læs denne fantastiske artikel, skrevet af Quincy Larson: Sådan står du på giganternes skuldre.

Lad os se på, hvad der faktisk er under emhætten.

  • Framework: Bootstrap - Bootstrap er den mest populære HTML-, CSS- og JavaScript-ramme til udvikling af responsive, mobile første projekter på nettet.
  • Design Layer: Get Shit Done Kit - Gratis Bootstrap 3 brugergrænsefladesæt. Dette er det bedste udgangspunkt for ethvert online-projekt, du bygger. Det er blevet et varemærke for online-communityet med en ren og flot grænseflade.
  • Skrifttype: Roboto - en Google-skrifttype, der har en dobbelt karakter. Det har et mekanisk skelet, og formene er stort set geometriske.
  • Små ikoner: Font Awesome - Font Awesome giver dig skalerbare vektorikoner, der kan tilpasses ved hjælp af CSS.
  • Store ikoner: Stroke 7-ikoner - Dette er et komplet sæt med 202 tynde stregikoner inspireret af iOS 7.
  • Diagrammer: Chartist.js - Chartist.js er et produkt af et samfund, der var skuffet over de evner, som andre kortbiblioteker leverer.
  • Notifikationer: Bootstrap Notify - Dette plugin hjælper dig med at gøre standard bootstrap-alarmer til “growl” som notifikationer.
  • Kort: Google Maps - Plugin til visning af kort.
  • Fotos: Unsplash - Gratis (gør hvad du vil) fotos i høj opløsning.
”Der er ikke noget som noget for ingenting. Alt inklusive din personlige succes har en pris, der skal betales ”- Napoleon Hill

Da vi brugte meget fra samfundet, ville det være rimeligt at give tilbage til samfundet. Så vi besluttede for et par uger siden at frigive det under MIT-licens. På denne måde kan flere udviklere bidrage og bruge det uden juridiske begrænsninger til personlige og kommercielle projekter.

4. Start, stige og skinne

At udføre undersøgelsen i omkring 50-60 dage (skærpning af øksen) gav os muligheden for at udvikle instrumentbrættet på kun 15 dage (hugge træet). ?

Hvad gør du, når du har startet et projekt? Du skal se, hvad feedbacken til den er, hvis folk gerne vil bruge den, og hvis det enkle dashboard, du oprettede, løser et problem for dem. Hvis de ikke vil bruge det, har du ikke en virksomhed. Vi sendte det til forskellige samfund, og det klarede sig meget godt. For eksempel fik det:

  • 170 opstemninger på Hacker News, toppede til position 9 og over 88.000 visninger for den uge
  • 247 opvotes på / r / webdev subreddit
  • 80 upvotes på / r / web_design subreddit (blokeret ved 80 fordi den fik "spam" tag, vi havde nogle abonnements pop op ... som vi senere fjernede?)

Samfundet validerede ideen. Vi har også en masse feedback for at tilføje SASS-filerne for lettere tilpasning eller sende det på GitHub.

Så har vi set, at der var mange begyndere, der bare ville lære at bruge dette dashboard. Det var så smukt, at folk, der ikke interagerede med noget lignende, ville lære at arbejde med det.

Vi brugte omkring 3 uger på at udvikle en række video-tutorials om, hvordan man replikerer WordPress-dashboardet ved hjælp af vores produkt. Vi valgte at bruge WordPress-dashboardet, fordi det er et meget populært dashboard. Og vi ønskede at lade folk forstå, at de kan bygge noget ved hjælp af vores produkt.

Selvstudierne blev meget godt modtaget og har over 78.000 visninger fra i dag. Her er den første video om, hvordan du opretter en responsiv admin-skabelon ved hjælp af Light Bootstrap Dashboard 1/3.

5. Hvordan vi finansierer support og anmodninger fra webudviklere

Det er svært at opbygge et produkt, det er nemt at holde det i live.

Der er mange gode plugins / skabeloner derude, der dør, fordi deres skabere ikke har nok kontanter, eller de tjener ikke nok indtægter til at fortsætte udviklingen eller løse problemerne.

Vi ønskede ikke den samme sag for vores produkt. Den bedste mulighed for at holde produktet i live var at oprette en PRO-version, der kan generere nok indtægter til at understøtte kontinuerlig udvikling.

Vi brugte feedback fra webudviklere og besluttede at oprette en Premium-version med flere elementer og plugins. Vi ville også hjælpe nogle af de fyre, der ønskede specifikke funktioner og var i 5% -kategorien. At vælge de rigtige plugins, som kan hjælpe så meget som vi kunne fra 5% -kategorien, var meget svært for os.

Vi startede igen med at undersøge premium-dashboardet. Og vi tilføjede plugins som Fuld kalender, DataTables.net, Sweet Alert, Bootstrap Wizard og nogle ekstra sider som Login Page, Register Page, Lock Page.

Her er live preview af PRO-versionen. Du vil se, at vi har holdt den samme struktur og ønsket at gøre den lys uden for mange muligheder og funktioner.

At have indtægterne fra PRO-versionen fik os til ikke kun at støtte produktet, men også oprette nye filtyper som PSD / Sketch-versionen eller Angular 2-versionen. Begge deles gratis.

6. Fremtidige udviklingsplaner

Her er nogle statistikker om instrumentbrættet:

Det er meget nemt at tilpasse det til at matche dit brand. Det blev brugt i interne værktøjer som Stanfords Department of Emergency Medicine Catalog:

Vi har mange anmodninger fra webudviklere, der ønsker at få Dashboardet bygget på forskellige rammer som Angular 2, Angular CLI, React, Meteor, VueJS eller som en Rails Gem. Oprettelse af alle disse versioner og support af dem gratis under MIT-licens fungerer kun, hvis vi har PRO-versioner til hver enkelt. Vi startede med Angular 2, og vi har set mange mennesker, der bruger det, og vi har en masse feedback om, hvordan vi kan forbedre det. Så hvis du ønsker at blive involveret i de andre rammer, eller hvis du har ideer til, hvordan du forbedrer disse produkter, vil vi være glade for at tale mere.

Det krævede meget mod at vise vores kilder og den proces, vi havde bag opbygningen af ​​Light Bootstrap Dashboard. Håber du vil lære noget af dette, og hvis du har feedback eller forslag, vil jeg være glad for at tale med dig i kommentarerne.

Nyttige links:

  • Download HTML-version fra www.creative-tim.com
  • Download Angular version fra www.creative-tim.com
  • Download PSD / Sketch-version fra www.pixelsvibe.com
  • Spil med det på live preview
  • Bidrag og rapporter problemer i GitHub-arkivet
  • Tjek vores blog: //blog.creative-tim.com/

Find mig på:

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