Мы обновили редактор виджетов. Надоело слушать, что у конкурентов лучше

Привет! Я Виктория, продакт из MyReviews. Мы создаем виджеты отзывов с популярных площадок: «Яндекс», 2ГИС, «Авито», «ПроДокторов» и других. Хочу поделиться опытом разработки редактора виджетов на основании клиентских запросов, а их, спойлер, было очень много.

У нас было 4 типа виджетов: плавающий виджет, "Карусель", "Сетка" и виджет "На всю страницу". Настройки были ограничены, и нам часто прилетало от клиентов за это: "Карусель" можно было кастомизировать в CSS, у плавающего виджета менялась только форма и цвет окантовки.

Функциональный редактор, с тонкими настройками для каждого элемента виджета (от фона до имени автора отзыва). И еще, все изменения дизайна должны отображаться в реальном времени.

У нашего сервиса три категории лидов: веб-дизайнеры, предприниматели и менеджеры, отвечающие за репутацию. В CSS несложно наколдовать чудесный дизайн виджета, и у нас даже был суперинформативный гайд об этом, но вряд ли у ИПэшника или менеджера будет время вникать в background-color и border-radius. Короче, клиенты, которых мы потеряли.

Настройки фона

По опыту в поддержке именно фон клиенты хотят изменить в первую очередь. Фон выдает “инородность” виджета, и изменение цвета помогает органичнее вписать виджет в сайт. Мы добавили выбор цвета фона и даже градиенты.

Уже много лет градиенты остаются трендом в веб-дизайне, а в 2024ом году они переродились и стали сложнее, ярче и заметнее. И хотя градиенты эволюционируют, их популярность продолжает расти. Веб-дизайнеры объясняют это самодостаточностью градиентов: страница с градиентом и нескучной типографикой уже смотрится цельно.

Напишите в комментарии, добавить ли возможность настраивать градиенты?

Библиотека шрифтов

“Шрифты огромные без возможности выбора”

Подгрузили библиотеку шрифтов, чтобы компании могли оформить виджет и сохранить айдентику.

Тренды типографики. Для шрифтов с засечками в этом году наступил новый ренессанс. Классические сдержанные шрифты противопоставляются мегапопулярным мультяшной и нестандартной типографике. Бренды, подчеркивающие свою изысканность, элегантность и эксклюзивность, выбирают шрифты с засечками. Особенно востребованы тонкие и ультратонкие шрифты.

Мягкие углы

Мода на скругление углов пришла вместе с трендом на бенто-сетки. Чтобы добавить “воздуха” на сайт, состоящий из блоков, дизайнеры сильно скругляют углы блоков.

Внедрили настройки скругления и окантовки для карточки отзыва, теперь виджет органичнее встает на сайты с такой стилистикой.

Настройки обводки

Тренд на видимые сетки пришел вместе с ностальгией по 70-м. Сетки упрощают навигацию по сайту и ассоциативно связывают сайт с социальными сетями бренда.

Чтобы выделить карточки отзывов в сетку, мы добавили обводку для элементов виджета.

Цвет второстепенных элементов

На видимых сетках ретровозрождение не остановилось. Веб-дизайнеры, уставшие от минимализма, возвращают в моду насыщенные, броские цвета и неочевидные цветовые сочетания.Если вы не готовы превращать сайт в холст, по которому прошелся трехлетний ребенок, то яркие цвета можно вводить точечно. Например, изменить цвет звездочек на скиллбоксно-синий или неоново-золотояблочный.

Настройки бейджа

Помимо кастомизации формы и фона нам было важно разделить настройки бейджа и настройки полотна отзывов, так как мы стремились создать максимально детализированный редактор. Теперь в редакторе можно выбрать разный цвет звездочек, фона, обводки и текста для бейджа и полотна.

Дальше планируем ориентироваться на фидбэк. Пока не добавили супер-мега-популярные тени под элементы виджета. Еще популярность набирает “эффект мутного стекла”, что тоже можно круто интегрировать в виджет. Хочу попробовать “дизайнерские виджеты”: сменить фокус с информативности на эстетику. Думаю, бьюти-студиям и шоурумам зайдет.

Поэтому мы открыты для коллаборации с дизайнерами и готовы воплотить в жизнь самые смелые идеи.

Без лишнего спама делимся новостями сервиса в нашем Telegram-чате и группе в VK. Подписывайтесь!

Затестить редактор виджетов можно здесь.