Привет. Я дизайнер и арт-директор студии, которая занимается интерфейсами и дизайном сайтов. Зачастую к нам приходят за тем, чтобы проектировать очередной дашборд, но иногда бывают проекты, которые не сулят больших чеков, но его хочется сделать по фану. Про один из таких пойдёт речь в этом посте.

Однажды в треде «Личные сайты» я похвастался сайтом-портфолио нашей студии. И он понравился Ирине Митаенко, соклубчанке, художнице из Дортмунда. (Привет, Ирина!)

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

Предидущее портфолио Ирины было собрано на Тильде и этот портал имел ряд проблем. Например, шаблонные блоки, которые использовались ранее, обрезали часть картины. Могу себе представить, что таким образом Уорхол лишился бы доброй половины порции своего супа

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

Изучив сайты различных художников, ремесленников и арт-директоров, я сформировал правила, по которым должен работать сайт. А именно:

• Картины не должны скрываться за рамки и элементы интерфейса.
• Визуал сайта не должен отвлекать от сути, он должен быть нейтральным.
• Поиск коллекций и картин должен быть удобным для пользователя.
• Концепция сайта должна строиться вокруг манифеста художника.

Пока Ирина формировала идею для манифеста, мы пошли искать дополнительные смыслы и концепции сайта.

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

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

Двухщелевой эксперимент Юнга

Он демонстрирует интерференцию и дифракцию света, что является доказательством справедливости волновой теории света.

Если по-простому, то это триллер из квантовой механики. Представь, есть устройство, которое стреляет частицами (например, электронами или фотонами) через экран с двумя щелями. За этим экраном находится второй экран, который фиксирует, куда прилетели частицы.

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

Но если поставить детектор, чтобы “подсмотреть”, через какую щель пролетает каждая частица, магия исчезает. Частицы начинают вести себя как отдельные “шарики”, и на экране видны только две полосы — никаких интерференционных узоров.

Ключевой момент в том, что результат зависит от того, наблюдаем мы или нет. Когда мы не следим, частицы как будто находятся в состоянии суперпозиции — они проходят через обе щели одновременно, как волны. А когда мы наблюдаем, частицы “определяются” и выбирают конкретный путь, как частицы.

Этот образ лёг в основу визуальной концепции. Мы передали это с помощью ховер-эффекта: пока пользователь не взаимодействует с контентом на сайте, он может видеть 5 колонок, в которых двигаются «частицы», но как только курсор касается картины, частицы выстраиваются в 2 линии.

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

User experience

Создавая структуру сайта, мы долго не могли прийти к решению, как должна выглядеть главная страница. Экран, который пользователь видит в первую очередь. Правильно ли размещать фото главной коллекции автора, или же там должна быть подборка последних работ? И то, и другое казалось не лучшим решением, потому что картины очень разные и являются экспериментом разных техник. Так что не верно было бы дать пользователю судить автора по первому, что он видит.  Так родилась идея показывать сразу всё, что есть. Отобразить все самые важные коллекции и дать пользователю выбор, что он посмотрит в первую очередь.

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

Портфолио

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

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

Кстати, форма работ повлияла на выбор типографики. Чтобы композиция была консистентна, важно, чтобы вид заголовков и в целом слов рифмовался с формой. Мы искали вытянутые шрифты, которые бы повторяли формат картин. Узкие и высокие.

За основу взяли шрифт Druk

В своём манифесте Ирина говорит, что для неё искусство - это находить необычное в обычном и обычное в необычном. Именно из-за этого мы вписались в этот проект.

Посмотреть картины Ирины и увидеть сайт можно по ссылке https://www.usual2unusual.com/

*****

Поэкспериментировать, поискать необычные решения обычных задач, это то, чего иногда недостаёт в рутинной работе дизайнеров интерфейсов, где 90% элементов и поведенческих паттернов были придуманы до тебя. Мы повеселились, размяли руки и сделали классный сайт, про который было интересно рассказать в сообществе. Клубное кумовство может завести куда угодно. Так что пишите, если нужно подкрепление в области дизайна