Корпоративный сайт «Подъемтрансмаш»
Сайт производителя специальных кранов и подъёмно-транспортного оборудования. Сделали с нуля: прототипы, дизайн, вёрстка, сборка на 1С-Битрикс, наполнение, проверки скорости и безопасности. Сайт адаптивный.
Корпоративный сайт с нуля для производителя тяжёлой техники: от чернового прототипа до каталога с техническими характеристиками и опросными листами.
О клиенте
«Подъемтрансмаш» разрабатывает и изготавливает специальное подъёмно-транспортное, технологическое и испытательное оборудование по техническому заданию заказчика. Отрасли клиентов: судостроение, металлургия, машиностроение, цементная промышленность, порты и балкерные терминалы.
Задача
Сделать сайт с нуля. Показать продукцию: мостовые, козловые и портальные краны, вагоноопрокидыватели, судопогрузочные машины и другое оборудование. Рядом дистрибуция, документы, новости и опросные листы, которые заказчик заполняет под свою задачу.
Решение
Начали с интерактивного прототипа, затем нарисовали макеты для компьютера и телефона, сверстали и собрали на 1С-Битрикс. Наполнили сайт материалами, которые прислал клиент. Перед запуском проверили скорость и безопасность.
Одна главная на трёх стадиях
Сначала серый прототип, где договариваемся о структуре. Потом макет с дизайном. Затем готовый сайт. Переключайте стадии справа или ждите, они меняются сами.
- Прототип сделан в Axure для компьютера и телефона
- Макеты сделаны в Figma на два размера: 1920 и 360
- Сайт собран на 1С-Битрикс
Сначала структура, без цвета и картинок
Прототип в Axure: серые блоки, настоящая навигация и тексты-заглушки. На нём обсуждали, какие разделы нужны, где что лежит и как человек дойдёт до нужного оборудования. Скролльте, окно справа прокручивается вместе с вами.
Сорок экранов в Figma
По двадцать экранов для компьютера и для телефона: главная, продукция, категории и карточки, дистрибуция, О компании, галерея, документы, новости, опросные листы, контакты и страница 404. Скролльте, на экране макет главной.
- Макеты на 1920 и 360 пикселей
- Единый UI-кит: цвета, шрифты, кнопки, карточки
- Отдельно нарисованы меню и просмотр документов
Все элементы собраны один раз
Цвета, шрифты, кнопки, поля форм, карточки продукции и значки лежат в одном макете. Страницы собираются из них, поэтому новые разделы выглядят так же, как старые. Нажмите, чтобы увеличить.
Из серого прототипа в готовую главную
Слева прототип главной страницы, справа готовый сайт. Потяните ползунок и сравните первые экраны: меню, заголовок, описание и две кнопки стоят там же, где их нарисовали в прототипе.
- В прототипе серые блоки и тексты-заглушки
- На сайте дизайн, фотография промышленной площадки и настоящие тексты клиента
- Структура первого экрана осталась прежней
ПрототипСайт
Восемь разделов продукции
Мостовые, козловые и портальные краны, вагоноопрокидыватели, реклаймеры, судопогрузочные машины, нестандартное оборудование и модернизация. В каждом разделе карточки с описанием и характеристиками. Скролльте, окно справа прокручивается вместе с вами.
Инженеру нужны цифры, они на виду
Название и режим работы по ГОСТ, галерея с фото и видео, технические характеристики таблицей и материалы для скачивания. Рядом кнопка заявки.
- Фото и видео в галерее
- Технические характеристики: грузоподъёмность, пролёт, высота подъёма, скорости
- Файлы для скачивания: опросный лист, FAQ, информация для проектных институтов
Телефон рисовали отдельно
Мобильные экраны макета нарисованы на 360 пикселей, и прототип тоже сделан для телефона. Сайт адаптивный: главная, каталог и карточка продукта собраны под узкий экран, а не просто сжаты.
От прототипа до гарантии
Весь путь в одном проекте
Один подрядчик на всех этапах. Клиенту не нужно искать дизайнера, верстальщика и разработчика отдельно.
- Прототип
- Дизайн-макеты
- Адаптивная вёрстка
- Сборка на 1С-Битрикс
- Наполнение присланными материалами
- Базовая оптимизация
Проверки перед запуском
Скорость загрузки проверили инструментами Google, безопасность проверили аудитами. На сайте включены заголовки безопасности.
- HSTS
- X-Content-Type-Options
- X-Frame-Options
- Referrer-Policy
Разработка на 1С-Битрикс
Гарантийная поддержка после запуска
Шесть шагов от нуля до сайта
- 1
Прототип
Серые блоки в Axure для компьютера и телефона
- 2
Дизайн
Макеты в Figma: 1920 и 360, UI-кит
- 3
Вёрстка
Адаптивная, под компьютер и телефон
- 4
Сборка
1С-Битрикс, наполнение присланными материалами
- 5
Проверки
Скорость по тестам Google, аудиты безопасности, базовая оптимизация
- 6
Запуск
Гарантийная поддержка один год
Нужен такой же проект?
Оставьте заявку, менеджеры свяжутся с вами в ближайшее время и обсудят задачу.
