Всё больше в моду входят сильно анимированные сайты. Это всегда привлекает внимание и даёт дизайнеру и верстальщику проявить себя, выйти за рамки привычного. Правда, иногда получается так, что эта анимированность выходит на первый план и затмевает собой смыслы. Этот сайт пытается сохранять баланс, хотя перевес в сторону иллюстраций всё-таки ощущается. С другой стороны, это неплохой способ искусственно растянуть повествование и заострить на нём внимание зрителя, в том случае, если контента мало, но хочется сделать красиво.
〰️
Heavily animated websites are becoming more and more fashionable. It always attracts attention and gives the designer and the layout designer to express themselves, to go beyond the usual. However, sometimes it turns out that this animation comes to the fore and overshadows the meanings. This site is trying to maintain a balance, although the preponderance towards illustrations is still felt. On the other hand, this is a good way to artificially stretch the narrative and focus the viewer's attention on it, if there is little content, but you want to make it beautiful.

https://www.makehrwork.nl/

Хоть это и совсем небольшой промо-сайт для ещё невышедшего продукта, но я просто не могу пройти мимо. Какой же он классный! Такой яркий, позитивный и живой. По стилю очень напоминает почивший Zenly до редизайна. Очень сочно! И ещё необычная для десктопа структура в виде сторисов, прекрасно отражающая суть продукта — социальность. Буду следить за проектом, потому что подход к дизайну у них очень занятный.
〰️
Although this is a very small promo site for a product that has not yet been released, I just can't pass by. It's so cool! So bright, positive and lively. The style is very reminiscent of the late Zenly before the redesign. Very juicy! And also an unusual structure for a desktop in the form of stories, which perfectly reflects the essence of the product - sociality. I will follow the project, because their approach to design is very interesting.

https://www.sugar.health/

Очень брутальный дизайн, который понравится далеко но всем. Но мне нравится. Когда я вижу такой дизайн — я понимаю, что в нём были заинтересованы все. И менеджер и оунер что-то да понимают, раз смогли принять такой эксперементальный дизайн и не сказали «нас могут не понять». Это круто. Это отражает подход компании к своей работе. Им не нужно продать как можно больше, им нужно найти клиентов, которые будут с ними на одной волне, которые не боятся смелых решений и которые хотят сделать круто и необычно, а не просто «хорошо для конверсии».
〰️
A very brutal design that will appeal to far but everyone. But I like it. When I see such a design, I understand that everyone was interested in it. Both the manager and the owner understand something, since they were able to accept such an experimental design and did not say "we may not be understood." That's cool. This reflects the company's approach to its work. They don't need to sell as much as possible, they need to find customers who will be on the same wavelength with them, who are not afraid of bold decisions and who want to do cool and unusual, and not just "good for conversion".

https://thepatchsystem.com/

Сегодня запускаем новую пятничную рубрику — лучшие дизайн-студии будут брать шефство над каналом по пятницам и делиться с нами лучшими примерами дизайна. Сегодня первый пост под авторством 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/