Новый сайт · типография
Колорит ПринтСайт, который печатается в четыре краски
Типография в Зеленограде больше 23 лет печатает визитки, листовки, наклейки, печати и баннеры. Мы разработали ей новый сайт на языке печатного листа: три пожелания заказчика — доступные цены, качество печати и быстрые сроки — стали тремя красками, а прайсы — таблицами, на которые хочется нажать.
- 31
- страница продукции — визитки, листовки, печати, бейджи и ещё 27 видов
- 55
- карточек цен с фото и таблицами
- 45
- таблиц оформлены сами — тексты админки не переписаны
- 4
- краски CMYK — язык всего сайта
Задача
Три пожелания —
три краски
Заказчик попросил сделать акцент на доступные цены, высокое качество печати и быстрые сроки. Цены на страницах услуг оставить, а таблицы цен — красиво оформить. Мы разложили эти пожелания по краскам: у каждой своя роль на всём сайте.
- CyanБыстро
Срочная печать от одного часа — первым словом на первом экране, на каждой странице услуги и в шапке рядом с телефоном и режимом работы.
- MagentaКачественно
Проверка макета перед печатью, собственное производство, 23 года работы — доводами, а не общими словами о «высоком качестве».
- YellowДоступно
Цены остались на страницах услуг и открыто показаны в таблицах: «от 480 ₽ за 100 листовок», «от 950 ₽ печать с оснасткой».
Там, где три краски совпали, получается четвёртая — чёрная. На сайте это заказ: «Рассчитать заказ» в шапке, заявка по клику на цену, «Пришлите макет» в подвале.
Фирменный язык
Сова, краски
и метки обреза
Логотип — синяя сова из букв «ср». Синий совы остался главным цветом кнопок и ссылок, а вокруг него — всё, что есть на настоящем печатном листе: краски CMYK, метки обреза и приводки, растровые точки, цветовая шкала. При наведении на логотип из-за совы выглядывают пурпурный и жёлтый оттиски.
Колорит Принттипография · Зеленоград
Главная
Печатная машина
на первом экране
Главная рассказывает о типографии через саму печать: лист печатается, растр мельчает до фото, три краски сходятся в заказ. Ниже — продукция с ценами, пять шагов заказа, отзывы, города, новости и вопросы.
Прайс
Таблица,
на которую хочется нажать
Цены остались там, где их искали клиенты, — на страницах услуг. Таблицы из админки теперь оформляются сами: «от» мелко, цена крупно, «по запросу» — плашкой. Попробуйте: это настоящий прайс листовок на бумаге 80 г.
| Тираж | 100 шт | 200 шт | 300 шт | 500 шт | 1000 шт |
| Печать 4+0 A3 | от 2 250 ₽ | от 3 750 ₽ | от 5 200 ₽ | от 7 500 ₽ | от 10 500 ₽ |
| Печать 4+4 A3 | от 2 700 ₽ | от 4 500 ₽ | от 6 300 ₽ | от 9 000 ₽ | от 12 600 ₽ |
| Печать 4+0 A4 | от 1 350 ₽ | от 2 400 ₽ | от 3 000 ₽ | от 4 200 ₽ | от 5 800 ₽ |
| Печать 4+4 A4 | от 1 750 ₽ | от 3 120 ₽ | от 3 900 ₽ | от 5 450 ₽ | от 7 500 ₽ |
Заявка заполнится сама: наведите и нажмите на цену
Страница услуги
31 страница —
один печатный лист
Визитки, листовки, печати, наклейки, бейджи, календари — у каждой страницы услуги одна и та же понятная сборка. Тексты и прайсы из админки остались как были: оформление подхватывает их само.
- Лист в работеПервый экран услуги — фото позиции прайса на печатном листе с метками обреза; три краски проходят приводку, когда лист появился.
- Три обещанияПод заголовком каждой услуги — «Быстро», «Качественно», «Доступно» своими красками.
- Навигация по прайсуЛипкая строка разделов прайса: «Листовки 80 гр», «90–150 гр», «170–250 гр»… текущий раздел подсвечивается.
- Карточки ценКаждая позиция прайса — карточка с фото и номером, таблицы внутри оформляются сами, тексты админки не переписаны.
- Цена кликомНаведите на цену — подсветятся строка и столбец; нажмите — откроется заявка с уже заполненной позицией.
- На телефонеТаблица листается вбок, первый столбец остаётся на месте, подсказка «Листайте таблицу» показывает, что справа ещё цены.
О нас
Красящий валик
и стопка листов
На странице «О нас» — другая часть типографии. По контурному заголовку прокатывается валик и закрашивает его; цифры «штампуются»; карточки «Кто мы» лежат стопкой и раскладываются при прокрутке; фото производства печатаются краска за краской.
Страницы
Весь сайт —
один тираж
Главная, услуги, прайсы, «О нас», контакты, новости, требования к макетам и даже 404 — одна система: печатный лист с метками, три краски, синий совы для действий.
ГлавнаяПечатная машина, три краски, продукция, конвейер заказа, отзывы, города, новости.
УслугиКарточки-оттиски разделов и вся «Другая продукция» плашками.
Листовки и буклетыПрайс по плотности бумаги — карточки с таблицами и навигацией.
Печати и штампы18 позиций оснастки — каждая своей карточкой с ценой.
ВизиткиБумаги и постобработка с процентами к стоимости.
Другая продукция26 видов продукции карточками.
БейджиТекстовые таблицы «вариант — когда подходит — особенности».
О насКрасящий валик, стопка карточек, фото производства печатаются.
КонтактыПозвонить, прислать макет, приехать — тремя красками, карта.
НовостиСоветы по печати и подготовке макетов.
Требования к макетамСписки с точками-красками, заголовок на печатном листе.
Ошибка 404«Этот лист ушёл в брак»: цифры не в приводке и штамп «Брак».
На телефоне
Прайс —
в кармане
На телефоне одна шапка с меню продукции, лист печатается, когда до него долистали, таблицы цен листаются вбок с закреплённым первым столбцом, а три краски сходятся в небольшом круге.
Как шла работа
Восемь этапов —
одна команда
Над сайтом работала команда студии: разбор прежнего сайта, бриф, концепция, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне.
- 01РазборСняли все страницы прежнего сайта, выгрузили прайсы, тексты и блоки из админки — чтобы при переходе ничего не потерять.
- 02БрифПожелания заказчика: акцент на доступные цены, высокое качество печати и быстрые сроки; цены на страницах услуг оставить, таблицы красиво оформить.
- 03КонцепцияСайт — печатный лист: краски CMYK, приводка, растр, метки обреза, цветовая шкала. Три пожелания — три краски.
- 04Шапка, подвал, стильОдна шапка для компьютера и телефона с меню продукции, подвал с призывом прислать макет, заголовки страниц на листе с метками.
- 05Услуги и прайсыСтраница услуги, карточки цен, оформление таблиц, перекрестие и заявка по клику на цену.
- 06ГлавнаяПечатная машина на первом экране, три краски, продукция, конвейер заказа, отзывы, города, новости.
- 07«О нас», контакты, 404Валик по заголовку, стопка карточек, фото производства печатаются; три способа связаться; «лист ушёл в брак».
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне — отображение, ошибки, формы — и довели по замечаниям.
Довели на приёмке
- Список разделов на странице «Услуги» не выводился — теперь карточки-оттиски
- Цены с разделением разрядов: «10 500 ₽», а не «10500»
- Длинные заголовки переносятся на телефоне, ничего не вылезает за экран
- На телефоне лист начинает печататься, когда его видно, а не за краем экрана
- Сетка продукции на главной без пустых мест
- Текст заявки по клику на цену — с тиражом, форматом и ценой
- Своя страница «Контакты»: прежний шаблон не выводил заголовок
- Счётчики «23+» и «2000+» на «О нас» не теряют знак «+»
Работает как раньше
- Прайсы и цены в админке
- Тексты страниц
- Формы заявок и звонка
- Новости и статьи
- Страницы городов
- Адреса страниц
Итог
Быстро. Качественно.
Доступно.
Главная с печатной машиной, 31 страница продукции с 55 карточками цен, «О нас», контакты, новости и требования к макетам — новый сайт типографии, в котором каждое обещание заказчика напечатано своей краской.