С чего начали
Главная 5ka.ru — это полка товаров, акции, каталог, X5 Клуб и приложение, и всё подано ровными одинаковыми блоками. Нужно было сохранить структуру сайта, но сделать страницу громкой, как магазин у дома, и не потерять ни одной задачи.
Концепт-редизайн сайта · 2026
Пятёрочка
- Клиент
- Авторский концепт VERSTA
- Тип
- Концепт-редизайн сайта
- Год
- 2026
Инициативный концепт главной «Пятёрочки» на настоящем бренде: знак, цвета, товары, цены и акции с 5ka.ru, фотографии из медиабанка X5. С «Пятёрочкой» и X5 студия не связана.
01 — Знак, цвет, шрифт
Айдентика
Фирменное здесь настоящее: знак и иконки взяты из кода 5ka.ru, цвета — из темы сайта, товары, цены и акции — с его главной страницы, фотографии магазинов — из официального медиабанка X5.
Красный#E52322
Зелёный знака#008F32
Зелёный главы#006B28
Жёлтый цены#FFD700
Чернила#302E33
Зелёный знака на большой плашке не проходит по контрасту с белым текстом (4,2 : 1), поэтому глава X5 Клуба залита тем же зелёным, только темнее: 6,7 : 1.
02 — Что интересного
Полка
На главной 5ka.ru все карточки полки одинаковые. Здесь самая большая скидка получает двойную карточку, остальные стоят в сетке из тонких линий. Товары, фото, цены, скидки и оценки — с главной страницы сайта.
Концепт VERSTA · 2026
Кнопка «В корзину» проходит состояние «Добавляем…» и превращается в счётчик. Больше десяти штук добавить нельзя, а сумма и число товаров сразу меняются в шапке.
03 — Три задачи
Экраны
Глава меняет цвет страницы
Страница перекрашивается под главу, которая сейчас на экране: красная для акций, зелёная для X5 Клуба, тёмная для приложения. Сами акции и их сроки — с главной страницы сайта.
Считает до скидки
Корзина знает настоящее условие сайта — 500 ₽ скидки на первый заказ от 1500 ₽ — и показывает, сколько осталось добрать.
Корзина под большим пальцем
На телефоне внизу закреплена панель с главной, каталогом, корзиной со счётчиком и профилем, а корзина открывается снизу шторкой.
04 — Детали
Как проверяли
Спецификация, а не вкус
Каждый цвет, размер, скругление и тайминг записан в спецификацию с источником: тема 5ka.ru, замеры живого сайта или вывод из них. Сборку проверяет скрипт, который читает стили в браузере: 72 проверки из 72.
Запрет на шаблонные приёмы
Прошлая версия концепта была нарисована: помидоры в SVG вместо товаров, набранное слово вместо знака, чёрные тени, кнопки-таблетки, волны и стена цифр. Каждый пункт стал запретом, и сборку проверяли на трёх ширинах экрана.
Живые состояния
Фильтры «Со скидкой» и по разделам, поиск по полке, каталог из 18 настоящих разделов, адрес доставки с проверкой номера дома. Корзина закрывается по Escape, а при настройке «меньше движения» анимации отключаются.
05 — Честно
Границы концепта
Это инициативный концепт студии VERSTA. Его никто не заказывал, он не согласован с «Пятёрочкой» и X5, и студия никак с ними не связана. В подвале концепта это сказано прямо: «Концепт редизайна. Не является официальным сайтом Пятёрочка».
Откуда данные
5ka.ru закрыт от автоматического чтения проверкой на робота, поэтому тексты, товары, цены и акции взяты из архивной копии главной страницы от 6 сентября 2025 года в Wayback Machine. Фотографии магазинов — из медиабанка X5, раздел клуба — с x5club.ru.
Что условное
Цены и акции — архивные, сегодня они другие. Шрифт — открытая замена фирменному. Двойная карточка, смена цвета по главам и счётчик до скидки — наши решения, на сайте их нет.
Что не работает
Заказ оформить нельзя: корзина, адрес и поиск работают только на странице и никуда ничего не отправляют. Страница закрыта от поисковиков.
«Пятёрочка», «X5 Клуб», логотип, товары и их изображения принадлежат правообладателям и использованы только для описания концепта.
06 — Ход работы
Что было и что сделали
Что изменили
Страница построена на резиновой единице размеров, огромном заголовке и плоских цветных главах. Самая большая скидка на полке получает двойную карточку, кнопка «В корзину» превращается в счётчик, а корзина считает, сколько осталось до скидки на первый заказ.
07 — Цифры
Что можно посчитать
19настоящих товаров на полке
72 / 72проверок стилей по спецификации
21 / 21проверок интерфейса в браузере
08 — Что входило
Состав работы
- Исследование и структура
- Арт-дирекшн
- UX/UI-дизайн
- Разработка и запуск
Границы кейса
Что показывает эта страница
Снимки сделаны с работающего проекта, а не с макета. Показываем интерфейс и решения, которые сделали сами.
Результат кейса — выпущенный интерфейс. Изменение числа заявок, выручки и позиций в поиске мы этой работой не измеряли и не приводим. Полоса с цифрами появляется только там, где измерение действительно есть.
Создадим продукт, который хочется показывать.
Расскажите о задаче — вернёмся с вопросами и первым направлением решения.