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

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

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

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

В конце концов, мы стандартизировали визуальные элементы, которые используем во всех наших проектах, и сгруппировали их в библиотеку MarsMan.

Уход от Bootstrap

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

Перечислим причины, почему мы посчитали, что лучше уйти от Bootstrap:

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

В Bootstrap слишком много шаблонов. Проблема множества фреймворков заключается в том, что мы используем лишь малую часть предоставленных опций и функций. Эта проблема также касается небольших статичных сайтов, где лучше написать код с нуля, чем сидеть удалять и подстраивать код под себя.

Bootstrap очень медленно развивается. Еще одна проблема консолидированных технологий – каждое изменение должно быть одобрено и проверено. Поэтому фреймворк не успевает за последними тенденциями.

Bootstrap использует px вместо em. На сайте MarsBased мы используем em вместо px, потому что размер шрифта элемента в этих единицах измерения пропорционально привязывается к размеру шрифта его родителя. Это позволяет применять типографские измерения для других целей, как например, отступы до и после заголовка или параграфа, margin’ы на логотипе и т.д. В 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 (и зачем)

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

Автор: Marina Aísa

Источник: //marsbased.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: