Non-Objective Ideas Index

017. Сайт, сделанный по правилам, который потом был аглифицирован

Часто говорят, что цифровая среда должна быть рациональной, удобной и даже незаметной. Когда мы (сегодня это слово пишет Виталик) работали над онлайн-магазином для Ugly Sweater Club, это представление противоречило нашей главной задаче — сохранить в сайте характер бренда, который полюбился людям своей непринужденностью, живостью и экспериментальностью.

Мы подумали, что непринужденность нельзя сымитировать, поэтому добавили в работу элемент игры: сначала сделали аккуратный сайт, а затем попытались его сломать. И даже придумали для этого процесса термин — сайт нужно было «аглифицировать». Это пример моего (Виталика) любимого метода — перформативного дизайна, когда метафора применяется не только к визуальному языку, но и к самому процессу работы.

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

Для нас было важно не переборщить с «аглификацией» и сохранить функциональность сайта, хоть и в стилизованном варианте: стартовая страница показывает последние съёмки и новые товары, каталог сделан привычной сеткой с фильтрами и поиском, а страница товара свёрстана понятным сплит-скрином с крупной фотографией и подробным описанием. С яркими цветами мы работали по принципам цифровой доступности: проверяли контрастность и не использовали цвет как единственный индикатор состояния.

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

Ссылка на сайт ↗

www.group-telegram.com/us/nonobjectiveworks.com/33

1.7K viewsedited  Mar 31 at 08:01

017. Сайт, сделанный по правилам, который потом был аглифицирован

Часто говорят, что цифровая среда должна быть рациональной, удобной и даже незаметной. Когда мы (сегодня это слово пишет Виталик) работали над онлайн-магазином для Ugly Sweater Club, это представление противоречило нашей главной задаче — сохранить в сайте характер бренда, который полюбился людям своей непринужденностью, живостью и экспериментальностью.

Мы подумали, что непринужденность нельзя сымитировать, поэтому добавили в работу элемент игры: сначала сделали аккуратный сайт, а затем попытались его сломать. И даже придумали для этого процесса термин — сайт нужно было «аглифицировать». Это пример моего (Виталика) любимого метода — перформативного дизайна, когда метафора применяется не только к визуальному языку, но и к самому процессу работы.

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

Для нас было важно не переборщить с «аглификацией» и сохранить функциональность сайта, хоть и в стилизованном варианте: стартовая страница показывает последние съёмки и новые товары, каталог сделан привычной сеткой с фильтрами и поиском, а страница товара свёрстана понятным сплит-скрином с крупной фотографией и подробным описанием. С яркими цветами мы работали по принципам цифровой доступности: проверяли контрастность и не использовали цвет как единственный индикатор состояния.

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

Ссылка на сайт ↗

BY Non-Objective Ideas Index