Сайт компании по организации дорожного движения: кейс ИнтелТранс
Для компании ИнтелТранс, которая проектирует организацию дорожного движения и работает с подрядчиками и государственными заказчиками, мы с нуля сделали корпоративный сайт с очень большим числом услуг, схем и разделов: дизайн и разработку.
2,5 месяцаот первого макета до готового сайтамесяц дизайн, полтора месяца разработка
Сайт готовдизайн и разработка завершены
Факты о проекте
- Срок
- 2,5 месяцадизайн 1 · разработка 1,5
- Тип проекта
- Корпоративный сайт, 2023
- Ниша
- Проектирование организации дорожного движенияB2G и работа с подрядчиками
- Состав работ
- Дизайн и разработкас нуля
ИнтелТранс проектирует организацию дорожного движения и работает с подрядчиками и заказчиками, в том числе из государственного сектора. Мы сделали для неё корпоративный сайт с нуля: дизайн и разработку. Сайт большой: много услуг, много схем, много разделов, и у всего этого своя страница. Срок 2,5 месяца: месяц на дизайн и полтора на разработку.
Задача клиента
Услуги компании узкие и их много, а заказчик у неё серьёзный: ему нужно быстро понять, что здесь делают, как идёт работа и можно ли доверять. Сайт должен был объяснить сложное просто.
- Разложить множество узких услуг по группам, чтобы нужную находили за пару кликов.
- Показать, как идёт работа: обследование, разработка документов, согласование.
- Показать примеры проектов и схем по типам.
- Дать раздел с документами и полезной информацией для специалистов и заказчиков.
- Рассказать о работе в компании: страница вакансий.
- Дать связаться с компании с любой страницы: заметная круглая кнопка «Получить консультацию».
Что мы сделали
- Структура большого сайтаУслуги разложены на группы, у группы своя страница, внутри неё раскрывающиеся строки, у каждой услуги отдельная страница.
- Дизайн с нуляСтрогий светлый стиль с бирюзовым и лаймовым акцентами; версии для компьютера, планшета и телефона.
- Главная страницаГлавный экран с тремя шагами работы, услуги, карта работ, примеры проектов, форма обращения.
- УслугиСписок услуг, страницы групп с раскрывающимися строками, страница каждой услуги с фото и описанием.
- ПортфолиоПримеры проектов и схем по типам: комплексные схемы, на период эксплуатации, образовательные учреждения, временные схемы, транспортное моделирование.
- Информация, вакансии, контактыНормативные документы, полезные статьи, частые вопросы, страница вакансий и страница контактов.
- Разработка с нуляВсе страницы подстроены под экран от компьютера до телефона.
Масштаб проекта: много услуг, документов и схем
Это не сайт-визитка. За каждым пунктом меню стоит работа проектной компании: обследования, документы, согласования, разрешения, схемы. Всё это нужно было показать так, чтобы заказчик не запутался и нашёл свою услугу за пару кликов. Поэтому сначала мы разбирали, как устроена работа, и только потом рисовали страницы.
Путь заказа, который объясняет сайт
- Проведение обследованийПервый шаг работы вынесен на главный экран: заказчик сразу видит, с чего всё начинается.
- Разработка документовУслуги описаны как документы и схемы, которые получает заказчик, а не как общие слова.
- Согласование документовСогласования и разрешения — отдельная забота компании, поэтому третий шаг стоит рядом с остальными.
Из чего состоит такой сайт
- Много узких услугУслуги собраны в группы. Внутри группы раскрывающиеся строки: жилая застройка, период работ, парковки, заправки и другие, каждая со своим описанием.
- Согласования и разрешенияТексты об этапах и документах написаны так, чтобы их читал и специалист, и руководитель.
- Документы и справкаРаздел «Информация»: нормативные документы, полезные статьи и частые вопросы с поиском.
- Схемы проектовВ портфолио чертежи и схемы организации движения, разложенные по типам: комплексные схемы, временные схемы, транспортное моделирование.
- ИнфографикаКарта работ с точками, значки направлений, карточки примеров с крупными подписями: сложное видно с первого взгляда.
- Страницы под все случаиГлавная, о компании, услуги, группа услуг, страница услуги, портфолио, страница проекта, вакансии, информация, контакты и отдельная страница о системе проектирования заказчика.
Стиль: логотип, цвета, шрифт
Строгий светлый фон, бирюзовые заголовки и один яркий лаймовый акцент на кнопках. Всё спокойно и читаемо: сайт рассчитан на специалистов и заказчиков, которым нужно быстро разобраться.
Круглая кнопка на углу фотоЗаметная лаймовая метка с белым ободком стоит на фотографии каждой страницы: обращение можно оставить с любого места сайта.
- #008B8BБирюзовый: шапка, заголовки, подвал
- #93AA00Лаймовый: кнопки и круглая метка
- #272727Графит: основной текст
- #FEFFF5Светлый фон страниц
- Заголовки и менюОрганизация дорожного движения
Inter: ровный рубленый шрифт, читается и в крупных заголовках, и в меню.
- Основной текстПроект организации дорожного движения: документация, схемы, согласование.
Спокойный шрифт для описаний услуг: читается на компьютере и на телефоне.
Макеты: компьютер, планшет, телефон
Каждую страницу мы нарисовали для трёх размеров экрана: компьютера, планшета и телефона. На картинках макеты дизайна: тексты и фотографии на них показывают расположение блоков.
На компьютере
На планшете
Главная 
Группа услуг
На телефоне
Главная 
Группа услуг
Все страницы сайта
- Главная
- О компании
- Услуги
- Группа услуг
- Страница услуги
- Примеры работ
- Страница проекта
- Система проектирования
- Информация
- Вакансии
- Контакты
Что получил клиент
Большой корпоративный сайт, где услуги, документы и схемы разложены так, чтобы заказчик быстро нашёл нужное.
- Сайт готовДизайн и разработка корпоративного сайта с нуля за 2,5 месяца.
- Все услуги на сайтеГруппы услуг, страницы групп и отдельная страница каждой услуги.
- Портфолио схемПримеры проектов и схем по типам, со страницей каждого проекта.
- Документы и вакансииРаздел «Информация» и страница вакансий на том же сайте.
Срок и этапы
2,5 месяца от первого макета до готового сайта
Комментарий студии
У ИнтелТранс много узких услуг, документов и схем, и показать их одной страницей нельзя, поэтому мы построили сайт слоями: группа услуг, список внутри неё, отдельная страница на каждую услугу, портфолио и раздел справочной информации. Бирюзовый, лаймовый и графитовый на светлом фоне сделали сайт строгим и спокойным, а круглая кнопка на фото всегда под рукой. Дизайн занял месяц, разработка полтора, и сайт готов.
GreenOakвеб-студия
Много услуг и сложные процессы? Сделаем сайт, который их объяснит
Расскажите, чем занимается ваша компания и что должен понять заказчик. Скажем, что можно сделать, за какой срок и сколько это стоит.
- Срок
- 2,5 месяца
- Тип
- Корпоративный сайт
- Состав
- Дизайн, разработка с нуля
- Результат
- Сайт готов
Обсудить проект
Опишите задачу в двух-трёх фразах. Ответим и предложим варианты.
Понравился проект? Хочу такой же сайт: условия и цены · Другие примеры работ