de succesCristina Conacel - Co-Fondator Creative Tim
Creative Tim
@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).
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.
@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.
@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.
@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).
• 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:
• 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.
@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.
@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.
@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.
@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.
@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:
@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.
Cand am terminat cu acest modificari, ne simteam ca tipul acesta.
@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.
@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.
@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.
@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.
@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.
@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.
@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.
@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 :-)))
@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.
@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.
@creativetim BucharestJS #20Planuri Viitoare
Statistici Curente
Elena-Cristina Conacel
In acest moment avem urmatoarele statistici pentru dashboard:
@creativetim BucharestJS #20Planuri Viitoare
Folosit in cadrul Universitatii Stanford
Elena-Cristina Conacel
Dintre clienti fac parte freelanceri, companii, agentii si chiar universitati ca Stanford.
@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.