Корпоративный сайт компании
«Соликс Биосистемз Восток»
Компания «Соликсант», ранее известная как «Соликс Биосистемз Восток», занимается разработкой и культивированием микроводорослей, а также продукции на их основе. Соликсант — инновационный лидер в России по своей отрасли. Соликсант является резидентом «Сколково» и РГУ нефти и газа им. Губкина, партнер Роснано, лауреат научных премий.
Для компании «Соликсант» разработан современный интерактивный сайт. На главной странице размещен интерактив — взгляд через микроскоп. На фоне, который симулирует также шум, который виден в микроскоп, движутся микроводоросли.
Изначально задачи делать интерактив не было. Была другая задача — показать в дизайне патриотизм в виде триколора либо известного русского ученого.
Триколор лег даже неплохо. Но фотографий русских ученых в хорошем качестве оказалось найти невозможно.

Поэтому решили оставить триколор, а ученого взять зарубежного. Лайнуса Полинга, например.

Теперь уже плох стал триколор. Убираем и берем другую фотку.

Слишком мрачно. Пробуем фотографии из лаборатории.

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

Но вот проблема: видео записывается максимум с частотой 16 кадров в секунду. На сайте его использовать нельзя. Принимаем решение запрограммировать полет микроводорослей. Для этого вырезаем их с фотографии, а также добавляем плавающие точки из глазного хрусталика и фоновый шум. Заставляем водоросли плыть из угла в угол и отклоняться от курсора мыши. Получается отлично!

Водоросли реагируют на движение мыши, отклоняясь от траектории. Также на фоне видны искажения хрусталика, те самые «мушки» перед глазами, которые также реагируют на мышь.
На сайте используется современное меню-бургер с богатой анимацией и эффектом размытия.
Каждый внутренний раздел сайта оформлен в виде длинной страницы, подробно рассказывающей о продукции и технологиях компании.

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

В финальной версии все картинки уже свои собственные.

Зато с фотографиями проблем не было. Лаборатория компании сама по себе образец крутого современного интерьера, в ней ослепительно чисто, а цвета играют то кислотно-зеленым, то кислотно-сиреневым.


Отдельные элементы иллюстраций стали основой для анимаций и интерактивов на сайте.
Схема разработки нового продукта представлена в виде митоза.

Страницы «Исследования» и «Лаборатория».


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

Новостям компании посвящен отдельный раздел. Новости оформлены в виде плитки с разной шириной ячеек, которая подбирается динамически в зависимости от длины текста.

Для сайта также изготовлена мобильная версия.
