Архитекторы DigitalBakery разрабатывают проекты, используя параметрическое проектирование, BIM-моделирование и другие современные технологии. Они создают архитектуру, которая нравится людям. В основе их работ лежит принцип сочетания красоты и функциональности, они любят математику за её строгость и логику. Поэтому сайт должен был стать таким же современным, технологичным и вызывать удивление и любопытство. Мы предлагали несколько визуальных концепций, которые были достаточно необычны, но им не хватало математической обоснованности. Находкой для проекта стал метод расчета и разбиения поверхностей, создающий структуры необычного вида.

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

Уверены, что профессиональные веб-девелоперы, читающие этот кейс, видели много способов представления проектов. Прямоугольники, квадраты, кружки, иконки, пролистывание больших фоновых изображений и т. д.и т. п. Мы не придумали новый вид «а-ля многогранники», вовсе нет. Представление портфолио было реализовано на совершенно другом принципе. Этот проект — наглядный пример генеративного дизайна (generative design), то есть визуального решения, синтезированного на основе математических алгоритмов, а не оформленного вручную. При этом, отбор проектов по типам, хронологии и масштабу естественным образом отображается согласно тем же алгоритмам.

В основе лежит диаграмма Вороного и триангуляция Делоне. А что это? — возникает закономерный вопрос. Википедия подсказывает нам:

Диаграмма Вороного конечного множества точек S на плоскости представляет такое разбиение плоскости, при котором каждая область этого разбиения образует множество точек, более близких к одному из элементов множества S, чем к любому другому элементу множества.

Триангуляцией Делоне для множества точек S на плоскости называют триангуляцию DT(S), такую что для любого треугольника все точки из S за исключением точек, являющихся его вершинами, лежат вне окружности, описанной вокруг треугольника.

Звучит непонятно, но Диаграммы Вороного окружают нас повсюду: листья растений, клетки живых организмов, крылышки стрекозы, трещины на земле… Этот метод используется при проектировании сложных архитектурных объектов, в промышленном дизайне, науке, искусстве… И в компьютерной графике для случайного разбиения поверхностей. А помните стадион «Птичье гнездо» в Пекине с его удивительной архитектурой? Даже мыльные пузыри прилипая друг к другу создают ту же структуру.

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

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

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

У проекта есть небольшая «пасхалка» — если вы попробуете перетаскивать мышкой черный вертекс в правом углу, то увидите как выглядит пересчет вертекса.

Что мы использовали при разработке? Под капотом — подход MVVM, библиотеки Knockout.js и D3.js, SVG-графика, технологии SPA, HTML5, CSS3. Сайт реализован на платформе ASP.NET, MVC4.

Проект полностью решает все поставленные перед ним задачи.