Edward Weston галерея

Експериментальний сайт-галерея з нестандартною композицією та UI-анімацією

UX/UI

Індустрія:

Arts & Culture

Рік:

2022

Про проєкт

Контекст і завдання

Edward Weston — концепт сайту-галереї, створений як експеримент із композицією та UI-анімацією на основі робіт відомого американського фотографа.

Основна ідея була в тому, щоб відійти від звичної структури сайту й побудувати весь контент на одному горизонтальному полотні. Фотографії, галерея та біографія Weston змінюють одна одну під час скролінгу, а мінімалістичний інтерфейс не відволікає увагу від самих робіт.

Завданням було створити сайт, який сприймався б не просто як архів фотографій, а як цілісна історія, яку користувач поступово переглядає під час скролінгу.

При цьому важливо було не перевантажити дизайн інтерактивами. Фотографії мали залишатися головним акцентом, а композиція, типографіка й анімація — допомагати вести користувача через контент і робити сам перегляд цікавішим.

Процес

Проєктування структури

Сайт складається лише з трьох розділів — Home, Works і Biography, але всі вони розташовані на одному горизонтальному полотні. Під час скролінгу контент рухається справа наліво, а пункти меню працюють як якорі й одразу переводять користувача до потрібної частини сайту.

У Works фотографії розташовані у вільній композиції та змінюються за розміром і положенням. Biography побудована таймлайн із семи періодів його життя, який завершується його цитатою.

Візуальна айдентика

Дизайн-рішення

Дизайн навмисно максимально стриманий, щоб нічого не конкурувало з фотографіями. В основі палітри лише #E9E9E9 та #101010, а сірий #808080 використовується точково для другорядних елементів.

Основний акцент зроблений на композиції. Фотографії постійно змінюють масштаб і положення, великі дати розділяють етапи біографії, а порожній простір допомагає задавати ритм під час скролінгу. У галереї окрему фотографію можна відкрити у збільшеному форматі та переглянути інформацію про неї, не переходячи на іншу сторінку.

Анімація теж досить стримана й використовується там, де вона підтримує саму ідею сайту: у горизонтальному скролінгу, переходах між розділами та окремих UI-елементах. Завдяки цьому весь сайт сприймається як одна безперервна галерея, а не набір окремих сторінок.