Анатомија Боотстрап контролне табле која месечно зарађује 1.000 долара

Ми у Цреативе Тим-у одувек смо желели да испоручимо сјајне алате свим веб програмерима који користе наше производе. Ако желите да прочитате више о томе како смо изградили своје пословање и шта је наш погон, можете погледати овај чланак: Претварање споредног пројекта у посао вредан 17.000 УСД месечно.

Желимо да видимо боље веб локације и веб апликације на Интернету. Тако смо одлучили да поделимо неке од „тајних састојака“ који чине основу једне од наших најпопуларнијих контролних плоча: Лигхт Боотстрап Дасхбоард. Наравно, више неће бити тајна, јер ћемо их поделити са вама. ?

У овој студији случаја поделићу како смо добили идеју да направимо контролну таблу, где смо добили инспирацију, како смо све применили, како се користило у унутрашњим алатима Станфорда и како смо финансирали развој и подршку за то. Ево прегледа чланка:

  1. Основна структура и основна функционалност
  2. Како је створен дизајн
  3. Изграђен на врху отвореног кода и зашто бисте требали стајати на плећима дивова
  4. Лансирање, успон и сјај
  5. Како финансирамо подршку и решавамо захтеве програмера
  6. Будући развојни планови

Покушаћу да пружим што више информација са надом да овај водич неће бити овакав:

1. Основна структура и основна функционалност

На процес стварања контролне табле требали бисте гледати као на тест који морате да прођете након што научите много. Наравно да ћете током развоја производа научити много тога. Али прво, морате добро познавати шта је „то“ и како се „користи“. Пре него што напишете први ред кода, треба да истражите, направите планове, направите листе обавеза и скице и покушате да визуализујете шта ћете на крају желети.

Будући да не измишљате точак, морате да погледате око себе компаније које стварају сјајне производе да бисте добили инспирацију (као што су Хероку, Слацк, Маилцхимп, Стрипе). Такође погледајте своју конкуренцију. Добићете пуно информација. А када започнете, биће лакше развити производ јер сте урадили домаћи задатак. Морате наоштрити секиру, пре него што почнете да сечете:

„Да имам осам сати да посечем дрво, провео бих шест сати брусећи секиру.“ - Абрахам Линколн

Направили смо домаћи задатак и добили смо огромну листу од преко 100 бесплатних контролних табли као примера из којих можемо добити инспирацију. Ево неких од њих:

Имате огромну листу контролних табли, са пуно боја, анимација, прелепих икона, малих графикона, великих графикона, статичних или фиксних бочних трака и стотинама различитих карактеристика. Како знати која је најбоља опција за вашу публику?

Будући да нисмо знали шта људи желе унутар контролне табле, одлучили смо да запишемо све функције које садрже ове контролне табле и да користимо само најчешће. Схватили смо да основне функције решавају око 95% случајева када вам је потребна контролна табла. Преосталих 5% решава врло специфичне проблеме.

Основни елементи су дугмад, иконе, типографија, бочна трака, главни панел, траке за навигацију и падајући мени. Основне карактеристике већине контролних плоча су:

  1. Столови
  2. Обавештења
  3. Листе задатака
  4. Карте (за различите врсте образаца и лакшу визуализацију информација)
  5. Графикони (графикон крофни, линијски графикон, тракасти графикон)
  6. Гугл мапе

Уз мала визуелна подешавања, можете репродуковати 95% било које контролне табле било које компаније на свету само помоћу основних елемената. Тада имате преосталих 5%, што је увек различито у зависности од компаније и проблема које решава. Овде можемо наћи:

  1. Картице система Канбан
  2. Функција превлачења и испуштања
  3. Компоненте временског следа
  4. ВИСИВИГ Едитор
  5. Мени бочне траке за навигацију у 8 нивоа
  6. Отпремач више датотека + Повлачење и испуштање отпремача датотека
  7. Образац Кс-Едитабле
  8. Моррис Цхарт, Гоогле Цхарт, Флот Цхарт, амЦхарт, Фловс Цхарт и многе друге врсте графикона
  9. А листа се може наставити на више од 200 карактеристика

Проблем је у томе што сваки од ових нових додатака додаје додатне ЦСС, ЈаваСцрипт или јКуери библиотеке и ХТМЛ. Производ смо изградили на обичном ХТМЛ-у, без оквира или модуларних трикова, тако да би сви ЦСС / ЈаваСцрипт били у једној датотеци.

Немојте ме погрешно схватити, не кажем да карактеристике нису биле добре. Ово су сјајни додаци које су развили сјајни људи. Али то није било нешто што смо желели да имамо на нашој једноставној контролној табли.

Зато смо одлучили да производ остане што лакши (сећате се имена?). Лака контролна табла за покретање система . И одлучили смо да применимо само функције које су решавале језгро 95%.

2. Како је створен дизајн

Након што смо направили план за елементе које би производ имао, морали смо смислити дизајн који би био изванредан. Кориснички оријентисан дизајн због којег би људи пожелели да имају ову контролну таблу у свом систему управљања садржајем. Већ смо имали чувени Боотстрап Гет Схит Доне Кит. Веб програмери су га волели и преузет је више од 30.000 пута. Тако смо одлучили да то користимо као основни дизајн за основне елементе као што су дугмад, навигацијске траке, улази итд.

Схватили смо да нам треба и више од тога да бисмо утицали и натерали људе да силно желе наш производ. Нисмо желели да будемо „још једна контролна табла заснована на Боотстрапу“. Где идете када желите сјајне дизајнерске ресурсе?

Ако претражите „контролна табла“ на Дрибббле-у, наћи ћете пуно невероватно лепих контролних табли и админ панела. Заправо, за оне који не знају, Дрибббле је попут визуелног кокаина. Погледајте неке од ових примера које су направили Цосмин Цапитану и Мике из ЦреативеМинтс:

Видевши све ове лепе примере схватили смо да ћемо, ако изградимо тако нешто, сигурно издвојити се из гомиле. Такође, чак и ако контролне табле или графикони изгледају врло добро, биће нам веома тешко или немогуће да кодирамо у ХТМЛ, ЦСС и ЈаваСцрипт. Или решавају врло специфичан проблем, попут најновије контролне табле са мерењима тела.

Било је немогуће пре две године, јер наш ниво знања и искуства са ХТМЛ / ЦСС-ом није био тако висок. Сигуран сам да бисмо, ако бисмо желели да их применимо данас, имали добре шансе да створимо нешто врло слично. Такође, технологија и капацитети прегледача ће нам више помоћи.

Желели смо да изградимо нешто што могу да користе многи људи из различитих пословних подручја. Било је и неколико једноставних и лепих контролних табли, али нисмо желели да их користимо као инспирацију јер смо желели нешто другачије.

Не могу тачно да објасним шта смо желели, али ни у једном примеру се нисмо осећали пријатно. Тако смо наставили да истражујемо све док нисмо пронашли нешто што нам се заиста свидело:

Није био савршен нити толико изванредан колико смо желели. Али сматрали смо да је то прави избор и то је врло добар пример на основу којег можемо да изградимо своју контролну таблу. Чак је и Пабло Пицассо рекао да велики дизајнери краду и да је Аппле поштовао његову реч:

То нисмо могли. Контролна табла Херокуа била је довољно добра да нам је дала ту искру. Зато смо одлучили да га користимо само за инспирацију, а не за коначни резултат. Ево прве итерације:

То је прилично добар почетак. Да бисмо имали бољи увид у то како ће изгледати, само морамо попунити право подручје неким картама са графиконима:

Боје карата нису изгледале тако добро. Били су пресветли како би изгледала лева бочна трака. Тако смо почели да тестирамо различите комбинације боја за графиконе и бочну траку.

У овом тренутку смо схватили да не морамо задржати само 1 боју за позадину бочне траке. И требало би да допустимо нашим корисницима да одаберу коју боју желе. Знали смо да Аппле има неколико лепих градијената за њихову апликацију Фитнесс, па смо одлучили да те градијенте користимо као основу за наше будуће градијенте.

Одувек смо мислили да ћемо, ако гледамо шта најбоље компаније на свету раде у погледу дизајна и УКС-а, поставити врло високе стандарде за наше интерфејсе. На овај начин, све више веб програмера имаће бесплатан приступ висококвалитетним производима.

Док смо радили све ове различите комбинације боја, градијената, карата и графикона, видели смо да су момци из Металаба, који су направили интерфејс за Слацк, написали чланак: Слацков тајни умак од 2,8 милијарди долара. Ово је на крају постало инспирација за следеће кораке. Свеукупна идеја чланка била је да је Слацков тајни сос створен комбинацијом сјајног и разиграног интерфејса са малим интеракцијама, што чини производ лакшим за употребу.

„Изгледа другачије, осећа се другачије и звучи другачије.“

Желели смо да додамо нешто што ниједна од осталих контролних табли нијеимао. Одувек сам волео како градијент са неком провидношћу може изгледати преко слике. И почео сам да се играм различитим сликама и непрозирношћу градијента. Иначе, чини се да је Дуотоне Градиент Имаге који смо користили 2015. године (нисмо ни знали да има име) један од трендова у веб дизајну за 2017. Ово је прилично кул, зар не? ?

Нисам у потпуности задовољан ...

Ово је поглед због којег смо се осећали срећно, било је савршено за нас?. Такође смо додали мале интеракције попут уводне анимације падајућег менија или шоу ефекта обавештења:

Додавањем слике са нагибима и малим анимацијама учинили смо да се осећамо као овај момак:

3. Изграђен на врху отвореног кода и зашто бисте требали стајати на раменима дивова

Као што смо рекли на почетку, нисмо желели да поново пронађемо точак. Нити смо имали новца да уговоримо стручњаке способне за изградњу елемената потребних за контролну таблу. Одлучили смо да је најбоља опција за нас да користимо оно што су други људи креирали и делили бесплатно или отворено .

Недавно смо открили да је оно што смо заправо урадили стајало на плећима дивова. То значи да смо користили што смо више могли од алата који су већ моћни и добро се одржавају у великим заједницама. Да бисте сазнали више о томе и зашто би требало да користите ову технику када желите да направите нешто од нуле, прочитајте овај сјајни чланак који је написао Куинци Ларсон: Како стати на рамена дивова.

Погледајмо шта је заправо испод хаубе.

  • Оквир: Боотстрап - Боотстрап је најпопуларнији ХТМЛ, ЦСС и ЈаваСцрипт оквир за развој одзивних, првих мобилних пројеката на вебу.
  • Дизајн слоја: Набавите комплет за срање - бесплатни комплет корисничког интерфејса за Боотстрап 3. Ово је најбоље полазиште за било који мрежни пројекат који градите. Постао је заштитни знак за интернетску заједницу чистог и лепог интерфејса.
  • Фонт: Робото - Гоогле фонт који има двоструку природу. Има механички скелет и облици су углавном геометријски.
  • Мале иконе: Фонт Авесоме - Фонт Авесоме вам даје скалабилне векторске иконе које се могу прилагодити помоћу ЦСС-а.
  • Велике иконе: Строке 7 Ицонс - Ово је комплетан сет од 202 иконе танког потеза инспирисаних иОС 7.
  • Графикони: Цхартист.јс - Цхартист.јс је производ заједнице која је била разочарана способностима које пружају друге библиотеке графикона.
  • Обавештења: Боотстрап Нотифи - Овај додатак вам помаже да стандардна упозорења за покретање претворите у „режање“ попут обавештења.
  • Мапе: Гоогле Мапс - Додатак за преглед мапа.
  • Фотографије: Унспласх - Бесплатне (радите шта год желите) фотографије високе резолуције.
„Не постоји нешто као нешто узалуд. Све, укључујући и ваш лични успех, има цену коју морате платити “- Наполеон Хилл

Пошто смо много користили од заједнице, било би поштено вратити заједници. Тако смо одлучили пре неколико недеља да га објавимо под МИТ лиценцом. На овај начин, више програмера може да допринесе и користи га без икаквих законских ограничења, за личне и комерцијалне пројекте.

4. Лансирање, успон и сјај

Истраживање око 50-60 дана (наоштравање секире) дало нам је могућност да развијемо контролну таблу за само 15 дана (сецкање дрвета). ?

Шта радите након покретања пројекта? Морате да видите какве су повратне информације о томе да ли би људи желели да их користе и да ли им једноставна контролна табла решава проблем. Ако не желе да га користе, онда немате посао. Предали смо га различитим заједницама и било је врло добро. На пример, има:

  • 170 гласова за Хацкер Невс, врхунац на позицији 9 и преко 88.000 прегледа за ту недељу
  • 247 гласова за / р / вебдев субреддит
  • 80 гласова за подредит / р / веб_десигн (блокиран на 80 јер је добио ознаку „нежељена пошта“, имали смо неколико искачућих прозора… које смо касније уклонили?)

Заједница је потврдила идеју. Такође смо добили пуно повратних информација, да бисмо додали САСС датотеке ради лакшег прилагођавања или их објавили на ГитХуб-у.

Тада смо видели да је било пуно почетника који су само желели да науче како да користе ову контролну таблу. Било је тако лепо да су људи који нису комуницирали с нечим таквим желели да науче како да раде с тим.

Провели смо око 3 недеље у развоју серије видео водича о томе како да реплицирамо ВордПресс контролну таблу помоћу нашег производа. Одлучили смо се да користимо ВордПресс контролну таблу јер је то врло популарна контролна табла. И желели смо да омогућимо људима да схвате да могу да изграде било шта користећи наш производ.

Водичи су врло добро прихваћени и од данас имају преко 78 000 прегледа. Ево првог видеа о томе како створити одзивни администраторски образац помоћу Лигхт Боотстрап Дасхбоард 1/3.

5. Како финансирамо подршку и захтеве веб програмера

Лако је направити производ, одржати га на животу тешко.

Постоји пуно сјајних додатака / шаблона који умиру јер њихови творци немају довољно новца или не остварују довољно прихода да би наставили развој или решили проблеме.

Нисмо желели исти случај за наш производ. Најбоља опција за одржавање производа на животу била је стварање ПРО верзије која може да генерише довољно прихода као подршку континуираном развоју.

Користили смо повратне информације веб програмера и одлучили смо да креирамо Премиум верзију са више елемената и додатака. Желели смо да помогнемо и неким момцима који су желели одређене карактеристике и били су у категорији 5%. Бирање правих додатака који могу да помогну колико год можемо из категорије 5% било нам је веома тешко.

Поново смо започели истраживање на премиум контролној табли. Додали смо додатке попут Фулл Цалендар, ДатаТаблес.нет, Свеет Алерт, Боотстрап Визард и неке додатне странице попут странице за пријаву, страницу за регистрацију, страницу за закључавање.

Ево прегледа уживо верзије ПРО. Видећете да смо задржали исту структуру и желели да је учинимо лаганом, без превише опција и карактеристика.

Приходи од верзије ПРО учинили су нас не само да подржавамо производ, већ и да стварамо нове типове датотека попут верзије ПСД / Скетцх или верзије Ангулар 2. Обе се деле бесплатно.

6. Будући развојни планови

Ево неколико статистика о контролној табли:

Врло је лако прилагодити га вашој марки. Коришћен је у унутрашњим алатима попут Станфордовог каталога Департмана за хитну медицину:

Имамо много захтева од веб програмера који желе да надзорна табла буде изграђена на различитим оквирима попут Ангулар 2, Ангулар ЦЛИ, Реацт, Метеор, ВуеЈС или као Раилс Гем. Стварање свих ових верзија и њихова бесплатна подршка према МИТ лиценци ће функционисати само ако за сваку имамо ПРО верзије. Почели смо са Ангулар 2 и видели смо много људи који га користе и добили смо много повратних информација о томе како га побољшати. Дакле, ако желите да се укључите у друге оквире или ако имате било какве идеје о томе како побољшати ове производе, било би нам драго да разговарамо више.

Било нам је потребно пуно храбрости да покажемо своје изворе и процес који смо имали иза изградње Лигхт Боотстрап Дасхбоард-а. Надам се да ћете из овога нешто научити, а ако имате било какве повратне информације или сугестије, било би ми драго да разговарамо с вама у коментарима.

Корисни линкови:

  • Преузмите ХТМЛ верзију са ввв.цреативе-тим.цом
  • Преузмите верзију Ангулар са ввв.цреативе-тим.цом
  • Преузмите верзију ПСД / Скетцх са ввв.пикелсвибе.цом
  • Поиграјте се с тим у прегледу уживо
  • Дајте допринос и пријавите проблеме на ГитХуб спремишту
  • Погледајте наш блог: //блог.цреативе-тим.цом/

Пронађите ме на:

  • Е-адреса: алек@цреативе-тим.цом
  • Фацебоок: //ввв.фацебоок.цом/акелут
  • Твиттер: //твиттер.цом/акелут