Admetos — промышленный холдинг и инвестиционная компания, работающая в Германии. Admetos имеет впечатляющий список приобретений компаний. Новый веб-дизайн должен быть удобным, современным и свежим. Кроме того, необходимо было передать ценности Admetos, выделить компанию среди конкурентов и завоевать доверие потенциальных партнеров. Также веб-сайт должен был быть легко управляемым и редактируемым для клиентов.

Чтобы определить требования проекта и понять ожидания, мы сначала провели исследование, чтобы понять, почему Admetos требуются услуги веб-дизайна и разработки. Нам также нужно было определить сегменты целевой аудитории и дальнейшие маркетинговые планы компании.

Поскольку мы являемся ярыми сторонниками методологии Agile, мы с самого начала разбили весь проект на более мелкие этапы. Процесс проектирования был разделен на несколько шагов, а именно прототипирование и дизайн пользовательского интерфейса.

Результат каждого этапа обсуждался с клиентом, что существенно помогло сэкономить время и предоставить качественный продукт.

Во время первого звонка Admetos сообщил о своих основных целях и видении:

• Современный и профессиональный веб-сайт, вызывающий доверие и уважение у нынешних и будущих партнеров.
• Повышение осведомленности о миссии, основных ценностях и практиках Admetos.
• CMS, которую легко поддерживать
• Повышенный имидж бренда, который визуально передает ценности основателей «Совершенство, ответственность и рост».

Представитель компании поделился видением будущего сайта и дал отличное представление направления. Требования можно было свести к следующему: никаких ярких красок, никакого изображения человека или природы на картинках, никакого избыточного количества текста. Цветовая схема была предопределена фирменным стилем компании, значки и маркеры должны были использоваться для облегчения чтения и логической разбивки текста.

Макеты с низкой точностью отражают структуру сайта, расположение элементов и желаемое количество текстов. Это отличный инструмент, чтобы проверить, хорошо ли вы уловили требования проекта, и исправить все несоответствия, прежде чем продолжить. Это необходимый шаг к успешной реализации проекта.

Для Admetos мы строго следовали стандартной системе сетки, чтобы добиться согласованности, передать ощущение порядка, доверия и стабильности.

Чтобы оптимизировать работу и избежать множества правок, мы сначала разработали определенные элементы страницы, а к остальному дизайну применили утвержденные стили.

Основные элементы пользовательского интерфейса — геометрические линии, углы, приглушенные цвета — были выбраны для формирования образа профессионализма, солидности и доверия. Изображения были основным инструментом для передачи ценностей Admetos. Фотографии движущегося города, транспорта, европейской бизнес-архитектуры передают ощущение совершенства, роста и влияния.
Для заголовков был выбран прописной шрифт Tenor Sans. Он элегантный, чистый и разборчивый, что помогает придать веб-сайту деловой вид.

Мы решили использовать WordPress для упрощения публикации постов. Конструктор страниц Elementor был установлен для обеспечения одной из основных целей — простого редактирования контента командой Admetos.

Также мы настроили отдельные админ-панели для разных языков. Это гарантирует, что веб-сайты на разных языках останутся в безопасности и не будут затронуты обновлениями плагинов.

Настройка веб-сайта на втором языке была одной из проблем в процессе разработки, поскольку дизайн необходимо было скорректировать в зависимости от длины текста на немецком языке.

Некоторые карусели пришлось настраивать вручную, так как их содержимое отличается на разных устройствах. Например, на мобильных тексты короче.

Для всплывающих окон с сотрудниками компании пришлось переписать стандартный код плагина Elementor. Во всплывающие окна были добавлены три настраиваемых поля — ссылки на LinkedIn и электронную почту, а также роль сотрудника.

Интересной задачей было добавить в контактную форму теги, обозначающие цель обращения в компанию. Для его реализации нам пришлось работать с DOM-элементами и настраивать переключатели. Добавление и стилизация кнопок «Прикрепить файл» также требовали работы с элементами DOM.

На страницах с разными предложениями работы заголовок контактной формы динамический. Название контактной формы взято из заголовка страницы — Подать заявку на {PAGE TITLE}. Таким образом, отправляя запрос через контактную форму, пользователи видят, на какую вакансию они претендуют.

В результате получился современный сайт, который явно выделяется на фоне конкурентов. Благодаря довольно простой настройке компания может поддерживать веб-сайт и легко размещать вакансии, добавлять новых членов команды.

Руководитель проекта.
UX/UI дизайнер.
WordPress разработчик.