наталья байбекова

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

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

Цифровое выставочное пространство
В основу концепции легли принципы организации художественных выставок: нейтральное окружение, акцент на произведениях и отсутствие визуальных отвлекающих элементов.
Как и в выставочном пространстве, где освещение, расположение работ и оформление зала помогают зрителю сосредоточиться на искусстве, дизайн сайта должен направлять внимание посетителя на картины.
Эта идея определила все визуальные решения проекта – от цвета и типографики до композиции и анимации.

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

Основу интерфейса составляют чёрный и белый цвета. Единственным цветовым акцентом стал красный – оттенок, который часто встречается в картинах художницы и отражает её личные предпочтения. Красный используется точечно, преимущественно в интерактивных состояниях элементов. Он не отвлекает от произведений, но добавляет интерфейсу характер и создаёт визуальную связь между сайтом и творчеством художницы.

Типографика
В основе типографической системы – ActayWide. Монолитный гротеск без засечек с уверенным, статичным характером. Его выразительная геометрия придаёт заголовкам вес и формирует узнаваемый визуальный характер сайта.
В пару к нему выбран Onest – более сдержанный шрифт для основного текста, обеспечивающий комфортное чтение и уравновешивающий выразительность заголовков.
Такое сочетание позволяет сохранить характер в типографике, не перегружая визуальное пространство.

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

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

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

• В каталоге при наведении на картину появляется контурная обводка, обозначающая возможность взаимодействия. Стрелки навигации в галереях также появляются только при наведении, оставаясь скрытыми в обычном состоянии, чтобы не перегружать композицию.
• При наведении белые кнопки меняют заливку на красную, а пункты меню получают аналогичный акцент. Даже выделение текста оформлено в фирменном красном цвете вместо стандартного системного.
• В блоке «Кредо» настроено плавное появление текста из прозрачности – таким образом эфемерно, почти магически, оченб тонко мы рассказываем о личном посыле художника
• При открытии страницы картины (или эскиза) пользователь уходит с основной страницы сайта во внутреннюю. Параметрами анимации мы задали так, чтобы пользователь при закрытии страницы картины вернулся именно на то место, на котором остановился на основной странице

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