Новый сайт · типография
PRINTAIRТипография, лёгкая как воздух
Семейная типография из Зеленограда печатает с 1893 года — полиграфию, баннеры, сувениры и рекламу на собственном производстве. Команда студии разработала ей новый сайт под идею логотипа с облаком: настоящее небо и облака вместо шаблона, производство и история на виду, калькулятор и заявка на каждом экране. Смотрите, как облака расходятся над готовым сайтом.
- С 1893
- семейная история и объявление той эпохи на главной
- 85 разделов
- каталога — каждый стал лендингом
- 4 направления
- полиграфия, широкий формат, сувениры, реклама
- 6 видов
- продукции в калькуляторе — расчёт сразу в заявку
Задача
Воздушно, дорого —
и больше заявок
Заказчик хотел сайт современный и дорогой, с эффектами и анимацией, воздушный, с облаками — под идею логотипа PRINTAIR с облаком. Обязательно: собственное производство в Зеленограде и минимум брака, история с 1893 года со снимком старой газеты, оценки на картах, калькулятор — и больше заявок с сайта. Мы свели это к трём правилам.
- Правило 01Небо, а не шаблонНастоящее небо и облака, бумага с синими акварельными волнами, стеклянные плашки. Облака расходятся при загрузке и разлетаются при прокрутке — эффекты из самой идеи логотипа.
- Правило 02Производство и история на виду«Собственное производство в Зеленограде» — первой строкой. Цех, минимум брака, срочные заказы, семейная история с 1893 года и настоящее объявление той эпохи.
- Правило 03Каждый экран ведёт к заявкеКалькулятор вписывает расчёт в заявку, виды продукции — в одно нажатие, мессенджеры рядом с кнопками, на телефоне — нижняя панель «Позвонить · Рассчитать · WhatsApp».
Фирменный язык
Палитра —
небо над Зеленоградом
Синий логотипа PRINTAIR стал цветом кнопок, лазурь — подсветок, небо и туман — фоном, чернила — текстом и подвалом. Крупные заголовки — широкий Unbounded, текст — Manrope. Облака — фотореалистичные иллюстрации нейросети с прозрачностью: одно и то же облако одинаково живёт на голубом небе первого экрана и на тёмном подвале. Переключите фон — проверьте сами.
Калькулятор
Посчитал —
заявка уже готова
Людям нравится сразу считать, поэтому калькулятор стоит на главной и в разделах каталога: в «Визитках» он открыт на визитках, в «Баннерах» — на баннере. Цена на сайте ориентировочная, а все выбранные параметры по кнопке «Получить точный расчёт» сами попадают в заявку — менеджеру не нужно переспрашивать. Выберите параметры — посмотрите, что уйдёт в заявку.
Главная
Главная —
десять глав
Главная рассказывает о типографии по порядку: что печатают, где и как, сколько стоит, с какой историей, что говорят клиенты и как заказать. Между первым экраном и направлениями — гряда облаков, которая растворяется в белом; в подвале облака снова встречают страницу. Выберите главу — окно сайта прокрутится к ней.
Каталог
85 разделов —
85 лендингов
Каждый раздел каталога собран как отдельная посадочная страница: цифры на первом экране, виды продукции, преимущества, калькулятор, где пригодится, шаги работы, вопросы и заявка. Виды продукции берутся из текста самого раздела — в «Визитках» их девятнадцать, с фото и кнопкой «Рассчитать». Тексты админки не переписывали: оформление подхватывает их само.
Раздел направления: подразделы карточками, калькулятор визиток, листовок, буклетов и наклеек, преимущества, вопросы и заявка.
Открыть на сайте ↗
История
130 лет истории —
на одной главной
Типографию основал С. Т. Шахбагов — прапрадед нынешних руководителей. Заказчик попросил обязательно оставить историю и снимок старой газеты, и мы сделали их отдельной главой: объявление 1893 года лежит бумагой на бумаге, рядом — линия времени, которая прорисовывается при прокрутке: 1893, 1993, 2003 и сегодня. Та же история — на странице «О компании».
- 1893Основание типографии
- 1993Новое поколение семьи
- 2003Своя полиграфия
- СегодняПроизводство полного цикла в Зеленограде
Картинки
Один стиль —
бумага в небе
Для направлений, первого экрана и производства сделали картинки в одном стиле: белая бумага с синими акварельными волнами среди облаков — как в логотипе. Это иллюстрации нейросети по нашему описанию, а не фото продукции или цеха типографии. Фото работ, визиток и видов продукции на сайте — настоящие, от заказчика.
Детали
Заявка и мелочи —
тоже в облаках
Окно заявки открывается с уже вписанным расчётом или названием вида продукции. Поиск показывает подсказки с картинками разделов, пока вы печатаете. Подвал встречает страницу грядой облаков, а внизу — надпись PRINTAIR во всю ширину.
Живой сайт
Двенадцать страниц —
одним небом
У внутренних страниц общий первый экран с облаками и путём по разделам, а дальше своя подача: доставка и оплата — шагами и карточками, контакты — карточками связи и картой, новости — карточками статей. Наведите на окно — страница прокрутится.
На телефоне
Рассчитать —
под большим пальцем
На телефоне внизу появляется панель «Позвонить · Рассчитать · WhatsApp», меню раскрывается на весь экран с направлениями и контактами, калькулятор и виды продукции складываются в одну колонку. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над сайтом работала команда студии: разбор сайта и пожеланий, концепция, дизайн-система, главная, разделы каталога, картинки, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Сайт работает на платформе SkeekS по тарифу «Витрина»: тексты, разделы и картинки типография правит сама.
- 01Разбор сайта и пожеланийПрошли сайт целиком и записали пожелания: воздушный дизайн под логотип с облаком, калькулятор, больше заявок, своё производство и история с 1893 года на виду.
- 02КонцепцияТипография, «лёгкая как воздух»: небо, настоящие облака и бумага с синими акварельными волнами — из логотипа PRINTAIR с облаком.
- 03Дизайн-системаПалитра неба, Unbounded для заголовков и Manrope для текста, стеклянные плашки, облака с прозрачностью — один язык для всех страниц.
- 04Главная, шапка, подвалОблака на первом экране, четыре направления, производство, калькулятор, история, отзывы, работы, шаги, вопросы; стеклянная шапка и подвал с грядой облаков.
- 05Разделы каталогаКаждый из 85 разделов стал лендингом: цифры, виды продукции из текста, преимущества, калькулятор, где пригодится, шаги, вопросы и заявка.
- 06КартинкиНебо, облака и картинки направлений — иллюстрации нейросети в одном стиле; облака с прозрачностью ложатся и на небо, и на тёмный подвал.
- 07Страницы и окнаО компании, доставка и оплата, новости и статьи, контакты, газета, окна заявок, подсказки поиска, меню и нижняя панель на телефоне.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям заказчика.
Довели на приёмке
- Отступы между блоками стали меньше
- Убрали бумажный самолётик и бегущую строку
- Облака сделали фотореалистичными
- Белая полоса под меню и лишнее облако ушли
- У выпусков газеты появились обложки
- Кнопки без обводки при клике мышью
Сохранили
- Тексты всех разделов
- Объявление типографии 1893 года
- Новости и статьи
- Выпуски газеты
- Формы заявок
- Старые адреса карточек ведут на разделы
Итог
Типография —
лёгкая как воздух
Главная, шапка, подвал, 85 разделов каталога лендингами, калькулятор с заявкой, о компании с историей с 1893 года, доставка и оплата, новости, контакты, газета, окна заявок и подсказки поиска — одним небом. Сайт, на котором хочется посчитать заказ и сразу его отправить.