Морской порт «Первомайский» — ключевой логистический хаб Дальнего Востока. Вот уже 20 лет компания предоставляет полный комплекс погрузо-разгрузочных работ любой сложности на морском, железнодорожном и автотранспорте. К нам обратились с запросом на создание айдентики и корпоративного сайта под ключ. Заказчику хотелось создать не просто функциональный инструмент для клиентов порта, но и отразить его современный имидж.
Нам предстояло:
Нам предстояло:
- Сформировать современный имидж компании.
- Разработать понятный и удобный корпоративный сайт, способный привлечь новых клиентов и облегчить доступ к информации.
- Укрепить позиционирование бренда на рынке.
О заказчике
Создание фирменного стиля для порта
Надежный, фундаментальный, мужской. Именно такие ассоциации мы хотели передать через визуальный образ. Перед тем, как приступить к делу, мы проанализировали знаки портов в разных уголках России и за рубежом. Выяснили, какие решения в отрасли наиболее распространены, какие визуальные ассоциации могут быть использованы для дифференциации бренда.
На основании этого создали четыре концепции фирменного стиля, которые включали в себя:
В каждой концепции мы подчеркнули особенности местоположения порта, которое раскрыли с разных сторон.
На основании этого создали четыре концепции фирменного стиля, которые включали в себя:
- логотип;
- основную и дополнительную цветовую палитру;
- рекомендации по шрифтам;
- графические элементы: паттерны, декоративные линии, текстуры.
В каждой концепции мы подчеркнули особенности местоположения порта, которое раскрыли с разных сторон.
Концепция 1
Данная концепция фирменного стиля строится на ключевых образах: судно, контейнер и буква «П», символизирующая название порта. Эти элементы гармонично объединены в логотипе, выполненном в форме герба. Фирменные графические элементы дополняют и усиливают общую идею. Цветовая гамма, в основу которой лег темно-синий и голубой, придает стилю строгость и лаконичность, отражая фундаментальность и надежность компании.
Концепция 2
Концепция фирменного стиля подчеркивает близость порта к Азии. Визуальные образы включают движущееся судно, круг как символ цикличности процессов и иероглиф, добавляющий восточный колорит. Цветовая палитра состоит из четырех основных оттенков: васильковый, глубокий фиолетовый, голубой и темно-синий. Такая палитра создает глубину и отражает многогранность.
Концепция 3
Концепция фирменного стиля акцентирует внимание на город, где расположен порт. Логотип объединяет ключевые символы Владивостока: маяк и якорь. Буква «П», вписанная в логотип, отсылает к названию порта. Цветовая гамма выполнена в «морских» тонах, что усиливает связь с морем и придает стилю свежесть и легкость.
Концепция 4
Здесь мы подчеркнули специфику деятельности компании, используя образ портового крана. Одновременно с этим легко угадывается местонахождение порта: кран напоминает Золотой мост, под опорой которого и расположен порт. Это создает четкую ассоциативную связь с локацией и деятельностью компании.
В ней мы доработали логотип, добавив образ контейнера. В этой концепции мы обратились к визуальным кодам, свойственным для региона:
- образы моря, волн, судов;
- оттенки, ассоциирующиеся с водой, небом, металлом.
Для дальнейшей работы была выбрана четвертая концепция
Ориентируясь на минималистичный и современный стиль, в основу заложили строгие линии, монохромные палитры — простой, но мощный визуальный язык.
Созвонимся на 30 минут, чтобы обсудить вашу задачу и ответить на вопросы. Вышлем вам презентацию с аналогичными кейсами и примерной стоимостью
Получите персональное коммерческое предложение под вашу задачу
Обсудить проект
Наша команда имеет большой опыт создания сайтов для портовых компаний, что позволяет нам глубоко понимать специфику отрасли и потребности целевых аудиторий. Именно потребности потенциальных посетителей сайта стали основой для разработки его структуры.
Создание сайта на Тильде
Аналитика
На первом этапе мы выделили ключевые группы пользователей:
Далее определили ключевые потребности каждой группы и задачи сайта, которые должны их удовлетворять. Это позволило нам создать структуру, которая закрывает запросы всех пользователей, делая сайт универсальным и удобным ресурсом.
Перед началом разработки мы также изучили лучшие практики, проанализировав не только сайты портовых компаний, но и проекты транспортных, логистических и IT-компаний с сильной визуальной эстетикой и удобным интерфейсом. Это помогло учесть современные тренды и создать функциональный продукт. Кроме того, мы провели анализ существующего сайта, чтобы понять, какие страницы наиболее востребованы, где возникают сложности с навигацией и какие материалы требуют обновления. Это стало важной основой для проектирования новой структуры и контента.
- Действующие и потенциальные клиенты.
- Действующие и потенциальные партнеры.
- Акционеры и инвесторы.
- Кандидаты, заинтересованные в работе.
- СМИ и журналисты.
- Широкая общественность.
Далее определили ключевые потребности каждой группы и задачи сайта, которые должны их удовлетворять. Это позволило нам создать структуру, которая закрывает запросы всех пользователей, делая сайт универсальным и удобным ресурсом.
Перед началом разработки мы также изучили лучшие практики, проанализировав не только сайты портовых компаний, но и проекты транспортных, логистических и IT-компаний с сильной визуальной эстетикой и удобным интерфейсом. Это помогло учесть современные тренды и создать функциональный продукт. Кроме того, мы провели анализ существующего сайта, чтобы понять, какие страницы наиболее востребованы, где возникают сложности с навигацией и какие материалы требуют обновления. Это стало важной основой для проектирования новой структуры и контента.
Разработка структуры и контента
На основе проведенного анализа мы разработали разделы, ориентированные на разные целевые группы. Это позволяет каждой группе пользователей быстро находить нужную информацию и упрощает взаимодействие с портом.
Например, в разделе «Клиентам» мы разместили информацию о порядке заключения договоров, типовые бланки и отдельные вкладки для различных типов контрагентов: экспедиторов, агентов и автоперевозчиков.
Например, в разделе «Клиентам» мы разместили информацию о порядке заключения договоров, типовые бланки и отдельные вкладки для различных типов контрагентов: экспедиторов, агентов и автоперевозчиков.
На главной странице мы добавили новостной блок, который играет ключевую роль для порта. Он позволяет оперативно информировать пользователей обо всех актуальных изменениях. Также мы добавили видео, демонстрирующее масштаб порта, что помогает новым клиентам быстро понять его возможности и преимущества. В конце страницы мы разместили схематичное изображение, которое наглядно показывает структуру и функционал порта.
Для пользователей мы создали полезные сервисы, которые позволяют посмотреть расписание поездов и флота, а при наличии доступа перейти в информационную систему ВМПП.
Так как порт — режимный объект, был создан раздел «оформить пропуск». В данном разделе собрана информация, как оформлять разные типы пропусков, какие документы нужно заполнять. Также реализован переход на подачу электронной заявки на пропуск, которую можно отследить. Эта функция заметно упростила процесс оформления пропусков.
Для пользователей мы создали полезные сервисы, которые позволяют посмотреть расписание поездов и флота, а при наличии доступа перейти в информационную систему ВМПП.
Так как порт — режимный объект, был создан раздел «оформить пропуск». В данном разделе собрана информация, как оформлять разные типы пропусков, какие документы нужно заполнять. Также реализован переход на подачу электронной заявки на пропуск, которую можно отследить. Эта функция заметно упростила процесс оформления пропусков.
Наша команда тщательно изучила деятельность порта, погрузившись в каждое направление работы. Все направления были добавлены в раздел «Услуги». Для каждого создан лендинг, который описывает возможности, преимущества и мощности порта. Например, в разделе «Перевалка грузов в контейнерах» потенциальный клиент может узнать обрабатываемые типы грузов, доступные морские линии, технические мощности и преимущества порта. На каждом лендинге также указаны контакты ответственных сотрудников, что упрощает коммуникацию и делает процесс взаимодействия максимально удобным.
На основе созданной структуры мы разработали прототипы, которые стали следующим шагом в создании современного и удобного ресурса.
На основе созданной структуры мы разработали прототипы, которые стали следующим шагом в создании современного и удобного ресурса.
Создание прототипа
После разработки структуры мы перешли к прототипированию. Этот этап позволяет минимизировать риски и обеспечить успешный старт разработки. Он представляет собой создание интерактивной модели будущего сайта, которая визуализирует его структуру, навигацию и основные функции. Это схематичный макет с ключевыми элементами: заголовками, текстовыми блоками, набросками изображений, кнопками и формами. Он включает кликабельные кнопки, переходы между страницами и выпадающее меню. Прототип позволил протестировать удобство навигации и взаимодействия.
После согласования мы приступили к разработке концепций дизайна.
После согласования мы приступили к разработке концепций дизайна.
Создание концепций дизайна
Мы предложили клиенту две концепции согласно разработанному фирменному стилю. Первый вариант был более современный и технологичный с использованием ярких акцентов и легких анимаций для привлечения внимания.
Второй вариант мы сделали более строгим и минималистичным, отразив морскую тематику через текстуры и цветовые переходы.
После выбора визуального решения мы приступили к созданию сайта. Чтобы сайт соответствовал современным требованиям доступности, мы создали версию для слабовидящих и перевели сайт для иностранных партнеров на английский язык.
Выбор был сделан в пользу первого варианта
В итоге мы создали современную айдентику и корпоративный сайт под ключ для владивостокского порта ВМПП, который не только отражает специфику портовой деятельности, но и учитывает потребности всех целевых групп.
Сайт получился легким для восприятия, удобным и полностью адаптированным под задачи компании. Он демонстрирует ключевые преимущества порта и упрощает взаимодействие с клиентами.
Теперь «Первомайский» порт выглядит как надежный и прогрессивный партнер.
Сайт получился легким для восприятия, удобным и полностью адаптированным под задачи компании. Он демонстрирует ключевые преимущества порта и упрощает взаимодействие с клиентами.
Теперь «Первомайский» порт выглядит как надежный и прогрессивный партнер.
Результат
Над проектом работали
менеджер проекта, аналитика
Валентин Ревуцкий
фирменный стиль
Егор Суслин
прототипирование, дизайн и верстка
Татьяна Руденко
прототипирование, дизайн и верстка
Даяна Хасанова
дизайн-концепция
Александр Коломеец
Вам также может понравиться