Главная Новости

Создание сайта компании «Генотек»

Опубликовано: 06.09.2018

Параллельно с  созданием упаковки занимаемся разработкой сайта. Его главная задача — презентовать все виды тестов.

Прикидываем черновик карты.

Самая занимательная часть — персональные тесты. Нужно заинтересовать зрителей и в итоге продать им услугу.

Особенность генетических тестов «Генотека» — разделение по темам: «Диета и спорт», «Планирование ребенка», «Таланты и предрасположенности», а также «Здоровье и долголетие». Первый тест дороже, но после него на все последующие предоставляется скидка. В итоге покупатель выбирает только интересующие его сферы жизни или со временем приобретает весь набор.

Прикидываем, кому каждый тест больше подходит.

Думаем, как презентовать генетику по темам.

Оставляем абстрактные фишки на потом. Пробуем сыграть на контрасте масштабов: клетка как «фабрика генетики»; глаз как демонстрация врожденных особенностей человека — цвет, разрез; балерина как представление таланта и реализации человеческих возможностей.

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

Ищем впечатляющий графический прием. Когда выбор останавливается на АСКИИ-узорах, «скармливаем» генератору кучу картинок, чтобы найти что-то подходящее.

Пробуем совместить с анимацией.

Накопив набор приемов, беремся за наполнение. Решаем строить сайт изнутри: отталкиваемся от содержания конкретных страниц. Например, инструкции «Как сдать тест» и страницы теста.

Для страниц тестов вырисовывается структура повествования:

— обложка с вводным текстом;

— описание проблемы и жизненных ситуаций по теме;

— врезка про генетические факторы, влияющие на выбранную сферу жизни;

— рассказ о пользе исследования;

— описание будущих результатов;

— инструкция по покупке и сдаче теста.

Совместно с заказчиком работаем над содержимым страницы каждого теста, начинаем с текстового каркаса.

Пока идет работа над материалами для страниц тестов, поднимаемся на уровень выше и думаем про главную и другие разводящие страницы. К этому моменту уже вырисовывается внешний вид упаковки. Делаем ее центром внимания. Собираем интерактивный прототип для демонстрации механики главной и разводящих страниц.

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

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

Для теста «Таланты и спорт» решаем не ограничиваться одной фотографией или видео и запустить хаотичную карусель объектов — творческого инвентаря, — которые по скроллу складываются в разные образы: спортсмена, инженера, музыканта.

Для этого запускаем большой фотоконвейер: разыскиваем нужный реквизит, фотографируем, обтравливаем.

Готовим черновые обложки для тестов.

Собираем каркасы всех страниц тестов, оцениваем, чего не хватает, и смотрим, где провисает содержимое.

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

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

Для страницы про генеалогию просим Оксану принести фотографии из семейного архива.

В финальной иллюстрации разделяем снимки по отцовской и материнской линиям и размещаем их по разные стороны от фотографии героини.

Для теста про здоровье и риски заболеваний находим медицинские объекты, результаты тестов, медицинскую книгу и справки от врача.

Для теста про планирование детей собираем объекты, с которыми ребенок и родители сталкиваются в первый год жизни младенца.

За вступлением следует блок о влиянии генетики на каждую сферу человеческой жизни. Рисуем «самую красивую иллюстрацию строения клетки в интернете».

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

Рисуем дополнительные иконки и техграфику.

Не забываем и про фотографии для других разделов: приезжаем в гости к заказчику, снимаем лабораторию, оборудование, делаем общее фото сотрудников.

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

Беремся за верстку основательнее. Рисуем типовую страницу и параллельно финализируем страницы тестов.

Снимаем и обрабатываем еще массу снимков, отрисовываем кучу технической графики.

Утверждаем готовые картинки и рисуем иконки поощрений для блока с личным кабинетом.

Время подумать о «би-ту-би». Прикидываем внешний вид будущей страницы.

Заказчик: Похоже на Сайлент Хилл.

Добавляем радуги.

На основе готовых фотографий рисуем оборудование для первой вкладки страницы «Лабораториям».

Ищем на сайте производителя физические размеры приборов и строим в 3D-редакторе болванки для будущей картинки.

Выбираем наиболее подходящие фотографии, нарезаем на плоскости и натягиваем на болванки.

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

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

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

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

Прикидываем первые варианты страниц генов.

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

Подбираем образы для обложек и видеоролики для премиум-тестов.

Работаем над главной страницей. Пробуем сделать коробку три-джей-эсной, просим визуализатора создать модель. Закидываем ее в «Три-джи-эс-эдитор».

Долго мучаемся с перспективой и анимацией. Боремся с тормозами и расставляем свет.

Заказчик: Похоже на холодильник. И с первого взгляда не понятно, что это набор для сдачи генетического теста.

Прикидываем другие варианты, демонстрирующие масштаб коробки.

Побеждает последовательный рассказ со взрыв-схемой. Берем его в работу.

На разводящих страницах коробки превращаются из 3D-моделей в красивые рендеры. Потом они вовсе исчезают со страниц по просьбе заказчика.

Тем временем технологи вовсю трудятся над сайтом.

Вносим пару десятков последних штрихов и запускаем сайт.

rss