Корпоративный сайт компании
«Соликс Биосистемз Восток»
Компания «Соликсант», ранее известная как «Соликс Биосистемз Восток», занимается разработкой и культивированием микроводорослей, а также продукции на их основе. Соликсант — инновационный лидер в России по своей отрасли. Соликсант является резидентом «Сколково» и РГУ нефти и газа им. Губкина, партнер Роснано, лауреат научных премий.
Для компании «Соликсант» разработан современный интерактивный сайт. На главной странице размещен интерактив — взгляд через микроскоп. На фоне, который симулирует также шум, который виден в микроскоп, движутся микроводоросли.
Изначально задачи делать интерактив не было. Была другая задача — показать в дизайне патриотизм в виде триколора либо известного русского ученого.
Триколор лег даже неплохо. Но фотографий русских ученых в хорошем качестве оказалось найти невозможно.
![](drafts/index-4.jpg)
Поэтому решили оставить триколор, а ученого взять зарубежного. Лайнуса Полинга, например.
![](drafts/index-2.jpg)
Теперь уже плох стал триколор. Убираем и берем другую фотку.
![](drafts/index-5.jpg)
Слишком мрачно. Пробуем фотографии из лаборатории.
![](drafts/index-3.jpg)
Тоже плохо. В ходе обсуждения рождается идея поставить видео с микроскопа на главную страницу. Клиент присылает отличные фотографии микроводорослей.
![](drafts/micro.jpg)
Но вот проблема: видео записывается максимум с частотой 16 кадров в секунду. На сайте его использовать нельзя. Принимаем решение запрограммировать полет микроводорослей. Для этого вырезаем их с фотографии, а также добавляем плавающие точки из глазного хрусталика и фоновый шум. Заставляем водоросли плыть из угла в угол и отклоняться от курсора мыши. Получается отлично!
![](drafts/parts.jpg)
Водоросли реагируют на движение мыши, отклоняясь от траектории. Также на фоне видны искажения хрусталика, те самые «мушки» перед глазами, которые также реагируют на мышь.
На сайте используется современное меню-бургер с богатой анимацией и эффектом размытия.
Каждый внутренний раздел сайта оформлен в виде длинной страницы, подробно рассказывающей о продукции и технологиях компании.
![](safari2.jpg)
Для внутренних страниц созданы оригинальные иллюстрации.
Иллюстрации рисовались когда дизайн уже был готов, для демонстрации клиенту использовались рисунки с другого сайта.
![](drafts/page.jpg)
В финальной версии все картинки уже свои собственные.
![](drafts/solasta.jpg)
Зато с фотографиями проблем не было. Лаборатория компании сама по себе образец крутого современного интерьера, в ней ослепительно чисто, а цвета играют то кислотно-зеленым, то кислотно-сиреневым.
![](drafts/photos.jpg)
![](medicine.jpg)
Отдельные элементы иллюстраций стали основой для анимаций и интерактивов на сайте.
Схема разработки нового продукта представлена в виде митоза.
![](scheme.jpg)
Страницы «Исследования» и «Лаборатория».
![](swap-1.png)
![](swap-2.png)
Сайт обладает приятной современной типографикой и выполнен в «лабораторных» зеленых и фиолетовых цветах.
![](table.jpg)
Новостям компании посвящен отдельный раздел. Новости оформлены в виде плитки с разной шириной ячеек, которая подбирается динамически в зависимости от длины текста.
![](safari3.jpg)
Для сайта также изготовлена мобильная версия.
![](iphones.png)