Шесть смысловых экранов вместо набора разрозненных услуг.
Сайт компании проектной логистики2018
Global
Forwarding
Спроектировали и собрали одностраничный сайт, который объясняет сложную проектную логистику через цвет, техническую графику и движение.
Задача проекта
Показать инженерную сложность перевозки без перегруженного корпоративного сайта
SGF Global Forwarding работала с международной транспортировкой тяжёлого и негабаритного оборудования для нефтегазовой, ветроэнергетической и горнодобывающей отраслей.
Нужно было собрать не сайт-визитку, а последовательный одностраничный рассказ: кто отвечает за проект, как строится мультимодальный маршрут, где находятся риски и чем отличаются море, железная дорога, тяжёлый автотранспорт и авиация.
Мы разработали дизайн-концепцию, адаптивный интерфейс, выполнили вёрстку и наполнили страницу клиентским контентом. Сложная логистика стала понятной через структуру самого сайта.
Контрастная система для разных отраслей и видов перевозки.
Слайдеры, hover-состояния и графика, связанная со скроллом.
Полный сценарий для desktop, планшета и телефона.
Интерфейсная система
Цвет разделяет сценарии. Сетка удерживает сложный контент.
Source Sans Pro, строгая модульная сетка и три сигнальных цвета образуют язык сайта. Красный ведёт историю компании, оранжевый разделяет отраслевые решения, синий собирает международные перевозки.
Source Sans ProAa
Типографика не конкурирует с техническими фотографиями и схемами. Крупные рубрики отвечают за маршрут чтения, компактный текст — за детали операций.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 / & →
abcdefghijklmnopqrstuvwxyz
0123456789 / & →
Рабочая реконструкция
Сам сайт — главный экспонат кейса
Мы восстановили финальную SGF-версию по desktop, tablet и mobile-макетам, исходным SVG, фотографиям и записи работавшей страницы.
Прокрути сайт внутри окна, переключи слайдеры и четыре вида перевозки. Интерфейс адаптируется к размеру окна.
Движение как объяснение
Техника движется так же последовательно, как груз по маршруту
Анимация здесь не декоративный слой. Она помогает разделить способы перевозки, поддерживает переход между разделами и делает технический процесс читаемым.
Скролл управляет траекторией крупной иллюстрацииАдаптивная система
Одна последовательность — три масштаба интерфейса
На планшете и телефоне сайт не превращается в уменьшенную копию desktop. Модули перестраиваются, цветовые блоки сохраняют порядок, а закреплённая навигация становится полноэкранным меню.
Результат работы
Корпоративный сайт работает как схема сложного проекта
SGF получила адаптивную страницу, где структура, цвет и движение помогают быстро пройти путь от специализации компании к конкретным видам перевозки, контролю качества и таможенному оформлению.
Кейс показывает, как digital может объяснять B2B-услугу не через абстрактные обещания, а через ясный порядок действий и реальные проектные материалы.
- Дизайн-концепция одностраничного сайта
- Информационная архитектура
- UX/UI desktop, tablet и mobile
- Технические SVG-иллюстрации
- Слайдеры и scroll-based motion
- Вёрстка и наполнение контентом
- Подготовка к запуску
Состав проекта
GORYANIN BROTHERS × SGF
Связанный кейс
VSK BUILDING
Сайт и фирменная система для компании, которая проектирует и реализует технически сложные пространства.
Посмотреть кейс
B2B digital ↗Первый разговор
Сложный B2B-продукт можно объяснить ясно
Расскажите, что именно должен понять клиент и какое действие совершить. Мы соберём маршрут от структуры и текста до интерфейса и запуска.
Обсудить задачуТелефон+7 921 791-93-18
ОфисСанкт-Петербург
Атлантик Сити, ул. Савушкина, 126Б
Атлантик Сити, ул. Савушкина, 126Б