Новый дизайн Рамблера вблизи
Пост в двух словах: Рамблер выкатил сайт-презентацию о своём визуальном стиле. Красивый и бесполезный. Я скачал с него макеты и прокомментировал их.
В своём разборе я буду беспристрастен. Скажу честно, практической цели для дизайнеров я в этом сайте не смог найти, хотя очень старался. Мне совсем не хочется издеваться над коллегами. Я понимаю, как сложен процесс редизайна в большой компании и с большим уважением отношусь к проделанной работе. Цель моего поста — помочь рассмотреть детали и перенять их опыт, либо указать на ошибки, которые я заметил.
Наверное, по замыслу этот сайт должен быть образцово-показательной страницей, демонстрирующей силу дизайна Рамблера и степень их крутости. Первое, что бросается в глаза — что он неадаптивный. Лендингу за 20К простительно быть неадаптивным. Сайту о дизайне в Рамблере — нет.
Слэш/
Неожиданный ход с символом / (слэш) в логотипе понравился, вполне катит за альтернативу Яндекс.Точке. За это респект агентству ONY.
С первого взгляда, цветовая гамма практически идентична стилю behance.net, очень уж похож синий:
Со второго взгляда, если закрыть глаза на этот синий, цветовая палитра проработана неплохо. Присутствуют две схемы — тёмная и светлая:
Не буду придираться, что в чёрной палитре бóльшая часть цветов воспринимается как серая. Серая палитра с синим отливом хорошая.
Непонятно, зачем разделять названия цветов на Light carbone и Pearl grey, если было бы удобнее называть их по номерам: третий серый. Прям представляю, как один дизайнер c идеальным произношением другого спрашивает:
— Вась, а в той форме какой серый? Pearl Grey?
— Не. Aluminium.
На сайте есть возможность скопировать хекс-коды цветов, но непонятно, кто это будет делать. Дизайнеры из других компаний и сочувствующие придут поглазеть на красоту и коды им не нужны. Дизайнеры из Рамблера наверняка берут палитру для работы в других местах. Для этого, например, удобно использовать плагин Sketch Palettes.
Типографика и сетка
Слово сетка на сайте не встречается, а хорошо бы.
Рамблеровцы пишут:
В работе с микро-типографикой мы придерживаемся чётных размерностей в значениях высот строк (line-height) и размеров кеглей.
Любопытно было залезть в их демонстрационные скетч-макеты и первым же делом увидеть там размер заголовка 25 pt. Там же, в файле colors.sketch обнаружил вертикальную сетку 100+20px, с которой съехала вторая колонка. Удивился.
Что в слоях? Какая система названий символов?
В слоях полный Group 181 / Group 46 / Rectangle 182 Copy 2, что как бы намекает, что дизайнеры Рамблера работают в основном в Иллюстраторе и ещё не познали дзен символов:
Иконки
Хорошо, что в Рамблере умеют делать иконки из векторного скелета. В таких иконках можно легко менять толщину линии. Если сделать ей Convert to Outline (зааутлайнить), с толщиной уже не поработаешь.
В скетч-макетах Рамблера можно скачать финальные иконки, которым уже сделали аутлайн. Польза от них довольно мала. Зачем было хвастаться векторными скелетами, непонятно. Все флэт-иконки делаются описанным способом, иного пути нет.
Иконки в Рамблере экспортируют через функцию Slices, что я нахожу чудовищно негибким. Slices— пережиток фотошопного прошлого:
Правильно ставить признак экспорта артборду символа. Это даёт хорошие преимущества:
- слайс-слой не мешается при работе с макетом
- символ помогает структурировать объекты макета по смыслу, делая группу afisha_20 бессмысленной
- символ можно использовать в разных местах проекта и не ставить каждой его копии признак экспорта, потому что достаточно признака в мастере.
- символ можно экспортировать во вложенную папку, например
icons/afisha_20
icons/afisha_80.
Генеративный паттерн
Понимаю, что генеративный дизайн, при котором пользователь влияет на внешний вид элементов страницы — это ужасно модно. Но от паттерна Рамблера на весь большой экран у меня в прямом смысле заболели глаза. Если ты тоже хочешь испытать это, докрути до конца страницы. Сконцентрировать внимание на трёх последних абзацах текста будет крайне сложно.
Если бы палочки были менее опасны, паттерн не так бил по психике, но при этом сохранил свою вау-функцию:
Как стиль применяется на бою?
Новый стиль Рамблера — прекрасный повод впервые за несколько лет зайти на главную и посмотреть, как он применяется.
Информацию надо дозировать
Главная страница Рамблера сегодня — пример ситуации, когда контента столько, что дизайн уже не важен. Семиколонный (што?) подвал играет своей палитрой цвета Carbone. Единственная возможность добраться до подвала — скроллить. Но какова вероятность, что пользователь нажмёт на ссылку Рынки в группе Бизнес и финансы, когда на него только что обрушилось более сотни маленьких картинок, ни на одну из которых он не нажал? Какова его вовлечённость в такую страницу?
Заходишь в Рамблер/Кассу, а там другая палитра:
Заходишь в Рамблер/Знакомства, а там третья:
Рамблер/Старт наиболее близок к новому стилю:
Однако, удивила скруглённая кнопка Установить. На brand.rambler.ru написано, что сервисные контролы имеют маленькое скругление, а медийные — большое. Воспринимаю эту кнопку как сервисный контрол, а выглядит он как медийный. Я не против круглых кнопок, но тогда надо придерживаться одной логики.
Вот, собственно, и весь жир, которым порадовали дизайнеры Рамблера. Сам сайт brand.rambler.ru выглядит очень достойно. Но на поверку он оказался просто дизайн-кейсом, а не гайдлайнами. А счастье было так так возможно. Надеюсь, этот сайт — первый шаг к наведению порядка в дизайне сервисов.
UPD: Позже я наткнулся на публичную библиотеку React-компонентов Рамблера на Гитхабе. От неё толку значительно больше. Там можно найти боевые UI-элементы, которые используются в интерфейсах Рамблера.
Я веду Скетч-дизайнер — телеграм-канал о Скетче и дизайне интерфейсов. В нём я рассказываю о горячих клавишах, плагинах, прототипах, дизайн-системах и UI-анимации. Также я снимаю видеоуроки, делаю обучающие гифки и рассказываю о вдохновляющих дизайнерах.
