От автора: для 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, я создал набор инструментов со всеми молекулами, необходимыми для создания всех визуальных элементов в проекте. См. ниже:
Затем, на основе молекул из набора я спроектировал конечный организм:
Как мы разработали фреймворк?
После создания хорошего дизайна с помощью детализированного набора инструментов и компонентов нам нужно было закодить все это похожим методов, чтобы все можно было повторно использовать.
Мы выбрали CSS методологию БЭМ. По БЭМ создаются отдельные CSS элементы, которые можно изменять с помощью общих переменных. В то же время элементы настолько слабо связаны, что их можно повторно использовать без оглядки на другие компоненты.
Более подробно ознакомиться с методологией можете на официальном сайте. Обобщение для других UI/UX дизайнеров — БЭМ для CSS, как Symbols для Sketch.
Как мы применили MarsMan к своим проектам?
Первый проект, где мы задействовали marsMan, был TrustRight. TrustRight – компания, помогающая людям пробиться сквозь путаницу и волокиту в вопросах задолженностей по студенческим кредитам, вызванную бесчисленными программами федерального правительства США.
В этом проекте нам нужно было трансформировать десктопное приложение в веб-приложение. Так как набор возможностей был велик, мы оба согласились, что наш шаблон – отличный способ не тратить большие деньги на платформу, делающую упор на визуальную составляющую. То есть можно инвестировать в функционал.
Мы адаптировали MarsMan под их корпоративный стиль и разработали дополнительные элементы, которых не было по умолчанию в MarsMan. Результат получился отличный.
Пример использования MarsMan в реальном проекте:
Заключение
После презентации MarsMan нашим клиентам нам часто стали задавать следующие вопросы: можно ли просто использовать MarsMan для дизайна и не покупать уникальные дизайны?
Боюсь, на этот вопрос нет правильного ответа. В некоторых проектах можно. Это сэкономит средства, которые можно инвестировать в другие области (продажи, маркетинг, другие возможности или наем персонала). Другие же проекты из-за своей уникальности потребуют кастомизированный дизайн.
Если все еще не можете решить, вам помогут следующие соображения. Когда нужно использовать MarsMan в своем проекте:
сильно ограниченный бюджет или время (или оба варианта!);
вы лучше инвестировали бы в дополнительный функционал, а не во внешний вид;
вы хотите, чтобы сайт следовал всем лучшим практикам. В конце концов, MarsMan вдохновлен UX от AirBnB.
Если коротко: MarsMan обеспечивает хороший, но общий дизайн. Это уменьшит время на ознакомление с вашим сайтом, так как пользователи уже знакомы с другими популярными приложениями и сайтами. Когда следует использовать дизайн на заказ:
Вам важен UX на сайте. Ни один фреймворк не сделает такой UX, как дизайнер.
Вы хотите внести что-то инновационное в UX и ломаете концепции.
Ваш проект настолько особенный, что ни в одном фреймворке нет нужных вам элементов.
Если коротко: если вы хотите внести что-то действительно новое и создать самый современный концепт, страницы или новые формы взаимодействия, вам нужен по-настоящему уникальный дизайн, как примеры на MarsBased! Мы любим трудности. Для нашей команды нет ничего невозможного.
Надеюсь, я помог вам решить, использовать ли дизайн на заказ или нет. Надеюсь, вам понравилось изучать наш проект!
Автор: Marina Aísa
Источник: //marsbased.com/
Редакция: Команда webformyself.
