😍
Дизайн-дайджест: сайты, которые не ограничиваются скролломИногда интересная механика может полностью поменять впечатление даже от довольно привычного продукта. Рандомайзер превращается в желейные кубики, портфолио реагирует на наведение, а Википедия — в бесконечную коллекцию PNG.
В новом выпуске смотрим, как дизайнеры используют анимацию, hover-эффекты и нестандартную навигацию, чтобы по-разному взаимодействовать с контентом.
▌Что особенно зацепило:🔴
Bubbbly — рандомайзер, который выглядит как digital-игрушкаРандомайзеры обычно довольно утилитарны: поле, кнопка, результат. Здесь механику сделали частью визуальной концепции — вместо обычных чисел или карточек бросаем желейные 3D-кубики.
• кубики приятно деформируются и сталкиваются друг с другом;
• можно менять их цвет и текстуру;
• настройки не перегружают экран и позволяют быстро собрать свой вариант;
• сам процесс рандомизации становится интереснее результата — хочется бросить ещё раз просто ради анимации.
🔴
Heron — AI-продукт с эстетикой технических чертежейВизуальный язык сайта строится вокруг чертежей, схем и технических иллюстраций. Они появляются практически во всех блоках и помогают связать довольно разные части лендинга в одну систему.
• иллюстрации дополнены hover-эффектами и реагируют на действия пользователя;
• в блоке «для кого» вместе с выбранной профессией меняется и графика;
• карточки основателей сделаны не стандартными портретами, а продолжают общую визуальную концепцию;
• даже футер здесь полноценная часть дизайна, а не просто место для ссылок.
Особенно интересно, что тема AI раскрывается без привычных градиентов, светящихся сфер и абстрактных нейросетей.
🔴
Brikken — сайт креативного digital-продакшена с акцентом на сетку и движениеЗдесь сетка не прячется за контентом, а становится заметным графическим приёмом и проходит через весь сайт.
• фоновая сетка задаёт структуру и ритм страницы;
• превью кейсов анимированы уже в обычном состоянии, а при наведении характер движения меняется;
• направления работы тоже собраны внутри сеточной композиции;
• за счёт повторения одного приёма разные по содержанию блоки выглядят частью одной системы.
Хороший пример того, как один простой графический элемент можно растянуть на весь лендинг и не превратить его в декоративный фон.
🔴
Geex Arts — CTA, который невозможно не заметитьСайт дизайн-компании сразу начинает с очень крупного призыва к действию — кнопка занимает значительную часть первого экрана. И этот приём возвращается в финале страницы.
• 3D-анимации сопровождают пользователя практически на всём протяжении сайта;
• крупная типографика и объекты создают ощущение намеренно преувеличенного масштаба;
• огромный CTA в конце закольцовывает композицию и возвращает к главному действию.
Интересно посмотреть именно на работу с масштабом: здесь кнопка перестаёт быть небольшим интерфейсным элементом и сама становится частью визуала.
🔴
Wiki Spy — Википедия через PNGЭкспериментальный сайт превращает контент Википедии в визуальную навигацию. Вместо списка статей — множество PNG-объектов, за каждым из которых скрывается новая тема.
• при наведении на объект открывается большое поле связанных изображений;
• каждый PNG становится точкой перехода к следующей теме;
• по клику можно уйти уже на соответствующую статью Википедии;
• привычный поиск информации превращается в цепочку визуальных ассоциаций.
Получается почти бесконечная прогулка по Википедии, только вместо синих ссылок маршрут строят изображения.
В этот раз особенно много примеров, где дизайн меняет не столько внешний вид сайта, сколько
сам способ взаимодействия с ним. Забираем в референсы ✍️
#дизайндайджест