Дизайн-система digital-продукта
Этой заметкой я начну серию статей о дизайне онлайн-сервиса для путешественников, над которым работаю уже почти три года.
Первая версия дизайна рождалась итеративно, мы регулярно возвращались к уже реализованным макетам, чтобы привести всю массу страниц к новому функционалу. Спустя время ситуация другая — мы уже знаем функционал и сценарии на ближайшее будущее, уже есть обкатанный фирменный стиль (типографика, цветовая схема, компоновка), поэтому новый макет из вселенной 2.0 будет имплементирован таким, каким вы увидите его в следущих статьях.
Модульная сетка
Начну с заметки о ней, любимой. На чём же ещё строить новый дизайн)
Сетка предыдущей версии выглядела вот так:
Я работаю на ноутбуке с разрешением 1440 пкс (да, с ним мне удобнее, чем с аймаком невероятной диагонали). Делим 1440 на 12 колонок, получаем 120 пкс, из них отрезаем по 20 пкс с каждой стороны на межколонник и получаем такую сетку. На мобильных от сетки остаются только отступы по краям экрана и центральный межколонник, то есть я свёл двенадцать колонок к двум. В такой сетке мне неуютными казались два отступа по краям экрана — они в два раза уже остальных. Но из-за круглых цифр (80+40) и того факта, что макет своей шириной вписывается в экран, я продолжал жить с этой сеткой. Это не сильно мешало, так как в основном модули страницы либо упирались в края экрана (обложки проектов, заголовочные изображения, шапка и футер), либо занимали центральные шесть-восемь колонок:
С переходом на новую платформу (это отдельный разговор про Angular и React, более интересный разработчикам, нежели дизайнерам) появилась возможность (или необходимость) переписать стили CSS заново. Я, что называется, не преминул воспользоваться этим, чтобы отполировать целиком дизайн-систему, начав с сетки. Новая версия будет выглядеть вот так:
Видите, крайние отступы теперь равны межколонникам? От этого на душе сильно спокойнее) Плюс я добавил дополнительного воздуха контенту, расширив отступы между колонками. Это будет заметнее при сравнении макетов прошлых и новых, но уже на этапе сетки я чувствую, как это повлияет на ощущение от макета. Воздух, типографика, компоновка — всё это прямым образом зависит от сетки.
Три мобильных разрешения нужны для того, чтобы проверить отображение сложных элементов типа карточек (картинка + затемнение + заголовок + счетчик лайков + аватар + фио автора + дата публикации) на узких разрешениях популярных устройств. Для более простых элементов типа текстовых блоков, конечно, хватит одного мобильного разрешения.
Раньше у нас были стандартные брейкпойнты Бутстрапа, сейчас же я думаю пересмотреть их количество и расставить согласно наиболее популярным устройствам. Для этого посмотрю статистику и посоветуюсь с нашими фронтэндерами, ведь они — единственная аудитория макетов.
Дальше я расскажу про новую главную страницу, вот затравка:
