Первым делом едем на завод и смотрим, как устроено производство.
Изучаем ТЗ и прикидываем сценарную структуру сайта.
Делаем первый подход на понимание.
Получается довольно шаблонно, поэтому играем с сеткой дальше.
Изо всей полученной массы пробуем развить тему с левой панелью.
Арт-директора вдруг осеняет. Он просит сбить на главной огромную башню из кабелей. Прикидываем скетч.
Направление с башней заслуживает внимания. Пробуем примерить к новой концепции предыдущие наработки.
Останавливаемся на белом варианте и собираем прототип с остальными страницами вдоль основного сценария.
За время подготовки презентации появляется понимание того, что нужны имиджевые баннеры, которые придадут башне объем и вовлекут зрителя в интерактивное взаимодействие.
Пробуем разные формы баннеров, но в итоге останавливаемся на кольце.
Арт-директор советует на всякий случай показать заказчику все придуманные варианты. Собираем и демонстрируем.
Заказчик выбирает вариант с башней и просит показать механику скролла на странице.
Переходим к проработке остальных страниц. Первым делом проектируем каталог.
Параллельно со сборкой сайта в отделе графдизайна идет создание каталога. Берем на вооружение наработки по фильтрации характеристик каталога.
Прорабатываем механику фильтров на прототипе.
Рисуем для главной страницы сайта несколько разделанных кабелей. Берем за основу реальные образцы.
Все кабели, по сути, являются набором цилиндров разных диаметров, изгибов и текстур. Программу для рисования следует выбирать таким образом, чтобы не изображать каждый кабель заново. Решаем использовать 3D-редактор с последующим доведением до ума в «Фотошопе». Для решения этой задачи прекрасно подходит «Синема 4D». Начинаем осваивать.
Готовим первую, самую несложную модель.
Здесь нарисовано 13 цилиндров. К жилам применен модификатор Twist, который является основным для изображения жил остальных кабелей. Таким же образом, только плотнее, закручен контактный проводник, который проходит вдоль экрана кабеля.
Делаем первый рендер.
Дорабатываем в «Фотошопе».
В некоторых моделях степень и вложенность скрученности повышается, но с этим справляется все тот же модификатор с правильной группировкой цилиндров.
Некоторые марки кабелей оснащаются броней в виде оплетки. Для нее тоже находим метод исполнения.
Все модели обязательно выстраиваем в ряд, чтобы не терять преемственности.
Предусматриваем для иллюстраций хороший запас разрешения.
На основе данных изображений пишем для заказчика правила создания новых.
Прикидываем механику быстрого заказа. Сделать покупку на сайте нельзя, но важно сообщить менеджеру условия максимально подробно.
Для разводящей страницы «О компании» придумываем статистический баннер и ищем метафоры для нескольких вариантов.
Пробуем оживить вариант с кабелями.
Продолжаем делать остальные макеты. Для информационных страниц о производстве и разработках выбираем снимки из материалов специально проведенной фотосессии.
На страницу продажи добавляем эффект автоматического переключения изображений при скролле.
Собираем типовую страницу статьи в максимально полном варианте: графики, формулы, списки, таблицы, иллюстрации.
Страница проектов и клиентов требует классификации по категориям и весу. Ищем правильную подачу.
Делаем подробную страницу с контактными данными, картой и ценными указаниями для актуальной геолокации.
Для удобства опытных пользователей делаем поиск по выбранным параметрам продукции. Предусматриваем более привычный вариант с поисковой строкой и выдачей, разбитой на категории.
Ищем метафоры для страниц ошибок.
Рисуем чистовую вспомогательную графику, правим верстку и открываемся.
