Cum sa construiesti si sa promovezi un dashboard de succes

29
Cum sa construiesti si sa promovezi un dashboard de succes Cristina Conacel - Co-Fondator Creative Tim Creative Tim

Transcript of Cum sa construiesti si sa promovezi un dashboard de succes

Page 1: Cum sa construiesti si sa promovezi un dashboard de succes

Cum sa construiesti si sa promovezi un dashboard

de succesCristina Conacel - Co-Fondator Creative Tim

Creative Tim

Page 2: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20

Elena-Cristina Conacel
Aici ma prezint, spun ca lucrez la creative tim si facem tooluri web. Si ca astazi voi prezenta procesul din spatele unuia dintre cele mei populare produse ale noastre. Vom trece prin elemente tehnice, de creatie si de promovare. Cam acesta ar fi planul de bataie (click la slideul urmator).
Page 3: Cum sa construiesti si sa promovezi un dashboard de succes

Game Plan• Structura de baza• Crearea designului• Folosirea de elemente open-source• Lansarea, consolidarea si promovarea• Cum finantam suportul si cererile noi• Planuri viitoare de dezvoltare

@creativetim BucharestJS #20

Elena-Cristina Conacel
Voi citi enumerarea.
Page 4: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20

Elena-Cristina Conacel
Pe parcursul prezentarii voi incerca sa dau cat maimulte detalii, pentru ca procesul sa nu se asemene cu acest tutorial despre cum sa desenezi un cal.
Page 5: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Structura de Baza

"If I had 8 hours to chop down a tree, I'd spend 6 hours

sharpening my ax."

- Abraham Lincoln

Elena-Cristina Conacel
Inainte de a scrie prima linie de cod, trebuie facuta cercetare. Fiindca incercam sa nu reinventam roata, noi ne uitam la competitie si la siteuri al caror design ne place si incercam in general sa culegem cat mai multe informatii. Pentru ca apoi, cand incepem sa dezvoltam, lucrurile sa decurga lin.
Page 6: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Structura de Baza

Elena-Cristina Conacel
Cu LIBD ne-am facut temele si am investigam peste 100 de teme de pe diferite marketuri. Cu o varietate atat de mare de culori, elemente, animatii, cum determini cea mai buna combinatie pentru tine?Noi ne-am decid sa scriem elementele recurente din aceste teme si sa le impartim in 2 categorii. Cele care apar cel mai des (de baza) si cele care rezolva o nevoie specifica (custom).
Page 7: Cum sa construiesti si sa promovezi un dashboard de succes

• Tabele• Notificari• Lista de taskuri• Carduri (formulare si vizualizari informatii)• Grafice (donut chart, line chart, bar chart• Harti

@creativetim BucharestJS #20

Structura de Baza

Elena-Cristina Conacel
Am realizat ca folosind elementele de baza poti realiza in jur de 95% din functionalitatile necesare intr-un dashboad. Pe langa elementele initiale: butoane, inputuri, iconite, tipografie, sidebar, navbar si dropdown, urmatoarele elemente de baza sunt:
Page 8: Cum sa construiesti si sa promovezi un dashboard de succes

• Cate elemente ar trebui incluse?• Puncte pro si contra adaugarii de noi elemente• Elemente custom:

• Drag&Drop

• Timeline

• Multi-level navigation

• WYSIWYG editor

• etc

@creativetim BucharestJS #20

Structura de Baza

Elena-Cristina Conacel
In principiu, cu elementele acestea poti recrea 95% din orice dashboard de pe internet. Pentru procentul ramas, nevoile se schimba de la un proiect la altul.Cu cat incercam sa satisfacem mai multe cazuri, cu atat produsul devine mai stufos. Fiecare plugin vine cu propriul JS si CSS. Noi am decis sa ramanem la elementele de baza pentru dashboard.
Page 9: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Crearea Designului

Elena-Cristina Conacel
Dupa ce am facut planul legat de ce elemente vor fi in dashboard, ne-am concentrat pe design. Deoarece GSDK capata atentie pe internet si era apreciat de web developeri, asa ca l-am folosit ca baza, pentru butoane, inputuri, navbar, etc.Dar cautam inca elemente wow pentru a crea un dashboard ce se diferentiaza de celelalte existente.
Page 10: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Crearea Designului

Elena-Cristina Conacel
Asa ca ne-am gandit sa mergem pe Dribbble. In cazul in care nu stiti Dribbble este o comunitate in care designerii posteaza la ce lucreaza momentan. Daca incerci sa cauti "dashboard" pe Dribbble obtii rezultate ca urmatoarele. Care sunt foarte frumoase. Dar nu reprezentau un model pe care noi il puteam implementa imediat, deoarece majoritatea elementelor sunt prezentate ca un concept, pe un caz foarte specific (cum este acesta cu masuratori pentru fitnes). Scopul nostru era sa gasim ceva ce poate fi implementat in multiple domenii.Asa ca am continuat sa cautam optiuni.
Page 11: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Crearea Designului

Heroku Dashboard Light Dashboard #1

Elena-Cristina Conacel
Fiindca folosim serviciul Heroku pentru platforma, ne-a atras dashboardul lor. Desi nu arata ca o racheta spatiala, noua ni s-a parut o baza foarte buna.Asa am ajuns la prima iteratie pentru dashboardul nostru.
Page 12: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Crearea Designului

Light Dashboard #2 Light Dashboard #3

Elena-Cristina Conacel
Dupa aceasta, era necesar sa umplem cu informatii partea din dreapta. Si am adaugat carduri, grafice, liste de taskuri. In acest moment ni se parea prea incarcat. Asa ca am incercat sa mai potolim culorile. In acest punct ne-am dat seama ca nu trebuie sa ne limitam la o singura culoare pentru sidebar.
Page 13: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Crearea Designului

Apple Fitness App Light Dashboard Sidebars

Elena-Cristina Conacel
Asa ca ne-am gandit sa alegem o paleta de culori. Ne-au placut foarte mult gradientii de la Apple, asa ca ne-am inspirat din dashboard-ul lor pentru fitness si am ajuns la urmatoarele rezultate:
Page 14: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Crearea Designului

Light Bootstrap Dashboard Iteratia Finala

Elena-Cristina Conacel
In timp de noi faceam planul pentru design si dezvoltare, pe internet circula un articol legat de ce este special in legatura cu designul Slack. Ideea de baza era ca interfata trebuie sa fie imbogatita cu elemente jucause, cu mici interactiuni care sa capteze atentia utilizatorilor. Asa ca ne-am gandit ce elemente subtile putem sa adaugam pe final.Si am ajuns la aceasta varianta finala, in care am adaugat imagine pe fundalul sidebarului si animatii pentru notificari si dropdown.
Page 15: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Crearea Designului

https://www.instagram.com/nusr_et

Elena-Cristina Conacel
Cand am terminat cu acest modificari, ne simteam ca tipul acesta.
Page 16: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Elemente Open-Source

Ce elemente open-source am folosit:

• Framework: Bootstrap• Design: Get Shit Done• Font: Roboto• Iconite: Font Awesome si iOS 7 Stroke• Grafice: Chartist.js• Notificari: Bootstrap Notify• Harti: Google Maps• Poze: Unsplash

Elena-Cristina Conacel
Asa cum am mai spus, nu am vrut sa reinventam roata cu acest dashboard. Si nu aveam bugetul sau timpul necesar sa dezvoltam toate elementele necesare de la 0. Asa ca ne-am gandit ce cea mai buna varianta pentru noi este sa folosim librarii gratis sau open-source.
Page 17: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Elemente Open-Source

"There is no such thing as something for nothing.

Everything, including your personal success, has a price

that must be paid."

- Napoleon Hill

Elena-Cristina Conacel
Cum noi am beneficiat farte mult datorita acestor librarii, ni s-a parut corect ca si produsul nostru sa fie open-source. Asa ca am lansat dashboardul sub licenta MIT si l-am postat si pe github. In acest fel alti developeri pot contribui si replica dashboard fara constrangeri legale.
Page 18: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Lansare si Promovare

Pregatirea de 60 de zile a dus la o perioada de dezvoltare de doar 15 zile.

Elena-Cristina Conacel
Fiindca ne-am facut temele si am avut un plan solid de atac, dezvoltarea ne-a luat doar 2 saptamani.
Page 19: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Lansare si Promovare

Postat pe creative-tim.com

Elena-Cristina Conacel
Primul lucru pe care l-am facut a fost sa il postam pe creative tim. Voiam sa aflam feedback de la o comunitate mai mare totusi.
Page 20: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Lansare si Promovare

Cum am inceput:

• 170 voturi pe HackerNews (am ajuns pe pozitia 9 si am avut mai mult de 88.000 vizualizari in acea saptamana)

• 247 voturi pe subreddit /r/webdev• 80 voturi de subreddit /r/web_design

Elena-Cristina Conacel
Asa cam continuat sa postam si sa aflam parerea oamenilor despre el.Am primit feedback foarte productiv de la oamenii care au interactionat cu el. Am adaugat fisierele SASS pentru ca oamenii sa poata modifica mai usor designul si am creat tutoriale video.
Page 21: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Lansare si Promovare

Traficul de la lansare pana in prezent

Elena-Cristina Conacel
Acesta este traficul de la lansare pana in prezent. Primul spike a fost de la faptul ca am postat in diferite comunitati. Dupa acest avant, oamenii au continuat sa se intoarca. Multe bloguri si reviste de web design l-au observat si au scris despre el, asa ca au oferit referinta. Pentru noi a fost o validare a product-market fitului si in urmatoarele luni nu a trebuit sa ne mai facem griji pentru trafic.
Page 22: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Suport si Cereri Noi

Elena-Cristina Conacel
Dar au aparut alte lucruri. Daca pana la lansare nu trebuie decat sa dezvoltam soft, dupa lansare au aparut o multime de alte lucruri.Detaliat a 2a placinta.
Page 23: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Suport si Cereri Noi

"Building a product it easy, keeping it alive is hard.

- Unknown Source

Elena-Cristina Conacel
Exista multe librarii online care mor deoarece creatorii nu se mai pot ocupa de ele. Noi nu am vrut sa se intample accest lucru cu noi.
Alex
Yo, Unkown Source eu sunt, este citatul meu :-)))
Page 24: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Suport si Cereri Noi

Versiunea Premium

Elena-Cristina Conacel
Asa ca am creat o varianta premium la dashboard, care sa se ocupe de o parte din necesitatile specifice pentru anumite proiecte (cele 5 procente de care am spus la inceput). Avand un venit din aceasta varianta, am putut sa continuam dezvoltarea.
Page 25: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Suport si Cereri Noi

Varianta Sketch & PSD Varianta Angular

Elena-Cristina Conacel
Asa ca intre timp am creat si lansat varianta Sketch si PSD pentru dashboard. Si am creat o librarie pentru Angular 2.
Page 26: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Planuri Viitoare

Statistici Curente

Elena-Cristina Conacel
In acest moment avem urmatoarele statistici pentru dashboard:
Page 27: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Planuri Viitoare

Folosit in cadrul Universitatii Stanford

Elena-Cristina Conacel
Dintre clienti fac parte freelanceri, companii, agentii si chiar universitati ca Stanford.
Page 28: Cum sa construiesti si sa promovezi un dashboard de succes

@creativetim BucharestJS #20Planuri Viitoare

Ce planuim sa facem in continuare:

• React• Meteor• VueJS• Rails Gem• alte idei?

Elena-Cristina Conacel
Am avut multe cereri de la utilizatori care vor sa aiba dashboardul pe diferite frameworkuri. Asa ca, in continuare, vrem sa continuam dezvoltarea pe:Daca aveti idei si veti sa codati cu noi, am fi bucurosi sa discutam mai multe.
Page 29: Cum sa construiesti si sa promovezi un dashboard de succes

Multumesc pentru atentie!Cristina Conacel

[email protected]@conacelelena

Creative Tim