Знакомимся с материалами и делаем первый подход в соответствии с созданным в студии фирстилем проекта.
Арт-директор просит не выносить на экран карту и подумать над связью главной страницы с основными графическими элементами фирстиля. Пробуем.
Не нравится слишком сильная схожесть с буклетом. Нужно взять за основу логотип. Перерабатываем подход и сразу сбиваем все в прототип.
Арт-директор: Типа, норм, но не бомба, потому что нет композиционно главной вещи, важного сообщения, и первый экран бубнит.
Набрасываем еще варианты в рамках выработанной сетки, за основу берем уже готовые иллюстрации из отдела графдизайна.
Арт-директор: 1990 год.
Краснеем и думаем над альтернативным вариантом.
Арт-директор: Газопровод — это же не только труба. Это энергия, идеология и все такое. Еще и наземная часть. Если попробовать плитку, но круглую? Тогда в круги будет вписываться сколько угодно тем: флаги стран, иконки и т. п.
Кладем плитку.
Арт-директор: Заебочек. Только хочется при ховере текстом писать, что к чему. Давай плашку навылет распиздячим, чтобы выглядело проще. И меню «Весь сайт» сделаем с гамбургером.
Обновляем прототип и показываем клиенту.
Концепция не принимается.
Проект переходит в руки другого дизайнера. За день запойного рисования развиваются уже готовые варианты и рождаются новые. Например, лепестки вокруг центра страницы. При нажатии на заголовок четверти конструкция смещается, чтобы лепесток с подробностями занял весь экран.
Или сделать динамичные круги — например, по ховеру круг становится крупнее, уменьшая или расталкивая соседей?
Взять баннеролисталку и уложить под фирменным углом?
Пробуем скрестить два предыдущих варианта.
Или суперзум. Показываем трубу на дне моря: подводная жизнь, робот инспектирует трубопровод, крабик ползет. А при скролле отдаляемся до масштаба карты, чтобы показать, что эта труба лежит между Россией и Турцией.
Арт-директор: Все слишком тяжелое. Спокойно решай задачу сам, без оглядки на прежние эскизы. У тебя в качестве отправной точки есть только обложки и своя голова.
Применяем новый подход, активно используем кольцо с уже принятой обложки, но стараемся не перегрузить.
Сегменты кольца перекидывают на ключевые разделы, для демонстрации собираем прототип.
Арт-директор: Угу, достаточно олдскульно.
Показываем. Клиент принимает концепцию, но просит внести правки. Добавляем ссылки на презентацию для айпада, лайки, меняющиеся факты и общую информацию о проекте.
Делаем подход к внутренней странице проекта. За основу берем версию предыдущего дизайнера, которая понравилась клиенту. Решаем сдружить ее по стилю с главной страницей.
Заодно пробуем подступиться к странице контактной информации. Чтобы было интереснее и функциональнее, разворачиваем карту на всю страницу по ховеру на превью.
Клиент принимает страницу с извергающейся картой, но страница проектов уходит на доработку. Пробуем добавить таймлайн и фирменный скос.
Теперь необходимо подружить карту сайта с утвержденной концепцией, привести все в порядок, определиться со списком страниц и кратким содержанием каждой.
Беремся за чтение длинной бумаги с описанием содержимого сайта по видению клиента. Для наглядности раскладываем документ в визуальную схему, а для понятности описываем каждый блок тезисно. Теперь уже можно разгребать. Самый большой бардак — в разделе проектов. Вычленяем два основных направления: «Преимущества» (история про устаревший трубопровод, про новые потребности и про то, как всем станет хорошо после реализации проекта) и «Технологии» (технологии, трубы, глубина заложения, уникальность и инновации). Блок об экологичности «улетает» в раздел о защите окружающей среды, лишнее выкидываем, мелкие странички сливаем вместе.
Определившись с максимальной глубиной страниц, думаем о внутренней навигации на сайте. Пробуем разные варианты на обновленной странице проекта и полурыбной странице о технологиях.
Дизайнер отправляется в отпуск, проект подхватывают коллеги.
Анализируем структуру и содержание материалов, вникаем в решения предыдущих дизайнеров. Создаем в «Индизайне» новый файл и раскладываем весь контент по соответствующим страницам.
Для проекта в студии уже нарисована масса иллюстраций, которые нужно выгодно показать на сайте. Изучаем все богатство вариантов.
Распределяем картинки по страницам и быстро разверстываем контент на нескольких основных макетах.
Арт-директор просит отказаться от использования графических букв. Убираем буквы, окончательно определяемся с сеткой и оформляем типовую страницу. Настраиваем текстовые стили документа — это ускорит дальнейшую работу.
Отдаем типовую страницу в сборочный цех и приступаем к остальным макетам. На странице о технологиях строительства изначально хотелось сделать слайдер из двух изометрических судов-трубоукладчиков. Выравниваем корабли, показываем способ размещения и принципы работы слайдера. Рисуем контролы. В последний момент перед сдачей проекта от одного из судов приходится отказаться.
На странице проектов должна быть схема укладки газопровода. В студии уже нарисована нужная иллюстрация — размещаем ее на странице. А также пробуем изобразить свой вариант, в виде снимка из космоса.
Арт-директор не против космоса, но картинку еще предстоит довести до ума. Поэтому пока отдаем технологам версию с плоской картой и переходим к следующим макетам.
Рисуем упрощенную схему для страницы о преимуществах.
Собираем раздел про защиту окружающей среды. Готовим необходимые иллюстрации.
Тем временем часть страниц уже собрана на сервере. Появляются первые проблемы. Например, на сверхшироких экранах главная страница начинает разваливаться, даже если динамически переставлять блоки и менять кегль заголовков. Пробуем перекомпоновать. Заодно начисто отрисовываем графику и придумываем приятные ховеры.
Теперь главная страница выдерживает любую ширину экрана.
Едем дальше. Хочется, чтобы на сайте получился последовательный рассказ о проекте. Поэтому, чтобы не прерывать чтение окончаниями страниц, везде добавляем в футер плавный переход к следующей теме.
Верстаем и сразу собираем на сервере оставшиеся макеты. Доделываем мелкую графику.
Открываем сайт к важной выставке клиента и продолжаем работу.
Строительство газопровода сопровождается появлением большого количества интересных фотографий. Поэтому галерею делаем от обратного: вместо списка альбомов сразу на весь экран показываем самую свежую фотографию (или выбранную в системе управления). Снимки листаются бесконечно: альбомы сменяются сами. В заголовке делаем псевдоссылку на попап с навигацией по альбомам.
В «Контактах» оставляем фичу из концепции с разворачиванием карты на всю страницу, но используем ее исключительно в качестве ховера для перехода на полноценную гуглокарту.
Специально для страницы ошибки 404 погружаем глубоководный дистанционный аппарат на дно моря.
Еще раз проходимся по всем страницам, ловим баги, вносим правки.
Анонсируем проект.
