[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$faj7g53zvWYdEUs0Tsk3-r9qzwzqFFf3bBqxuWcNK4iw":3},{"slug":4,"title":5,"published":6,"publishedAt":7,"createdAt":8,"section":9,"preview":10,"heroImage":11,"previewImage":11,"headMarkup":12,"bodyMd":13,"bodyHtml":14},"oilshop","Редизайн OilShop — сайт дистрибьютора масел",true,"17.07.2025 07:31:53","2025-07-17T07:31:53.964Z","sites","Полный редизайн сайта дистрибьютора масел Mobil, Sinopec и Neste: тёмная премиальная тема с золотым акцентом, мобильная версия, каталог с фильтрацией, оформление заказа в два шага, личный кабинет.","\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F5819162549cd.webp",[],"OilShop — официальный дистрибьютор смазочных материалов Mobil, Sinopec и Neste с 2009 года. Компания поставляет масла для легкового и коммерческого транспорта, индустриальные масла и смазки оптовым и розничным клиентам. Входит в международный закупочный союз GROUPAUTO International с 2014 года.\n\nСтарый сайт работал на «1С-Битрикс» и за годы эксплуатации накопил критические проблемы: неадаптивный дизайн, перегруженный интерфейс, отсутствие мобильной версии. Требовался полный редизайн с сохранением товарного каталога и интеграций.\n\n## С чем пришли: 5 задач\n\n**1. Устаревший дизайн и интерфейс.** Сайт визуально отставал от конкурентов. Тяжёлая битриксовая вёрстка, мелкий текст, нечитаемая структура каталога — пользователю было сложно ориентироваться в ассортименте из сотен позиций.\n\n**2. Отсутствие мобильной версии.** Более 55% посетителей заходили с телефонов, но сайт не был адаптирован. Каталог сжимался в нечитаемую полоску, корзиной невозможно было пользоваться на сенсорном экране.\n\n**3. Сложный путь от каталога до заказа.** Поиск товара → карточка → добавление в корзину → переход в корзину → оформление. На каждом шаге — перезагрузка страницы. После трёх-четырёх товаров пользователь терял контекст.\n\n**4. Слабый личный кабинет.** История заказов была свёрнута в таблицу без визуального разделения. Покупатель не видел статус заказа без звонка менеджеру. Профиль не хранил адреса доставки — их приходилось вводить заново при каждом заказе.\n\n**5. Отсутствие инструментов для контента.** Новости были спрятаны в глубине сайта, не было отдельных посадочных страниц для акций и спецпредложений. Контент-менеджеры не могли гибко управлять баннерами и промо-блоками.\n\n## Решение 1. Новый дизайн: тёмная тема и золотой акцент\n\nРазработан дизайн в тёмной гамме с золотым акцентным цветом (#C4A261). Такое сочетание выделяет OilShop среди конкурентов с типовыми светлыми интернет-магазинами и работает на премиальное позиционирование брендов Mobil и Sinopec.\n\n![Главная страница OilShop — тёмная тема с золотым акцентом](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F01_home.webp)\n\nШрифт Roboto Flex дал гибкость в типографике: SemiBold для заголовков, Medium для навигации, Regular для текстов. Межстрочные интервалы и отступы выстроены по восьмипиксельной сетке — интерфейс выглядит структурно на любом разрешении.\n\n## Решение 2. Каталог с фильтрацией и карточка товара\n\nКаталог спроектирован вокруг реального пользовательского сценария: зашёл → выбрал категорию → отфильтровал по характеристикам → добавил в корзину. Три уровня навигации: главные категории в боковом меню, подкатегории с карточками товаров, фильтры по бренду, вязкости и объёму тары.\n\n![Страница каталога — фильтрация по бренду, вязкости и объёму](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F02_catalog.webp)\n\nКарточка товара выводит полный набор характеристик из 1С: артикул, вязкость, допуски, объём, вес. Кнопка добавления в корзину и счётчик количества вынесены в фиксированную нижнюю панель — доступны при скролле.\n\n![Карточка товара — характеристики из 1С и панель быстрого заказа](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F03_product.webp)\n\n![Характеристики товара — состав, допуски, вес](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F04_product2.webp)\n\n## Решение 3. Оформление заказа в два шага\n\nПроцесс покупки сокращён до двух экранов. На первом шаге покупатель вводит имя, телефон, email и адрес доставки — для зарегистрированных пользователей поля автозаполняются из профиля. На втором — проверяет данные и выбирает способ оплаты.\n\n![Первый шаг оформления — контакты, адрес и состав заказа](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F05_order1.webp)\n\n![Второй шаг оформления — подтверждение и способ оплаты](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F06_order2.webp)\n\n## Решение 4. Личный кабинет\n\nЛичный кабинет с тремя вкладками: заказы (список с визуальным разделением по статусам), профиль (контакты, адреса, смена пароля), история (завершённые заказы с возможностью повтора).\n\n![Личный кабинет — список заказов с разделением по статусам](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F07_orders.webp)\n\n![Профиль пользователя — контакты, адреса доставки, смена пароля](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F08_profile.webp)\n\n## Решение 5. Полная адаптивность\n\nДизайн разработан одновременно для десктопа (1440px) и мобильных (390px). Мобильная версия — самостоятельный интерфейс с нижним меню быстрого доступа, крупными карточками товаров, формой заказа с минимумом полей и гамбургер-меню.\n\n![Мобильная главная — меню быстрого доступа и крупные карточки](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F12_home_mobile.webp)\n\n![Мобильный каталог — карточки, оптимизированные под свайп](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F13_catalog_mobile.webp)\n\n![Мобильная карточка товара — фиксированная панель заказа](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F14_product_mobile.webp)\n\n![Мобильное оформление — минимум полей, крупные кнопки](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F15_order_mobile.webp)\n\n## Решение 6. Новости и контентные страницы\n\nРазработан шаблон новостей с поддержкой баннеров и SEO-инструментов: настраиваемые метатеги, человекопонятные URL, микроразметка Schema.org.\n\n![Список новостей — сетка с превью и датами](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F11_news.webp)\n\nСтраницы «О компании» и «Контакты» сверстаны с учётом контентных задач: карта с адресом, реквизиты, форма обратной связи.\n\n![О компании — история, бренды, преимущества](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F09_about.webp)\n\n![Контакты — карта, реквизиты, форма обратной связи](\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F10_contact.webp)\n\n## Итоги проекта\n\n| Параметр | Было | Стало |\n| --- | --- | --- |\n| Типов страниц | 8 (на базе шаблона Битрикс) | 16 уникальных (главная, каталог, карточка, корзина, оформление, заказы, профиль, новости, о компании, контакты + мобильные версии) |\n| Адаптивность | Нет | Полная — десктоп 1440px + мобильные 390px |\n| Мобильная аудитория | Не обслуживалась | Полноценный интерфейс для смартфонов |\n| Шаги оформления заказа | 4–5 с перезагрузкой | 2 без перезагрузки |\n| Личный кабинет | Таблица заказов | Вкладки: заказы, профиль, история |\n| Повторный заказ | Заполнить всё заново | Один клик — автозаполнение из профиля |\n| Дизайн | Типовой светлый Битрикс | Тёмная премиальная тема с золотым акцентом |\n| Типографика | Системные шрифты | Roboto Flex с восьмипиксельной сеткой |\n\nКлючевое изменение: сайт из инструмента для чтения превратился в инструмент для покупки. Путь от входа на сайт до оформления заказа сократился до трёх действий: выбрал товар → добавил в корзину → подтвердил заказ.\n\n## Типичные ошибки в похожих проектах\n\n**1. Редизайн как смена шрифтов и цветов.** Если ограничиться косметикой — поменять логотип, шрифт и кнопки — сайт останется неудобным в другой обёртке. Редизайн OilShop затронул структуру: путь пользователя, навигацию, мобильную версию с нуля.\n\n**2. Мобильная версия как ужатая копия десктопа.** Нельзя просто сжать 1440px в 390px. Нужно переработать навигацию, корзину и форму заказа. Мобильная версия OilShop — отдельный спроектированный интерфейс.\n\n**3. Игнорирование промежуточных состояний.** Пустая корзина, отсутствие товара в наличии, ошибка при отправке формы — эти состояния часто остаются без дизайна. В OilShop проработаны поп-апы для всех краевых случаев.\n\n**4. Сложная регистрация перед заказом.** Принудительная регистрация с email-подтверждением отсекает до 30% покупателей. В OilShop заказ можно оформить без регистрации, а кабинет создаётся автоматически при первой покупке.\n\n**5. Контентные страницы по остаточному принципу.** «О компании» и «Контакты» часто делают в последний момент. В OilShop эти страницы — часть дизайн-системы: та же сетка, та же типографика, те же отступы.\n\n## Заключение\n\nПроект OilShop — пример того, как редизайн B2B-интернет-магазина меняет не внешний вид, а пользовательский опыт. Тёмная тема и золотой акцент выделили сайт среди конкурентов, а переработанный путь покупки сократил количество шагов до заказа вдвое. Дизайн-система заложена с запасом под расширение.","\u003Cp>OilShop — официальный дистрибьютор смазочных материалов Mobil, Sinopec и Neste с 2009 года. Компания поставляет масла для легкового и коммерческого транспорта, индустриальные масла и смазки оптовым и розничным клиентам. Входит в международный закупочный союз GROUPAUTO International с 2014 года.\u003C\u002Fp>\n\u003Cp>Старый сайт работал на «1С-Битрикс» и за годы эксплуатации накопил критические проблемы: неадаптивный дизайн, перегруженный интерфейс, отсутствие мобильной версии. Требовался полный редизайн с сохранением товарного каталога и интеграций.\u003C\u002Fp>\n\u003Ch2>С чем пришли: 5 задач\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>1. Устаревший дизайн и интерфейс.\u003C\u002Fstrong> Сайт визуально отставал от конкурентов. Тяжёлая битриксовая вёрстка, мелкий текст, нечитаемая структура каталога — пользователю было сложно ориентироваться в ассортименте из сотен позиций.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>2. Отсутствие мобильной версии.\u003C\u002Fstrong> Более 55% посетителей заходили с телефонов, но сайт не был адаптирован. Каталог сжимался в нечитаемую полоску, корзиной невозможно было пользоваться на сенсорном экране.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>3. Сложный путь от каталога до заказа.\u003C\u002Fstrong> Поиск товара → карточка → добавление в корзину → переход в корзину → оформление. На каждом шаге — перезагрузка страницы. После трёх-четырёх товаров пользователь терял контекст.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>4. Слабый личный кабинет.\u003C\u002Fstrong> История заказов была свёрнута в таблицу без визуального разделения. Покупатель не видел статус заказа без звонка менеджеру. Профиль не хранил адреса доставки — их приходилось вводить заново при каждом заказе.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>5. Отсутствие инструментов для контента.\u003C\u002Fstrong> Новости были спрятаны в глубине сайта, не было отдельных посадочных страниц для акций и спецпредложений. Контент-менеджеры не могли гибко управлять баннерами и промо-блоками.\u003C\u002Fp>\n\u003Ch2>Решение 1. Новый дизайн: тёмная тема и золотой акцент\u003C\u002Fh2>\n\u003Cp>Разработан дизайн в тёмной гамме с золотым акцентным цветом (#C4A261). Такое сочетание выделяет OilShop среди конкурентов с типовыми светлыми интернет-магазинами и работает на премиальное позиционирование брендов Mobil и Sinopec.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F01_home.webp\" alt=\"Главная страница OilShop — тёмная тема с золотым акцентом\">\u003C\u002Fp>\n\u003Cp>Шрифт Roboto Flex дал гибкость в типографике: SemiBold для заголовков, Medium для навигации, Regular для текстов. Межстрочные интервалы и отступы выстроены по восьмипиксельной сетке — интерфейс выглядит структурно на любом разрешении.\u003C\u002Fp>\n\u003Ch2>Решение 2. Каталог с фильтрацией и карточка товара\u003C\u002Fh2>\n\u003Cp>Каталог спроектирован вокруг реального пользовательского сценария: зашёл → выбрал категорию → отфильтровал по характеристикам → добавил в корзину. Три уровня навигации: главные категории в боковом меню, подкатегории с карточками товаров, фильтры по бренду, вязкости и объёму тары.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F02_catalog.webp\" alt=\"Страница каталога — фильтрация по бренду, вязкости и объёму\">\u003C\u002Fp>\n\u003Cp>Карточка товара выводит полный набор характеристик из 1С: артикул, вязкость, допуски, объём, вес. Кнопка добавления в корзину и счётчик количества вынесены в фиксированную нижнюю панель — доступны при скролле.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F03_product.webp\" alt=\"Карточка товара — характеристики из 1С и панель быстрого заказа\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F04_product2.webp\" alt=\"Характеристики товара — состав, допуски, вес\">\u003C\u002Fp>\n\u003Ch2>Решение 3. Оформление заказа в два шага\u003C\u002Fh2>\n\u003Cp>Процесс покупки сокращён до двух экранов. На первом шаге покупатель вводит имя, телефон, email и адрес доставки — для зарегистрированных пользователей поля автозаполняются из профиля. На втором — проверяет данные и выбирает способ оплаты.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F05_order1.webp\" alt=\"Первый шаг оформления — контакты, адрес и состав заказа\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F06_order2.webp\" alt=\"Второй шаг оформления — подтверждение и способ оплаты\">\u003C\u002Fp>\n\u003Ch2>Решение 4. Личный кабинет\u003C\u002Fh2>\n\u003Cp>Личный кабинет с тремя вкладками: заказы (список с визуальным разделением по статусам), профиль (контакты, адреса, смена пароля), история (завершённые заказы с возможностью повтора).\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F07_orders.webp\" alt=\"Личный кабинет — список заказов с разделением по статусам\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F08_profile.webp\" alt=\"Профиль пользователя — контакты, адреса доставки, смена пароля\">\u003C\u002Fp>\n\u003Ch2>Решение 5. Полная адаптивность\u003C\u002Fh2>\n\u003Cp>Дизайн разработан одновременно для десктопа (1440px) и мобильных (390px). Мобильная версия — самостоятельный интерфейс с нижним меню быстрого доступа, крупными карточками товаров, формой заказа с минимумом полей и гамбургер-меню.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F12_home_mobile.webp\" alt=\"Мобильная главная — меню быстрого доступа и крупные карточки\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F13_catalog_mobile.webp\" alt=\"Мобильный каталог — карточки, оптимизированные под свайп\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F14_product_mobile.webp\" alt=\"Мобильная карточка товара — фиксированная панель заказа\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F15_order_mobile.webp\" alt=\"Мобильное оформление — минимум полей, крупные кнопки\">\u003C\u002Fp>\n\u003Ch2>Решение 6. Новости и контентные страницы\u003C\u002Fh2>\n\u003Cp>Разработан шаблон новостей с поддержкой баннеров и SEO-инструментов: настраиваемые метатеги, человекопонятные URL, микроразметка \u003Ca href=\"http:\u002F\u002FSchema.org\">Schema.org\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F11_news.webp\" alt=\"Список новостей — сетка с превью и датами\">\u003C\u002Fp>\n\u003Cp>Страницы «О компании» и «Контакты» сверстаны с учётом контентных задач: карта с адресом, реквизиты, форма обратной связи.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F09_about.webp\" alt=\"О компании — история, бренды, преимущества\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fcontent-media\u002Fcases\u002Foilshop\u002Fassets\u002F10_contact.webp\" alt=\"Контакты — карта, реквизиты, форма обратной связи\">\u003C\u002Fp>\n\u003Ch2>Итоги проекта\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Параметр\u003C\u002Fth>\n\u003Cth>Было\u003C\u002Fth>\n\u003Cth>Стало\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Типов страниц\u003C\u002Ftd>\n\u003Ctd>8 (на базе шаблона Битрикс)\u003C\u002Ftd>\n\u003Ctd>16 уникальных (главная, каталог, карточка, корзина, оформление, заказы, профиль, новости, о компании, контакты + мобильные версии)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Адаптивность\u003C\u002Ftd>\n\u003Ctd>Нет\u003C\u002Ftd>\n\u003Ctd>Полная — десктоп 1440px + мобильные 390px\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Мобильная аудитория\u003C\u002Ftd>\n\u003Ctd>Не обслуживалась\u003C\u002Ftd>\n\u003Ctd>Полноценный интерфейс для смартфонов\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Шаги оформления заказа\u003C\u002Ftd>\n\u003Ctd>4–5 с перезагрузкой\u003C\u002Ftd>\n\u003Ctd>2 без перезагрузки\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Личный кабинет\u003C\u002Ftd>\n\u003Ctd>Таблица заказов\u003C\u002Ftd>\n\u003Ctd>Вкладки: заказы, профиль, история\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Повторный заказ\u003C\u002Ftd>\n\u003Ctd>Заполнить всё заново\u003C\u002Ftd>\n\u003Ctd>Один клик — автозаполнение из профиля\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Дизайн\u003C\u002Ftd>\n\u003Ctd>Типовой светлый Битрикс\u003C\u002Ftd>\n\u003Ctd>Тёмная премиальная тема с золотым акцентом\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Типографика\u003C\u002Ftd>\n\u003Ctd>Системные шрифты\u003C\u002Ftd>\n\u003Ctd>Roboto Flex с восьмипиксельной сеткой\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Ключевое изменение: сайт из инструмента для чтения превратился в инструмент для покупки. Путь от входа на сайт до оформления заказа сократился до трёх действий: выбрал товар → добавил в корзину → подтвердил заказ.\u003C\u002Fp>\n\u003Ch2>Типичные ошибки в похожих проектах\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>1. Редизайн как смена шрифтов и цветов.\u003C\u002Fstrong> Если ограничиться косметикой — поменять логотип, шрифт и кнопки — сайт останется неудобным в другой обёртке. Редизайн OilShop затронул структуру: путь пользователя, навигацию, мобильную версию с нуля.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>2. Мобильная версия как ужатая копия десктопа.\u003C\u002Fstrong> Нельзя просто сжать 1440px в 390px. Нужно переработать навигацию, корзину и форму заказа. Мобильная версия OilShop — отдельный спроектированный интерфейс.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>3. Игнорирование промежуточных состояний.\u003C\u002Fstrong> Пустая корзина, отсутствие товара в наличии, ошибка при отправке формы — эти состояния часто остаются без дизайна. В OilShop проработаны поп-апы для всех краевых случаев.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>4. Сложная регистрация перед заказом.\u003C\u002Fstrong> Принудительная регистрация с email-подтверждением отсекает до 30% покупателей. В OilShop заказ можно оформить без регистрации, а кабинет создаётся автоматически при первой покупке.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>5. Контентные страницы по остаточному принципу.\u003C\u002Fstrong> «О компании» и «Контакты» часто делают в последний момент. В OilShop эти страницы — часть дизайн-системы: та же сетка, та же типографика, те же отступы.\u003C\u002Fp>\n\u003Ch2>Заключение\u003C\u002Fh2>\n\u003Cp>Проект OilShop — пример того, как редизайн B2B-интернет-магазина меняет не внешний вид, а пользовательский опыт. Тёмная тема и золотой акцент выделили сайт среди конкурентов, а переработанный путь покупки сократил количество шагов до заказа вдвое. Дизайн-система заложена с запасом под расширение.\u003C\u002Fp>\n"]