Создание промо-сайта Школы анализа данных «Билайна»
День 1
Заказчик присылает прототип и комментарии к нему:
― нужны стильные картинки;
― нужен ясный рассказ о школе, после которого люди будут записываться на обучение;
― cайт должен работать на всех устройствах.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-01.jpg)
Большие данные представляют собой огромное количество малых данных. Такая структура напоминает многогранники и кристаллы. Чем больше знаний ученик получит в ходе обучения, тем многограннее будет кристалл.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-02.jpg)
День 2
Чтобы сократить время работы, делаем сайт на «Бутстрапе», кастомизируя готовые шаблоны. Создаем макет, где учитываем особенности верстки. Заполняем всю страницу кристаллами и реальными снимками с лекций, придумываем метафоры и заголовки.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-03.jpg)
Дни 3 и 4
Пробуем разные варианты: кристаллы, многогранники, микросхемы, графы.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-04.jpg)
Для более ясного понимания того, на кого ориентирована школа, создаем книжную полку; названия книг подскажут, о чем пойдет речь.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-05.jpg)
Одно из главных преимуществ школы — это преподаватели. Увеличиваем масштаб фотографий, готовимся к фотосессии.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-06.jpg)
Пробуем сделать фотореалистичные кристаллы на черном фоне.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-07.jpg)
Добавляем каустику.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-08.jpg)
Параллельно создаем анимацию профессионального роста.
Арт-директор: Очень предсказуемо. Ракурс не меняется, и поэтому все выглядит простовато, по-сельски.
День 5
Растущий кристалл из «Учебного плана» и парящие кристаллы на странице должны быть выполнены в едином стиле. А чтобы вырастить кристалл и заснять процесс на видео, нет времени. Возвращаемся к абстрактным кристаллам и пробуем сделать новую анимацию.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-09.jpg)
Отрисовываем векторную графику.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-10.jpg)
День 6
Пока верстается страница, продолжаем поиски формы и цвета.![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-11.jpg)
Готовим анимацию для сайта.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-13.jpg)
Дни 7 и 8
Рендерим и верстаем.
Тем временем появляются готовые фотографии учеников. Арт-директор просит добавить к ним подписи или картинки.
![](http://img.artlebedev.ru/everything/beeline/bigdata/process/beeline-bigdata-process-15-1.jpg)
День 9
Ставим на сайт финальные изображения кристаллов с каустикой и смотрим, как это будет выглядеть на верстке. Ловим лучи света и отслеживаем баги.
День 10
Допиливаем мелочи, после чего готовим обновленный архив страницы.