Профи РемонтСайт мастерской, который крутится, как исправная шестерня
«Профи Ремонт» — мастерская и магазин инструмента в Солнечногорском округе: ремонт бензинового, электро- и садового инструмента, прокат и продажа. Команда студии разработала для мастерской сайт в духе цеха — графит, сигнальный жёлтый и красная шестерня логотипа. Поверните шестерню или потяните рейку — придёт следующая страница сайта.
«Профи Ремонт» работает с 2016 года: две мастерские — в Дубинино и Курилово, ремонт бензинового, электро- и садового инструмента, прокат строительной и садовой техники, продажа инструмента, запчастей и расходников. К мастерам едут из Солнечногорска, Клина и Зеленограда. Нужен был сайт, по которому сразу видно: здесь знают своё дело — и до звонка мастеру, проката или маршрута одно касание.
01
Как в цеху
Графит, сетка верстака, сигнальный жёлтый и красный — цвета логотипа. Ничего лишнего: всё на своих местах, как инструмент на хорошем верстаке.
02
Шестерня логотипа
Кольцо текста «Ремонт · Аренда · Продажа инструмента» вокруг шестерни стало печатью сайта: оно крутится у кнопки «Позвать мастера» и в жёлтом призыве подвала.
03
Три номера
Ремонт — 01, аренда — 02, продажа — 03: номера стоят в шапке, на панелях главной и в меню телефона. До нужного направления — одно касание.
Фирменный язык
Всё выросло из логотипа
В логотипе мастерской — красная шестерня, механик с ключом и надпись по дуге «Ремонт · Аренда · Продажа инструмента». Из них вырос язык сайта: кольцо текста вокруг шестерни, сигнальные ленты с направлениями и городами, красные точки после слов и номера 01, 02, 03. Прокрутите — кольцо повернётся.
РЕМОНТ.Unbounded — заголовки: тяжёлые, широкие, как надпись на вывеске мастерской
Консультация мастера — бесплатноOnest — текст, цены и кнопки: спокойно и чётко
● ОТКРЫТО ДО 20:30JetBrains Mono — подписи, номера и часы, как бирка на инструменте
#0e0f11ГрафитФон, шапка, подвал
#2a2d33СтальПанели и карточки
#ffe100Сигнальный жёлтыйКнопки, ленты, акценты
#ff2b1cКрасный шестерниТочки, номера, призыв
#f4f2ecБумагаСветлые разделы
Шапка сайта
Открыто до 20:30
Рядом с телефоном в шапке — статус мастерской. Сайт сверяет режим работы с московским временем: днём горит зелёная точка и время закрытия, утром — «Откроемся в 8:00», вечером — «Откроемся завтра в 8:00». Клиент видит, стоит ли ехать сейчас, ещё до звонка. Выберите день и время — статус пересчитается так же, как на сайте.
Профи Ремонт+7 905 536-60-65Открыто до 20:30
0:00
6:00
12:00
18:00
24:00
Режим работы на сайте: пн–сб 8:00–20:30, вс 8:00–20:00
Главная
Главная — по участкам мастерской
Главная ведёт клиента, как мастер по цеху: три направления, прокат с ценами, шаги ремонта, продажа, магазин, адреса и новости. Числа на странице — позиции, цены проката, адреса, годы работы — считаются из каталога и настроек сайта. Иллюстрации первого экрана и направлений нарисованы для сайта по мотивам логотипа — это не фото мастерской; настоящие фотографии магазина — в своём блоке и на странице «О компании». Выберите участок — окно прокрутится к нему.
instrumentsolnechnogorsk.ru
Прокат
Прокат — как табло на стене
Прокат — то, за чем на сайт приходят чаще всего: незачем покупать дорогой инструмент, чтобы поработать неделю на даче. На главной — лента из 19 позиций с ценой за сутки, заголовок сам перебирает инструмент: «Возьмите перфоратор напрокат», «…бензопилу…». Здесь те же позиции и цены — на табло мастерской. Отсортируйте или листайте.
Ремонт объяснён без сложных слов — четыре шага, как их проходит клиент. На сайте рядом с шагами собираются три шестерни, а под ними — что чинят в мастерской: бензопилы, триммеры, генераторы, перфораторы и ещё десяток видов техники. Прокрутите — шестерни сцепятся и поведут шаги.
01Принесите инструментв мастерскую в Дубинино или Курилово
02Мастер найдёт причинуи объяснит, что нужно сделать
03Ремонт и замена деталейзапчасти и расходники — в нашем магазине
Путь покупателя короткий: раздел направления, товар, корзина. Где цена не указана — «по запросу» и кнопка звонка, потому что модель и наличие мастер подскажет по телефону. Наведите курсор на окно — страница пролистается.
instrumentsolnechnogorsk.ru/kata…
01РазделТёмная шапка раздела с номером направления, фильтр и карточки инструмента.
instrumentsolnechnogorsk.ru/benz…
02ТоварФото крупно, цена или «по запросу», кнопки звонка и корзины, условия рядом.
instrumentsolnechnogorsk.ru/~sho…
03КорзинаСчётчик количества, итог и оформление заказа — в цветах мастерской.
Детали
Эта деталь потерялась
Даже страница «не найдено» говорит языком мастерской: «Эта деталь потерялась» — и сразу ведёт к ремонту, прокату, продаже и телефону мастера. Ниже — детали, которые делают сайт удобным: поиск, боковая корзина, окно звонка, подвал и меню на телефоне. Нажмите на снимок, чтобы увеличить.
ПоискПоиск раскрывается на всю шапку и сразу подсказывает инструмент.Корзина сбокуДобавили в корзину — сбоку выезжает панель поверх шапки, со счётчиком количества.Перезвоните мнеОкно заявки на звонок — тёмное, с жёлтой кнопкой, как весь сайт.ПодвалЖёлтый призыв, кольцо текста вокруг шестерни и большое «Профи Ремонт».Плашка cookieДаже служебная плашка — графит и сигнальный жёлтый.Меню на телефонеМеню на весь экран: три направления крупными номерами и страницы сайта.
Страницы
Каждая страница — из одного металла
Не только главная: ремонт, аренда, каталог, доставка, контакты и «О компании» собраны из тех же деталей — тёмная шапка страницы с номером, бумага с тонкими линиями, жёлтые кнопки и красные точки. Тексты мастерской остались прежними по смыслу, только легли в новую раскладку.
О компанииИстория с 2016 года и галерея настоящих фотографий магазина.
На телефоне
Мастер — под пальцем
С телефона на сайт заходят прямо из гаража или с дачи. Поэтому внизу экрана всегда есть панель с главной, поиском, корзиной и кнопкой звонка, а меню открывается на весь экран тремя крупными номерами. Лента проката и фото магазина листаются пальцем. Нажмите на телефон, чтобы остановить прокрутку.
Над сайтом работала команда студии: разбор, концепция, шрифты и знаки, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Сайт включали на работающей мастерской — каталог, цены, корзина и адреса страниц остались на месте.
01РазборПрошли путь клиента на компьютере и телефоне: ремонт, прокат, покупка, звонок мастеру, дорога до мастерской.
02Концепция«Мастерская»: графит, сигнальный жёлтый и красная шестерня логотипа, искры, ленты и номера направлений.
03Шрифты и знакиТяжёлые заголовки Unbounded, спокойный текст Onest, подписи и часы моноширинным JetBrains Mono.
04Шапка и менюОдна шапка для компьютера и телефона, статус «Открыто до…», поиск, меню на весь экран и нижняя панель со звонком.
05ГлавнаяТри направления, прокат с ценами, шаги ремонта, продажа, фото магазина, адреса и новости — всё из каталога и настроек.
06Каталог и товарРазделы направлений, страница ремонта, карточка товара, боковая корзина, корзина и оформление.
07СтраницыДоставка, контакты с картой, «О компании» с галереей, новости, окна заявок, плашка cookie и 404.
08ПриёмкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям.
Довели на приёмке
Боковая корзина открывается поверх шапки
Счётчик количества в корзине
Карусели и сетка товаров — с ровными отступами
Пустой фильтр раздела не показывается
Номер направления не переносится по частям
Нет обводки после нажатия мышью — только для клавиатуры
Главная с тремя направлениями, шапка со статусом «Открыто до…», меню на весь экран, прокат с ценами, страница ремонта, продажа, карточка товара, боковая корзина и оформление, доставка, контакты с картой, «О компании» с настоящими фотографиями, новости и страница 404 — в одном стиле, из одного логотипа. До звонка мастеру — одно касание.
