Werkveilig

Контекст

Представить направления Instituut voor Veiligheid & Milieu для посетителей с разными задачами: найти обучение, разобраться в услугах или обратиться за поддержкой. Большой объём содержания должен оставаться обозримым.

Задача

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

Решения

1. Несколько входов, одна архитектура

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

2. Каталог обучения как рабочий инструмент

   В UX/UI проработан переход от общего направления к конкретному курсу. Каталог получает собственную информационную иерархию и адаптивное представление.

3. Контакт в нужной точке

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

4. Система для объёмного содержания

   Exo 2 объединяет навигацию, заголовки и основной текст. Контраст веса и размера помогает различать уровни; цвет разделяет поверхности и акценты.

Что сделали

1. Архитектура и пользовательские маршруты

   Разложили большой объём информации по услугам, отраслям, обучению и экспертным материалам. Спроектировали путь к нужному направлению и соответствующей точке обращения.

2. UX/UI и визуальная система

   Разработали согласованные интерфейсы главной, каталога и внутренних направлений. Подготовили desktop и mobile компоновки, сохранив узнаваемость и понятную иерархию.

3. Разработка и настройка

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

4. SEO, проверка и запуск

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

Визуальная система

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

Семейство

Exo 2 · веса 300, 400, 700, 800

Основной текст

16 px · 300 · интерлиньяж 1.5

H1

800 · clamp(32 px, 4vw, 52 px) / 1

H2 / H3

28–44 px / 24–28 px · вес 800

Навигация / кнопки

18 px, 800 / 16 px, 700

Контейнер

1280 px; широкие блоки до 1456 px; поля 24 px

Контрольные ширины

640 · 768 · 1024 · 1280 · 1456 px

Сценарии и материалы

Направление на главной → услуги или каталог обучения → конкретное предложение → обращение. Отраслевые разделы и экспертные материалы дают дополнительные входы в ту же структуру.

Продвижение

Провели SEO-оптимизацию, настроили личный кабинет Google Ads, запустили рекламу и продвижение сайта в поиске.

Что реализовано

IVM получил действующий корпоративный сайт для рынка Нидерландов. Компания, услуги, обучение и экспертные ресурсы объединены в одну структуру. Посетитель может выбрать направление и обратиться по своей задаче с широкого или мобильного экрана. Архитектура, дизайн и полная реализация доведены до запуска в одном проекте.

Инструменты и реализация

UX/UI · адаптивная веб-разработка · HTML / CSS · SEO-структура