Сегодня запускаем новую пятничную рубрику — лучшие дизайн-студии будут брать шефство над каналом по пятницам и делиться с нами лучшими примерами дизайна. Сегодня первый пост под авторством Creative Dev команды агенства SALT AND PEPPER. Передаём им слово:

Привет, с вами команда SNP. Наш юнит специализируется на «фестивальных» сайтах: мы их делаем много и на совесть – 12 Сайтов Дня на AWWWARDS за красивые глаза не дают. Ежедневно мы смотрим и анализируем много работ других студий, чтобы быть в курсе трендов и учиться новому. Но нам не жалко поделиться нашими фаворитами и рассказать, чем они нас вдохновляют.

Итак, сайт: spaace.io. Авторы: Lusion.

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

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

Sound Design. Музыка развивается и поддерживает динамику повествования. А эффект погружения под воду на последней секции круто продает концепцию попадания в «портал». Он, кстати, не предзаписанный, а реализован в реалтайме через эффекты с помощью Web Audio API. Музыкой на сайте уже не удивишь, но только единицы идут дальше и используют звук как еще один способ рассказать историю.

Interstellar moment. Отдельно выделим последний экран, где космонавт падает не то в черную дыру, не то в червоточину. Такие кадры выводят планку возможного в вебе на новый уровень – детализация модели и её анимация, ворох визуальных эффектов, которые с пугающей точностью изображают искажение пространства, работа с камерой. Короче, eyegasm в квадрате.

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

Пример того, как можно за счёт незамысловатых визуальных приёмов оживить сторитейлинг. На этом лендинге один блок плавно перетекает в другой с помощью абстрактных фигур на фоне. При этом каждый блок имеет свою карточку, благодаря чему они не смешиваются в кучу. Это делает сайт более интересным с точки зрения визуала. Пока зритель смотрит на один блок, он видит кусочек предыдущего или следующего. Это одновременно и делает сайт более подвижным и не даёт ему рассыпаться.
〰️
An example of how you can bring storytelling to life through uncomplicated visual techniques. On this landing page, one block smoothly flows into another using abstract shapes on the background. At the same time, each block has its own card, so that they do not mix in a pile. This makes the site more interesting from a visual point of view. While the viewer is looking at one block, he sees a piece of the previous or next one. This simultaneously makes the site more alive and prevents it from crumbling.

https://www.youballin.com/

Отличный пример того, что хороший веб-дизайнер это тот, кто может перейти в режим графдизайнера, чтобы умело вписать айдентику в дизайн сайта. Этот сайт неразрывно связан и бредингом и с дизайном упаковок продукта.
Очень нравится обширная цветовая палитра, большое количество сочного контента и внимание к деталям. Позабавил копирайтинг: например «cobstomers» вместо «customers» в блоке с отзывами. Немного напрягает количество анимаций. Их прям очень много, что глаза разбегаются. Но в целом выглядит вкусно.
〰️
A great example of the fact that a good web designer is someone who can switch to graphic designer mode in order to skillfully fit the identity into the design of the site. This site is inextricably linked to both branding and product packaging design.
I really like the extensive color palette, a lot of juicy content and attention to detail. I was amused by copywriting: for example, "cobstomers" instead of "customers" in the block with reviews. The number of animations is a bit annoying. There are so many of them that the eyes run away. But overall it looks nice.

https://cobfoods.com/

Продолжаем пятничную рубрику, где дизайн-студии делятся своими референсами. Сегодня контент подготовили дизайнеры из Chipsa — студии с фокусом на эстетическом дизайне и креативной разработке. Передаём им слово:

Сегодня хотим показать вам сайт igloo.inc
Леденяще свежий подход в представлении компании, которая занимается проектами на блокчейне. Ключевой визуал здесь отражает сразу несколько важных ценностей – визуализирует метафору построения системы блокчейна, а также олицетворяет дом, жилище для проектов в данной сфере. В остальном здесь применяется достаточно минималистичный стиль в союзе с технологиями будущего, который выражаются при помощи графических эффектов постпроцессинга. Видеть все это в союзе с жилищем эскимосов – невероятное зрелище. Отсутствие блочной системы сайта, управление движением камеры и бесконечный скролл погружают в картинку еще сильнее, что придает проекту еще большей атмосферности.
В плане подачи информации нравится как лаконично подана информация о компании. Настолько лаконично, что этот текст встречает пользователя сразу на главном экране сайта. При этом не перегружает его, но подчеркивает важность этих слов заголовком manifesto.
Говоря о свежести и оригинальности стиля хочется подчеркнуть непревзойденную работу разработчиков, которые смогли реализовать графику и эффекты на three.js очень высокого качества и при этом выдать стабильную производительность в шестьдесят кадров даже на не самых мощных устройствах.

В последнее время вижу тренд на использование антиквенных шрифтов там, где они, казалось бы, не очень уместны. Этот сайт выполнен в техно-ретро стилистике: угловатые формы, тёмные цвета, облака на фоне, полосы как на старых экранах. Один из блоков вообще похож на экран установки Windows XP (кто помнит, тот поймёт). Кажется, что в такой стилистике шрифты должны быть только рубленные, а то и вовсе моноширинные. Но вместо них акцидентным шрифтом выбрана вполне изящная антиква. Сочетание на удивление удачное, приятно разбавляет технократичный визуал.
Что по поводу самого сайта. Очень понравился блок про финансовые потери, на нём можно надолго залипнуть. Ещё хочется похвалить дизайнеров за эффекты на фоне. Выглядит круто и необычно, как и весь проект в целом.
〰️
Recently, I have seen a trend towards using antique fonts where they would seem to be not very appropriate. This site is made in a techno-retro style: angular shapes, dark colors, clouds on the background, stripes like on old screens. One of the blocks is generally similar to the Windows XP installation screen (those who remember will understand). It seems that in such a style, fonts should only be chopped, or even monospaced. But instead of them, quite an elegant antique was chosen in an accidental font. The combination is surprisingly successful, pleasantly dilutes the technocratic visual.
What about the site itself. I really liked the block about financial losses, you can stick to it for a long time. I also want to praise the designers for the effects on the background. It looks cool and unusual, as does the whole project.

https://www.ethos.network/