Анатомията на таблото за управление Bootstrap, което печели 1000 долара всеки месец

Ние от Creative Tim винаги сме искали да предоставим страхотни инструменти на всички уеб разработчици, които използват нашите продукти. Ако искате да прочетете повече за това как изградихме нашия бизнес и какво е нашето задвижване, можете да проверите тази статия: Преобразуване на страничен проект в бизнес за $ 17 000 на месец.

Искаме да виждаме по-добри уебсайтове и уеб приложения в интернет. Затова решихме да споделим някои от „тайните съставки“, които формират основата на едно от най-популярните ни табла за управление: Light Bootstrap Dashboard. Разбира се, те вече няма да са тайна, защото ще ги споделим с вас. ?

В този казус ще споделя как получихме идеята да създадем табло, откъде получихме вдъхновение, как внедрихме всичко, как се използва във вътрешните инструменти на Станфорд и как финансирахме развитието и подкрепата за него. Ето преглед на статията:

  1. Основната структура и основна функционалност
  2. Как е създаден дизайнът
  3. Построен върху отворен код и защо трябва да застанете на раменете на гиганти
  4. Стартиране, издигане и блясък
  5. Как финансираме подкрепата и решаваме исканията на разработчиците
  6. Бъдещи планове за развитие

Ще се опитам да дам колкото се може повече информация, с надеждата този урок да не е такъв:

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

Трябва да помислите за процеса на създаване на таблото за управление като за тест, който трябва да направите, след като научите много. Разбира се, ще научите много по време на разработването на продукта. Но първо трябва да имате силни познания за това какво е „това“ и как то „се използва“. Преди да напишете първия ред код, трябва да направите проучване, да направите планове, да създадете списъци със задачи и скици и да се опитате да визуализирате какво искате да имате в крайна сметка.

Тъй като не преоткривате колелото, трябва да огледате компаниите, които създават страхотни продукти, за да получат вдъхновение (като Heroku, Slack, Mailchimp, Stripe). Погледнете и вашата конкуренция. Ще получите много информация. И когато започнете, ще бъде по-лесно да разработите продукта, защото сте си направили домашното. Трябва да наточите брадвата си, преди да започнете да режете:

„Ако имах осем часа да отсека дърво, щях да прекарам шест часа, за да изостря брадвата си.“ - Ейбрахам Линкълн

Направихме домашното си и имаме огромен списък с над 100 безплатни табла като примери, от които можем да се вдъхновим. Ето някои от тях:

Имате огромен списък с табла с много цветове, анимации, красиви икони, малки диаграми, големи диаграми, статична или фиксирана странична лента и стотици различни функции. Как да разберете кой е най-добрият вариант за вашата аудитория?

Тъй като не знаехме какво искат хората в таблото, решихме да запишем всички функции, които тези табла съдържат и използваме само най-често срещаните. Разбрахме, че основните функции решават около 95% от случаите, когато имате нужда от табло за управление. Останалите 5% решават много специфични проблеми.

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

  1. Маси
  2. Известия
  3. Списъци със задачи
  4. Карти (за различен тип формуляри и по-лесно визуализиране на информацията)
  5. Графики (диаграма на понички, линейна диаграма, стълбовидна диаграма)
  6. Google Maps

С малки визуални настройки можете да възпроизведете 95% от всяко табло от която и да е компания в света само с помощта на основните елементи. Тогава имате останалите 5%, което винаги е различно в зависимост от компанията и проблемите, които тя решава. Тук можем да намерим:

  1. Системни карти Kanban
  2. Функция плъзгане и пускане
  3. Компоненти на хронологията
  4. Редактор на WYSIWYG
  5. Меню на страничната лента за навигация на 8 нива
  6. Multi File Uploader + Drag & Drop File Uploader
  7. Форма X-Редактируема
  8. Morris Chart, Google Chart, Flot Chart, amChart, Flows Chart и много други видове диаграми
  9. И списъкът може да продължи до повече от 200 функции

Проблемът е, че всеки от тези нови плъгини добавя допълнителни CSS, JavaScript или jQuery библиотеки и HTML. Изградихме продукта върху обикновен HTML, без рамки или модулни трикове, така че всички CSS / JavaScript ще бъдат в един файл.

Не ме разбирайте погрешно, не казвам, че характеристиките не бяха добри. Това са страхотни плъгини, разработени от страхотни хора. Но това не беше нещо, което искахме да имаме в нашето просто табло.

Затова решихме да поддържаме продукта възможно най-лек (помните ли името?). Леко табло за зареждане . И решихме да приложим само функциите, които решават основните 95%.

2. Как е създаден дизайнът

След като направихме плана си за елементите, които продуктът би имал, трябваше да измислим дизайн, който да бъде изключителен. Лесен за употреба дизайн, който би накарал хората да искат да имат това табло в своята система за управление на съдържанието. Вече имахме известния Bootstrap Get Shit Done Kit. Уеб разработчиците го харесаха и той е изтеглен повече от 30 000 пъти. Затова решихме да го използваме като основен дизайн за основни елементи като Бутони, Навбари, Входове и т.н.

Разбрахме, че имаме нужда от повече от това, за да въздействаме и да накараме хората силно да искат нашия продукт. Не искахме да бъдем „друго табло за управление, базирано на Bootstrap“. Къде отивате, когато искате страхотен дизайнерски ресурс?

Ако потърсите „табло за управление“ в Dribbble, ще намерите много невероятно красиви табла и администраторски панели. Всъщност за тези, които не знаят, Dribbble е като визуален кокаин. Проверете някои от тези примери, направени от Cosmin Capitanu и Mike от CreativeMints:

Виждайки всички тези красиви примери ни накара да осъзнаем, че ако изградим нещо подобно, определено ще се откроим от тълпата. Също така, дори ако таблата или диаграмите изглеждат много добре, ще ни бъде много трудно или невъзможно да кодираме в HTML, CSS и JavaScript. Или те решават много специфичен проблем, като най-новото табло с измервания на тялото.

Преди 2 години беше невъзможно, тъй като нивото ни на знания и опит с HTML / CSS не беше толкова високо. Сигурен съм, че ако искаме да ги приложим днес, ще имаме добри шансове да създадем нещо много подобно. Също така технологията и капацитетът на браузъра ще ни помогнат повече.

Искахме да изградим нещо, което може да се използва от много хора от различни сфери на бизнеса. Имаше и няколко прости и красиви табла, но не искахме да ги използваме като вдъхновение, защото искахме нещо различно.

Не мога да обясня какво точно искахме, но не се чувствахме комфортно с нито един от примерите. Така че ние продължихме да правим нашето проучване, докато намерихме нещо, което наистина ни хареса:

Не беше перфектен, нито толкова изключителен, колкото ни се искаше. Но ние почувствахме, че това е правилният избор и е много добър пример, от който можем да изградим нашето табло за управление. Дори Пабло Пикасо каза, че велики дизайнери крадат и Apple уважава думата му:

Не можехме да направим това. Таблото от Heroku беше достатъчно добро, че ни даде тази искра. Затова решихме да го използваме само за вдъхновение, а не за краен резултат. Ето първата итерация:

Това е доста добро начало. За да имаме по-добра представа за това как ще изглежда, просто трябва да попълним правилната област с няколко карти с диаграми:

Цветовете на картите не изглеждаха толкова добре. Бяха прекалено ярки за това как изглежда лявата странична лента. Затова започнахме да тестваме различни комбинации от цветове за диаграмите и страничната лента.

На този етап осъзнахме, че не трябва да запазваме само 1 цвят за фона на страничната лента. И ние трябва да позволим на нашите потребители да изберат кой цвят искат. Знаехме, че Apple има някои красиви градиенти за тяхното приложение за фитнес, затова решихме да ги използваме като основа за бъдещите ни градиенти.

Винаги сме мислили, че ако наблюдаваме какво правят най-добрите компании в света по отношение на дизайна и UX, ще зададем много високи стандарти за нашите интерфейси. По този начин все повече уеб разработчици ще имат безплатен достъп до висококачествени продукти.

Докато правехме всички тези различни комбинации от цветове, градиенти, карти и диаграми, видяхме, че момчетата от Metalab, които създадоха интерфейса за Slack, написаха статия: Тайният сос на Slack 2.8 милиарда долара. Това се оказа вдъхновение за следващите стъпки. Общата идея на статията беше, че тайният сос на Slack е създаден от комбинацията от страхотен и закачлив интерфейс с малки взаимодействия, което прави продукта по-лесен за ползване.

„Изглежда различно, чувства се различно и звучи различно.“

Искахме да добавим нещо, което никое от другите табла за управление не еимал. Винаги съм обичал как градиент с известна прозрачност може да изглежда върху изображение. И започнах да играя с различни изображения и непрозрачност на градиента. Между другото, Duotone Gradient Image, който използвахме през 2015 г. (дори не знаехме, че има име), изглежда е една от тенденциите в уеб дизайна за 2017 г. Това е доста готино, нали? ?

Не съм напълно удовлетворен ...

Това беше гледката, която ни накара да се чувстваме щастливи, просто беше идеален за нас?. Също така добавихме малки взаимодействия като началната анимация на падащото меню или шоу ефекта на известието:

Добавянето на изображението с градиентите и малките анимации ни накараха да се почувстваме като този човек:

3. Построен върху отворен код и защо трябва да застанете на раменете на гиганти

Както казахме в началото, не искахме да преоткриваме колелото. Нито разполагахме с пари за наемане на експерти, способни да изграждат елементите, необходими за таблото. Решихме, че най-добрият вариант за нас е да използваме това, което други хора са създали и споделили безплатно или с отворен код .

Наскоро открихме, че това, което всъщност направихме, стоеше на раменете на гиганти. Това означава, че използвахме възможно най-много от инструменти, които вече са мощни и добре поддържани от големите общности. За повече информация относно това и защо трябва да използвате тази техника, когато искате да изградите нещо от нулата, прочетете тази страхотна статия, написана от Куинси Ларсън: Как да застанем на раменете на гиганти.

Нека да разгледаме какво всъщност е под капака.

  • Рамка: Bootstrap - Bootstrap е най-популярната HTML, CSS и JavaScript рамка за разработване на отзивчиви, първи мобилни проекти в мрежата.
  • Дизайнерски слой: Вземете Shit Done Kit - Безплатен комплект за потребителски интерфейс Bootstrap 3. Това е най-добрата отправна точка за всеки онлайн проект, който изграждате. Той се превърна в търговска марка за онлайн общността на изчистен и приятен на вид интерфейс.
  • Шрифт: Roboto - шрифт на Google, който има двоен характер. Той има механичен скелет и формите са до голяма степен геометрични.
  • Малки икони: Font Awesome - Font Awesome ви дава мащабируеми векторни икони, които могат да бъдат персонализирани с помощта на CSS.
  • Големи икони: Stroke 7 Icons - Това е пълен набор от 202 икони с тънък щрих, вдъхновени от iOS 7.
  • Графики: Chartist.js - Chartist.js е продукт на общност, която е разочарована от способностите, предоставени от други библиотеки за графики.
  • Известия: Bootstrap Notify - Този плъгин ви помага да превърнете стандартните предупреждения за bootstrap в „ръмжене“ като известия.
  • Карти: Google Maps - Приставка за преглед на карти.
  • Снимки: Unsplash - Безплатни (правете каквото искате) снимки с висока разделителна способност.
„Няма нещо като нещо за нищо. Всичко, включително личният ви успех, има цена, която трябва да се плати ”- Наполеон Хил

Тъй като използвахме много от общността, би било честно да върнем на общността. Затова решихме преди няколко седмици да го пуснем под лиценза на MIT. По този начин повече разработчици могат да допринесат и да го използват без никакви законови ограничения за лични и търговски проекти.

4. Стартиране, издигане и блясък

Извършването на изследването за около 50-60 дни (заточване на брадвата) ни даде възможност да разработим таблото само за 15 дни (нарязване на дървото). ?

Какво правите, след като стартирате проект? Трябва да видите каква е обратната връзка за нея, ако хората биха искали да я използват и дали простото табло за управление, което сте създали, решава проблем за тях. Ако не искат да го използват, тогава нямате бизнес. Изпратихме го на различни общности и се справяше много добре. Например има:

  • 170 гласа „за“ на Hacker News, достигат до позиция 9 и над 88 000 гледания за тази седмица
  • 247 гласа за / r / webdev subreddit
  • 80 гласа „за“ на / r / web_design subreddit (блокиран на 80, защото получи „спам“ таг, имахме няколко изскачащи прозореца за абонамент ... които по-късно премахнахме?)

Общността потвърди идеята. Имаме и много отзиви, за да добавим SASS файловете за по-лесно персонализиране или да ги публикуваме в GitHub.

Тогава видяхме, че имаше много начинаещи, които просто искаха да се научат как да използват това табло. Беше толкова красиво, че хората, които не взаимодействаха с нещо подобно, искаха да се научат как да работят с него.

Прекарахме около 3 седмици в разработването на поредица от видео уроци за това как да репликираме таблото за управление на WordPress с помощта на нашия продукт. Избрахме да използваме таблото за управление на WordPress, защото е много популярно табло за управление. И ние искахме да дадем на хората да разберат, че могат да създадат всичко, използвайки нашия продукт.

Уроците бяха приети много добре и имат над 78 000 гледания към днешна дата. Ето първото видео на тема Как да създадете отзивчив шаблон за администриране с помощта на Light Bootstrap Dashboard 1/3.

5. Как финансираме подкрепата и исканията от уеб разработчиците

Изграждането на продукт лесно, поддържането му жив е трудно.

Има много страхотни приставки / шаблони, които умират, защото създателите им нямат достатъчно пари или не правят достатъчно приходи, за да продължат разработката или да решат проблемите.

Не искахме същия калъф за нашия продукт. Най-добрият вариант да запазите продукта жив е да създадете PRO версия, която може да генерира достатъчно приходи в подкрепа на непрекъснатото развитие.

Използвахме отзивите от уеб разработчици и решихме да създадем Premium версия с повече елементи и приставки. Искахме да помогнем и на някои от момчетата, които искаха специфични функции и бяха в категорията 5%. Изборът на правилните плъгини, които могат да помогнат колкото можем от категорията 5%, беше много труден за нас.

Започнахме отново да правим изследвания на премиум таблото. И добавихме плъгини като пълен календар, DataTables.net, сладък сигнал, съветник за стартиране и някои допълнителни страници като страница за вход, страница за регистрация, страница за заключване.

Ето прегледа на живо на PRO версията. Ще видите, че запазихме същата структура и искахме да я направим лека, без твърде много опции и функции.

Приходите от версията PRO ни накараха не само да поддържаме продукта, но и да създадем нови типове файлове като версията PSD / Sketch или Angular 2. И двете се споделят безплатно.

6. Бъдещи планове за развитие

Ето някои статистически данни за таблото:

Много е лесно да го персонализирате, за да отговаря на вашата марка. Той беше използван във вътрешни инструменти като Каталога на спешната медицина на Станфорд:

Имаме много заявки от уеб разработчици, които искат таблото за управление да бъде изградено върху различни рамки като Angular 2, Angular CLI, React, Meteor, VueJS или като Rails Gem. Създаването на всички тези версии и поддръжката им безплатно под лиценза на MIT ще работи само ако имаме PRO версии за всяка една. Започнахме с Angular 2 и видяхме много хора, които го използват, и получихме много отзиви за това как да го подобрим. Така че, ако искате да се включите за другите рамки или ако имате някакви идеи как да подобрите тези продукти, ще се радваме да поговорим повече.

Отне ни много смелост, за да покажем нашите източници и процеса, който имахме зад изграждането на таблото за управление на Light Bootstrap. Надявам се, че ще научите нещо от това и ако имате някакви отзиви или предложения, ще се радвам да поговорим с вас в коментарите.

Полезни връзки:

  • Изтеглете HTML версията от www.creative-tim.com
  • Изтеглете Angular версия от www.creative-tim.com
  • Изтеглете версията на PSD / Sketch от www.pixelsvibe.com
  • Играйте с него на визуализация на живо
  • Принос и докладване на проблеми в хранилището на GitHub
  • Проверете нашия блог: //blog.creative-tim.com/

Намери ме на:

  • Имейл: [email protected]
  • Facebook: //www.facebook.com/axelut
  • Twitter: //twitter.com/axelut