Дизайн-система digital-продукта

Этой заметкой я начну серию статей о дизайне онлайн-сервиса для путешественников, над которым работаю уже почти три года.

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

Главная страница в дизайне текущей версии

Модульная сетка

Начну с заметки о ней, любимой. На чём же ещё строить новый дизайн)

Сетка предыдущей версии выглядела вот так:

Модульная сетка предыдущей версии. Десктоп, планшеты и мобильные.

Я работаю на ноутбуке с разрешением 1440 пкс (да, с ним мне удобнее, чем с аймаком невероятной диагонали). Делим 1440 на 12 колонок, получаем 120 пкс, из них отрезаем по 20 пкс с каждой стороны на межколонник и получаем такую сетку. На мобильных от сетки остаются только отступы по краям экрана и центральный межколонник, то есть я свёл двенадцать колонок к двум. В такой сетке мне неуютными казались два отступа по краям экрана — они в два раза уже остальных. Но из-за круглых цифр (80+40) и того факта, что макет своей шириной вписывается в экран, я продолжал жить с этой сеткой. Это не сильно мешало, так как в основном модули страницы либо упирались в края экрана (обложки проектов, заголовочные изображения, шапка и футер), либо занимали центральные шесть-восемь колонок:

Большинство элементов страницы не имеют проблем из-за узких крайних межколонников

С переходом на новую платформу (это отдельный разговор про Angular и React, более интересный разработчикам, нежели дизайнерам) появилась возможность (или необходимость) переписать стили CSS заново. Я, что называется, не преминул воспользоваться этим, чтобы отполировать целиком дизайн-систему, начав с сетки. Новая версия будет выглядеть вот так:

Новая модульная сетка

Видите, крайние отступы теперь равны межколонникам? От этого на душе сильно спокойнее) Плюс я добавил дополнительного воздуха контенту, расширив отступы между колонками. Это будет заметнее при сравнении макетов прошлых и новых, но уже на этапе сетки я чувствую, как это повлияет на ощущение от макета. Воздух, типографика, компоновка — всё это прямым образом зависит от сетки.

Три мобильных разрешения нужны для того, чтобы проверить отображение сложных элементов типа карточек (картинка + затемнение + заголовок + счетчик лайков + аватар + фио автора + дата публикации) на узких разрешениях популярных устройств. Для более простых элементов типа текстовых блоков, конечно, хватит одного мобильного разрешения.

Раньше у нас были стандартные брейкпойнты Бутстрапа, сейчас же я думаю пересмотреть их количество и расставить согласно наиболее популярным устройствам. Для этого посмотрю статистику и посоветуюсь с нашими фронтэндерами, ведь они — единственная аудитория макетов.

Дальше я расскажу про новую главную страницу, вот затравка:

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store