Без четкого ТЗ результат – награда на AWWWARDS или Инструкция как разработать дизайн инфопортала по BIM

Если у вас в проекте много текста/фото и другого контента (а ТЗ нет и не будет) и вы не знаете, что со всем этим делать, то вам сюда. Рассказываем по шагам как сделать так, чтобы получилось хорошо.

Есть 2 типа клиентов:

2. С ТЗ, которое состоит из сотни листов и контента (при этом иногда это структурировано в виде документа, а иногда это просто ссылки на кучи и кучи папок с текстами и картинками)

Как вы догадались, наш клиент – это второй клиент 😄

Немного сухой статистики. Если неинтересно, можно перейти к следующему пункту.

CSD – группа компаний по направлениям:

Единственный официальный дилер компании Autodesk в России

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

Запрос от клиента: наши компании набирают обороты на рынке, в связи с чем растет потребность в расширении дизайн-команды в том числе.

Задача: перед нами поставили задачу систематизировать все знания и данные по BIM технологиям в рамках одного веб портала.

Краткое описание проекта: портал для формирования общей концепции цифровизации девелопмента:

Цель создания сайта: позиционирование, лидогенерация, прямые продажи и обучение.

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

Требования и ограничения по проекту:

Все это мы отправили нашим дизайнерам

После продолжительных созвонов и систематизации информации мы подготовили структуру проекта, которая содержит необходимые разделы для покупателей ПО, образовательные, информационные и вспомогательные

Итого получилось 27 уникальных страниц. И все с текстом, большим количеством текста, да-да.

Редко какой дизайн начинается не с главной страницы, т.к. она задает основу всему дизайну сайта.

Мы подобрали рефересы, чтобы синхронизировать наше видение проекта с заказчиком.

Часть из этих референсов клиенту понравилась, часть мы отмели сразу.

Мы выбрали более сдержанный стиль с линиями, который напоминал был интерфейс приложения по проектированию и модульную верстку текстов. Т.к. брендбук диктовал нам условия работы, то мы остановились на серо-синей палитре.

Главную страницу мы отрисовывали очень долго, потому что все время что-то не помещалось, а выкидывать ничего нельзя было.

Самое классное произошло с блоком Уровни зрелости BIM. Заказчик просто прислал огромную таблицу, которую нужно было превратить в интерактивный блок.

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

Ниже приведены архивные примеры вариантов одного экрана, которые мы делаем прежде чем показать его заказчику. И только после внутреннего просмотра и отбора, заказчику мы показываем 1-3 варианта, чтобы он выбрал.

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

Ну и не будем томить больше и держать интригу – вот, что у нас получилось:

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

А вот как реально работает страница с кейсом

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

Честно признаемся, мы считаем, что времена статического дизайна в вебе закончились уже лет 10 как. Камон, на дворе уже 2023 год - мы хотим интерфейсы как у Тони Старка, а не шаблоны))

Поэтому каждый UI-элемент интерфейса сайта имеет анимацию и реагирует на взаимодействия

Т.к. наша команда встроилась в процессы уже существующей инхаус-команды то нам требовалось писать код в соответствии со стандартами компании.

Как это происходило?

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

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

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

Мы довольны получившимся результатом, но самое главное, что доволен клиент.

Кроме самой высокой награды (довольного клиента), которую мы могли получить, проект также получил международные награды на AWWWARDS, CSSDesignAwards, CSSNectar, BESTCSS, WebGURU и др.