Як ми створили свій frontend фреймворк MarsMan (і навіщо)

32

Від автора: для MarsBased 2016 став роком справжніх випробувань. Весь рік ми працювали над 16 різними проектами. Я влаштувався на повний робочий день тільки в червні, але відразу був залучений в більшу частину проектів на етапах дизайну, UX та frontend розробки.

Перемикатися між проектами не завжди просто, особливо коли працюєш з різними клієнтами, у яких різні набори технологій, бібліотек і навіть візуальних керівних принципів.

Зрештою, ми стандартизували візуальні елементи, які використовуємо у всіх наших проектах, і згрупували їх у бібліотеку MarsMan.

Відхід від Bootstrap

Після вдалого завершення більшості проектів на Bootstrap в якості основного frontend фреймворку ми зрозуміли, що на його установку і налаштування витрачається більше часу, ніж на роботу з ним. З допомогою Bootstrap можна з легкістю піднімати проекти (і запускати компанії), але як тільки ваші проекти стануть складніше, ви легко переростете Bootstrap.

Перерахуємо причини, чому ми вирішили, що краще піти від Bootstrap:

Bootstrap підходить розробникам, не дизайнерам. З допомогою Bootstrap легко створювати повноцінні платформи з стандартним дизайном, але якщо потрібен дизайн на замовлення, доведеться витратити багато часу на те, щоб переписати CSS. Даний фреймворк ідеально підходить розробникам з низькими навичками в дизайні і тим, хто не хоче витрачати час на створення ексклюзивних макетів.

У Bootstrap занадто багато шаблонів. Проблема безлічі фреймворків полягає в тому, що ми використовуємо лише малу частину наданих опцій і функцій. Ця проблема також стосується невеликих статичних сайтів, де краще написати код з нуля, ніж сидіти видаляти і підлаштовувати код під себе.

Bootstrap дуже повільно розвивається. Ще одна проблема консолідованих технологій – кожна зміна має бути схвалено і перевірено. Тому фреймворк не встигає за останніми тенденціями.

Bootstrap використовує px замість em. На сайті MarsBased ми використовуємо em замість px, тому що розмір шрифту елемента в цих одиницях виміру пропорційно прив’язується до розміру шрифта його батька. Це дозволяє застосовувати друкарські вимірювання для інших цілей, як наприклад, відступи перед і після заголовка або параграфа, магдіп’и на логотипі і т. д. В Bootstrap цього немає, тому з проекту в проект доводиться переписувати безліч одиниць вимірювання.

Bootstrap не дотримується методології БЕМ. Ми застосували БЕМ тільки пару місяців тому. Bootstrap не дотримується даної методології, із-за чого ми отримали CSS код з різними підходами та способами іменування в одному проекті. Пізніше ми окремо поговоримо про БЕМ.

Всі перераховані вище причини навели нас на думку, що краще ми створимо свій Bootstrap». Наш фреймворк буде моторним, продуктивним, а frontend розробники стануть трохи щасливішими.

Ні в якому разі не кажу, що Bootstrap поганий інструмент. Це чудовий інструмент, але нам він більше не підходить. «Не подобається щось- поміняйте. Не можете змінити – змініть своє ставлення до предмета.» — Мері Энгельбрайт

Ми могли змінити фреймворк, так чому б не зробити це?

Що таке MarsMan?

MarsMan – це внутрішній проект, який ми почали у вересні 2016. У проект входить frontend фреймворк на основі шаблонів і всі візуальні елементи, які ми використовували в наших веб-проектах. Він не покриває 100% можливого функціоналу та/або екранів, під які можуть бути спрямовані проекти, але його можна використати в більшості випадків: форми, що випадають списки, торговельні майданчики, списки, пошукові бокси, фільтри, кошики магазинів і ще дуже довгий список.

Ми охрестили його «MarsMan», тому що ми створюємо статичні сайти на Middleman, генераторі статичних сайтів. Девід Боуї оцінив би назву.

Мета MarsMan – запропонувати структурований, всебічний і професійний дизайн клієнтам, які краще інвестують у функції, а не зовнішній вигляд програми. Ідеально підходить під проекти, де не потрібно 100% унікальний дизайн: стартапи на ранній стадії розвитку, з мінімальним функціоналом, експериментальні проекти, внутрішні програми і т. д.

Як ми спроектували наш фреймворк?

Коли я почав проектувати MarsMan, переді мною постало питання, яка парадигма дизайну краще підійде під цей проект. Такого великого проекту потрібна була дуже гнучка методологія, яка забезпечила б легкість в кастомізації для наших майбутніх клієнтів: редагування шрифтів, кольорів і окремих елементів під брендинг і візуальний стиль клієнта.

Було розглянуто декілька варіантів, найкращим виявився Atomic Design.

Atomic Design – процес створення дизайну від дизайнера Brad Frost, при якому графічні інтерфейси і їх елементи розбиваються на атоми, молекули та інші структури. Об’єднуючи всі ці структури, можна з легкістю створювати відповідні візуальні елементи під будь-який додаток або сайт.

Даний метод не тільки організовує дизайн, але і спрощує розробникам написання коду при розширенні проекту. Все дуже деталізовано, тому від дизайнерів потрібно зовсім небагато інформації. Це зменшує тривалість розмов між командами дизайнерів і розробників, що підвищує продуктивність компанії. Atomic Design реально допоміг мені поліпшити робочий процес решти команди MarsMan.

Розберемося детальніше: щоб реалізувати Atomic Design, я створив набір інструментів з усіма молекулами, необхідними для створення всіх візуальних елементів у проекті. См. нижче:

Как мы создали свой frontend фреймворк MarsMan (и зачем)

Потім, на основі молекул з набору я спроектував кінцевий організм:

Как мы создали свой frontend фреймворк MarsMan (и зачем)

Як ми розробили фреймворк?

Після створення гарного дизайну за допомогою розширеного набору інструментів і компонентів нам потрібно було закодить все це схожим методів, щоб все можна було використовувати повторно.

Ми вибрали CSS методологію БЕМ. За БЕМ створюються окремі елементи CSS, які можна змінювати за допомогою загальних змінних. У той же час елементи настільки слабо пов’язані, що їх можна повторно використовувати без оглядки на інші компоненти.

Більш докладно ознайомитися з методологією можете на офіційному сайті. Узагальнення для інших UI/UX дизайнерів — БЕМ для CSS, як Symbols для Sketch.

Як ми застосували MarsMan до своїх проектів?

Перший проект, де ми задіяли marsMan, був TrustRight. TrustRight – компанія, що допомагає людям пробитися крізь плутанину і тяганину в питаннях заборгованостей за студентськими кредитами, викликану незліченними програмами федерального уряду США.

У цьому проекті нам потрібно було трансформувати десктопное додаток до веб-застосунку. Так як набір можливостей був великий, ми обидва погодилися, що наш шаблон – відмінний спосіб не витрачати великі гроші на платформу, що робить упор на візуальну складову. Тобто можна інвестувати в функціонал.

Ми адаптували MarsMan під їх корпоративний стиль і розробили додаткові елементи, яких не було за замовчуванням в MarsMan. Результат вийшов відмінний.

Приклад використання MarsMan в реальному проекті:

Как мы создали свой frontend фреймворк MarsMan (и зачем)

Висновок

Після презентації MarsMan нашим клієнтам нам часто стали задавати такі запитання: чи можна просто використовувати MarsMan для дизайну та не купувати унікальні дизайни?

Боюся, на це питання немає правильної відповіді. У деяких проектах. Це зекономить кошти, які можна інвестувати в інші області (продажі, маркетинг, інші можливості або наймання персоналу). Інші ж проекти з-за своєї унікальності зажадають кастомизированный дизайн.

Якщо все ще не можете вирішити, вам допоможуть наступні міркування. Коли потрібно використовувати MarsMan у своєму проекті:

сильно обмежений бюджет або час (або обидва варіанти!);

ви краще інвестували б у додатковий функціонал, а не у зовнішній вигляд;

ви хочете, щоб сайт слідував всім кращим практикам. Зрештою, MarsMan натхненний UX від AirBnB.

Якщо коротко: MarsMan забезпечує хороший, але загальний дизайн. Це зменшить час на ознайомлення з вашим сайтом, так як користувачі вже знайомі з іншими популярними програмами та сайтами. Коли слід використовувати дизайн на замовлення:

Вам важливий UX на сайті. Жоден фреймворк не зробить такої UX, як дизайнер.

Ви хочете внести щось інноваційне у UX і ламаєте концепції.

Ваш проект настільки особливий, що ні в одному фреймворку немає потрібних вам елементів.

Якщо коротко: якщо ви хочете внести щось дійсно нове і створити самий сучасний концепт, сторінки або нові форми взаємодії, вам потрібен по-справжньому унікальний дизайн, як приклади на MarsBased! Ми любимо труднощі. Для нашої команди немає нічого неможливого.

Как мы создали свой frontend фреймворк MarsMan (и зачем)

Сподіваюся, я допоміг вам вирішити, чи використовувати дизайн на замовлення чи ні. Сподіваюся, вам сподобалося вивчати наш проект!