DIЧ: о звуковом дизайне сайтов, канадской айдентике и будущем шрифта

Carl Nielsen — International Competition

Сайт с музыкой и о музыке от Stupid Studio. Проект посвящён Международному фестивалю классической музыки CNIC имени датского композитора Карла Нильсена.

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

Весь сайт построен на звуках и с первых секунд загрузки интригует пользователя. Заметьте: это не какой-то видос, а полноценная работа в html — всё прямо в браузере. К тому же, пока смотришь и настраиваешься, сайт успевает прогрузиться, а ты получаешь кайфовый экспириенс. И сделать очень просто: смена текста, анимация кругов и синхронизация с музыкальным ритмом.

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

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

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

«Отличная реализация интерактивных звуков на сайте. Главное — в тему. А ещё нравится концепция стартовой страницы в формате одного нескроллируемого слайда. То, чего боятся (надеюсь, пока) многие заказчики. На самом деле это возможность выделиться, сломав у посетителя сложившиеся стереотипы скроллируемых полотен, направить посетителя по нужным разделам. Главное, расставить приоритеты элементам навигации. В данном случае это презентация, меню и соцсети», — CEO студии дизайна CHIPSA Максим Кыштымов.

Design Canada Film

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

Главным акцентом чистого и стильного сайта можно сделать шрифт: интересные типографические решения легко найти даже при одной гарнитуре. В среднем на сайтах используется 2–4 семейства. Грамотно сочетать большее количество могут только настоящие асы. Но не оставляйте текст статичным — иначе история на сайте будет блёклой и неинтересной.

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

Чтобы уравновесить типографику вижуалом, но не потерять акцент на тексте, можно использовать пространство при переходе между страницами.

Авторы сделали целый набор прелоадеров в стиле сайта: геометрические фигуры и их сочетания с интересной анимацией появляются в случайном порядке при загрузке внутренних разделов.

Google Fonts Github Korean

Анимация корейских шрифтов от разных авторов и друзей Google Fonts. В инверсии, контурах, с расслоением и размытием. Поиграйте и оцените подачу!

Behance недели

Айдентика для Zenwater — дилера минеральной питьевой воды.

Логотип — минималистичное изображение трёх капель, передающих иероглиф «вода», и круга, обозначающего положение «над». Слоган компании: «Больше, чем вода». (В Red Collar работают мастера интерпретации — прим. ред.)

Колорит айдентики грамотно развит за счёт адаптивного паттерна с приятным синим цветом и кругами-пузырьками: для постеров, визиток и так далее. Прежде всего уделяйте внимание логотипу — он основа всего, — а уже после принимайтесь за фирстиль.

Дизайн упаковки и презентации продукта для Elanveda — бренда косметики, построенного на принципах аюрведы.

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

«Свободное пространство, компоновка блоков и типографика привлекают внимание — это устанавливает быструю связь бренда с потребителем. Но продуктовый дизайн не должен быть скучным: человек лучше запоминает графические символы, чем модульные сетки. Однако, авторы даже логотип спрятали в еле заметном тиснении. Я бы посоветовал сделать символ более видимым или добавить в верхнюю часть упаковки вижуал тех же натуральных продуктов из состава. Это было бы живее и понятней для большего числа потребителей», — руководитель веб-студии Funky Monkey Вячеслав Гавриленков.

Будущее типографики

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

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.