Вы читаете второй пост цикла по мастхэв-знаниям продуктового дизайнера/проектировщика.
Сегодня речь пойдёт об основе основ: о фреймворках, которые используются в разработке программных продуктов. Кроме того, я приведу несколько примеров того, как знание особенностей технологий помогает при создании дизайна продукта.
Что за фреймворки?
Это такие "колоссы", на плечах которых, фактически, покоится вся IT-индустрия. Это готовые программные решения, которые упрощают и ускоряют разработку ваших продуктов программистами.
Дело в том, что в наше время мало кто пишет весь код с нуля. Чаще всего берутся уже кем-то написанные решения: они могут быть коммерческими или распространяться по свободной лицензии. Но каждый раз, когда программисты берут вашу документацию и начинают планировать разработку, они первым делом решают, на каких технологиях будет реализован продукт. К таким технологиям, в частности, и относятся фреймворки.
Давайте поподробнее остановимся на этой всей классификации.
Фреймворки бывают совершенно разные: от фронтенда (вёрстки и скриптов в ваших браузерах) до машинного обучения и дополненной реальности. Каждый фреймворк имеет свои особенности. Например, какой-то из фронтенд-фреймворков заточен под Material Design, а другой – под Single Page Application. Фреймворки есть практически для каждого языка и направления, бессмысленно даже пытаться перечислить все. Я упомяну лишь несколько, самых популярных.
Фреймворки
Ладно, с вводной частью закончили, пора перейти к сути статьи.
Frontend
Задача фронтенд-фреймворков – упростить вёрстку и разработку на JS.
JavaScript – язык программирования, который используется в браузерах для динамического управления контентом сайтов. 99,99% сайтов активно используют JS.
Фронтенд-фреймворки содержат, как правило, готовые компоненты (кнопки, списки, типографику и тп) с возможностью их кастомизации. Кроме того, они предоставляют удобный инструментарий для композиционной разметки: например, отступы и сетку.
Такие фреймворки идеальны для того, чтобы быстро собрать работающий прототип сайта. Однако последние годы всё чаще на основе фронтенд-фреймворков создаются полноценные и громадные интернет-ресурсы.
Из популярных можно назвать Bootstrap, Foundation, Materialize.
JavaScript
Кроме того, есть отдельное направление фреймворков для фронтенда – это JS-фреймворки. Их тоже частенько называют " frontend ", но я, всё же, предпочитаю разделять эти две категории.
Упомянутые ранее фронтенд-фреймворки более заточены на быструю вёрстку, имеют шаблоны разметки и композиции, тогда как JavaScript-фреймворки призваны ускорить JS-программирование. Они включают в себя всякие крутые штуки типа роутинга (системы переходов и перенаправлений по экранам), шаблонизаторов (для типовых элементов с разным контентом, вроде списка новостей), биндинга (мгновенного "подтягивания" изменений в интерфейс) и тп.
Очень часто на базе JS-фреймворков делают фреймворки для фронтенда: берут программную логику и добавляют к нему набор элементов, типографики, композиционную сетку и так далее.
Из популярных можно назвать AngularJS, ReactJS и Vue.js.
Mobile
А есть ещё мобильные фреймворки, созданные для написания кроссплатформенных мобильных приложений.
Кроссплатформенное, или "гибридное" мобильное приложение пишется один раз, а затем собирается (компилируется) под разные платформы. Это ускоряет разработку, но имеет свои недостатки.
Большинство фреймворков для создания гибридных мобильных приложений совмещают в себе функции упомянутых выше типов: они содержат в себе полноценные дизайн-системы с компонентами, правилами их поведения и композиции, а также включают готовые решения для ускорения программирования.
Более того, существуют фреймворки, которые позволяют фактически "оборачивать" веб-сайт в мобильное приложение – по факту, весь интерфейс отображается во внутреннем браузере, но без привычных элементов, вроде строки поиска или меню с закладками.
Из популярных можно отметить Cordova, Ionic, React Native, Flutter, Xamarin, Kotlin/Native.
Backend
Ну и напоследок вкратце коснёмся серверных фреймворков.
Как следует из названия, они используются на сервере и умеют, например, общаться с БД и легко формировать API. Часть из них предоставляют и технологии для внешней части, фронтенда (но он, как правило, получается крайне кривой либо совсем непритязательный).
Серверные фреймворки не так сильно влияют на внешний вид продуктов и пользовательский опыт, но иногда могут оказаться крайне полезными для дизайнера. Например, может оказаться полезно знать, нужно или нет делать дизайн админки – или можно обойтись готовым решением и спроектировать лишь функциональность и навигацию.
Популярные решения: Django (Python), Spring MVC (Java), Play Framework (Java и Scala), Laravel (PHP), Zend (PHP).
Примеры
Давайте приведу пару простых примеров, хорошо иллюстрирующих зависимость дизайна от выбранного командой разработки фреймворка – а затем уже расскажу о некоторых видах таких фреймворков.
Пример первый, меню в мобильном приложении
Вот вы делаете небольшое мобильное приложение. Вам нужно добавить выезжающее боковое меню. Обычное, казалось бы, дело. Однако вы не знаете, что в используемом вашей командой фреймворке меню может выдвигаться только смещая контент-область, а не поверх содержимого. Это готовое решение, которое можно брать и использовать "как есть", доработав только внешний вид. А вы, как назло, не угадали – и сделали меню, которое "накладывается" на экран сверху. В итоге программистам пришлось разрабатывать его с нуля, а бизнес потратил 30 лишних человеко-часов, реализуя этот непринципиальный, в общем-то, момент.
Пример второй, сетка
Или ещё пример. Представьте, что вы делаете дизайн сайта. Все исследования и проектирование позади, и вам осталось только собрать визуальную составляющую.Вы начинаете с создания сетки: делите контент-область на 12 колонок, определяете композиционные отступы и так далее. Однако вы не знаете, что фреймворк, с которым предпочитает работать фронтендер, уже содержит в себе готовую сетку и даже правила её адаптивности для небольших экранов. Над этой сеткой уже поработали много хороших дизайнеров, она выверена до пикселя и даёт даже больше свободы, чем ваша собственная.Однако разработчик будет вынужден от неё отказаться, так как все элементы сайта расположены по вашей сетке. Которую ему теперь придётся программировать отдельно.
Итог
Фреймворков – тьма, и у каждого своя заточка и особенности. Выясните, с какими фреймворками работает ваша команда, и узнайте об их ограничениях. Сильно поможет при интерфейсном и функциональном проектировании.
Да простят меня опытные разработчики, если они вдруг прочитают эту статью, за некоторое намеренное упрощение.
Остальные статьи цикла
Если вы не нашли в цикле чего-то, что ожидали или хотели бы там увидеть – обязательно пишите в комментариях. Буду дополнять.
--
Все свои посты я аккумулирую в небольшом телеграм-канале, подписывайтесь.
