😍 Дизайн-дайджест: сайты, которые не ограничиваются скроллом

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

В новом выпуске смотрим, как дизайнеры используют анимацию, hover-эффекты и нестандартную навигацию, чтобы по-разному взаимодействовать с контентом.

▌Что особенно зацепило:

🔴 Bubbbly — рандомайзер, который выглядит как digital-игрушка

Рандомайзеры обычно довольно утилитарны: поле, кнопка, результат. Здесь механику сделали частью визуальной концепции — вместо обычных чисел или карточек бросаем желейные 3D-кубики.
• кубики приятно деформируются и сталкиваются друг с другом;
• можно менять их цвет и текстуру;
• настройки не перегружают экран и позволяют быстро собрать свой вариант;
• сам процесс рандомизации становится интереснее результата — хочется бросить ещё раз просто ради анимации.

🔴 Heron — AI-продукт с эстетикой технических чертежей

Визуальный язык сайта строится вокруг чертежей, схем и технических иллюстраций. Они появляются практически во всех блоках и помогают связать довольно разные части лендинга в одну систему.
• иллюстрации дополнены hover-эффектами и реагируют на действия пользователя;
• в блоке «для кого» вместе с выбранной профессией меняется и графика;
• карточки основателей сделаны не стандартными портретами, а продолжают общую визуальную концепцию;
• даже футер здесь полноценная часть дизайна, а не просто место для ссылок.

Особенно интересно, что тема AI раскрывается без привычных градиентов, светящихся сфер и абстрактных нейросетей.

🔴 Brikken — сайт креативного digital-продакшена с акцентом на сетку и движение

Здесь сетка не прячется за контентом, а становится заметным графическим приёмом и проходит через весь сайт.
• фоновая сетка задаёт структуру и ритм страницы;
• превью кейсов анимированы уже в обычном состоянии, а при наведении характер движения меняется;
• направления работы тоже собраны внутри сеточной композиции;
• за счёт повторения одного приёма разные по содержанию блоки выглядят частью одной системы.

Хороший пример того, как один простой графический элемент можно растянуть на весь лендинг и не превратить его в декоративный фон.

🔴 Geex Arts — CTA, который невозможно не заметить

Сайт дизайн-компании сразу начинает с очень крупного призыва к действию — кнопка занимает значительную часть первого экрана. И этот приём возвращается в финале страницы.
• 3D-анимации сопровождают пользователя практически на всём протяжении сайта;
• крупная типографика и объекты создают ощущение намеренно преувеличенного масштаба;
• огромный CTA в конце закольцовывает композицию и возвращает к главному действию.

Интересно посмотреть именно на работу с масштабом: здесь кнопка перестаёт быть небольшим интерфейсным элементом и сама становится частью визуала.

🔴 Wiki Spy — Википедия через PNG

Экспериментальный сайт превращает контент Википедии в визуальную навигацию. Вместо списка статей — множество PNG-объектов, за каждым из которых скрывается новая тема.
• при наведении на объект открывается большое поле связанных изображений;
• каждый PNG становится точкой перехода к следующей теме;
• по клику можно уйти уже на соответствующую статью Википедии;
• привычный поиск информации превращается в цепочку визуальных ассоциаций.

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


В этот раз особенно много примеров, где дизайн меняет не столько внешний вид сайта, сколько сам способ взаимодействия с ним. Забираем в референсы ✍️

#дизайндайджест