а вот и пятничный #trendwatching от нашей Ани :) пятничный в субботу. классика. но качественная


Всем доброе пятничное утро! #trendwatching
(P.S. Заранее извиняюсь за кол-во ссылок!🙏😬)

Сегодня предлагаю восхититься эстетикой типографики.

https://stelvio.k95.it/ — огромное количество эффектиков по скроллу, очень классно подходит для всяких лонгридов.

http://www.gt-flexa.com/ — понравилось, как в середине сайта шрифт с определенной анимацией отражает слово, которе им написано.

https://typefaces.temporarystate.net/preview/
https://velvetyne.fr/
— сайты шрифтовых агентств, где и сами сайты залипательные, и шрифты крутые

https://www.typewolf.com/ — сайт, который собирает в коллекцию сайты с кул типографикой и рассказывает, что за шрифты были использованы

И напоследок, не совсем про шрифты, а точнее совсем не про них, но если вдруг вам понадобится прикупить человеческих костей, вы можете это сделать. Например, череп карлика стоит почти 600к! https://www.jonsbones.com/ ☠️

Передаю эстафету Ксю @trvrc

#trendwatching
Сережа не чувствует запахов, но пока еще видит. Вот он и подготовил сегодняшнюю рубрику, погнали:

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

1. https://www.defeatboco.com/ моё любимое! иллюстрироанный сайт с привязкой к скроллу пользователя. Сам сайт рассказывает про процесс разработки веб-продукта и подает это все в формате «приключение на 10 минут». Но мы то с вами знаем, насколько оно может затянуться…) Есть вопросики к шрифтовым решениям, акцентам и элементам интерфейса, но сторителинг вкупе с иллюстрациями - затягивает.

2. https://typographyprinciples.obys.agency/ кто-то наверняка уже видел его (да, Ксю?)). нельзя пройти мимо этого стильнейшего сайта про принципы типографики от студии Obys. Ничего непонятно, но очень интересно. На самом деле, если детально вчитываться, то максимально четкая и простая выжимка по основам грамотной типографики)

3. https://qodeinteractive.com/catalog/ простейший и кайфовый за счет плавных микроанимаций сайт студии дизайна. Переходы в кейсы и подача контента внутри, само меню, переход из одного кейса в другой… благостно максимально))

отличнейшая подборочка от нашей @yujinajina Жени разбавит этот денёк #trendwatching

1. Концептуальный вариативный шрифт Climate Crisis, который постепенно «тает» и является творческим высказыванием на тему таяния ледников и изменения климата.
https://kampanjat.hs.fi/climatefont/

2. Porter & Sail — компания, предлагающая обеспеченным миллениалам персонализированные туры по городам мира. В дизайн-бюро «Щука» сделали для них лёгкую и элегантную систему идентификации. Логотип построен на контрасте лёгких рукописных амперсандов и очень гуманистического гротеска.
https://shuka.design/porter-and-sail

3. Журнал SKVOT предлагает вопросы, которые провоцируют переключение в латеральный режим мышления и помогают искать новые творческие идеи.
https://skvot.io/ru/blog/10-voprosov-chtoby-pridumat-novoe

4. Ну и мое любимое 😉
Почему дизайн выглядит хорошо? Небольшое исследование Nielsen Norman Group | UXPUB
https://ux.pub/pochemu-dizayn-vyglyadit-horosho-nebolshoe-issledovanie-nielsen-norman-group/

#font #creative #ux #thinking #design

@asyati лови шанс 🤩

и в конце дня визуальный релакс от нашей Аси
#trendwatching

"В прошлый раз я подумала, что приветственное слово про хорошую погоду и про «хилемся, живем» пишет Саша в комментах к нашим подборкам, но выяснилось, что все остальные передают приветы самостоятельно. Чтош, тогда погнали по сайтам, а потом можно пойти любоваться на весенний закат ✨"


1. https://stykka.com/collections/lastdesk%E2%84%A2/products/lastdesk
Имиджевый сайт очень модного стола, тут и составляющие летают, и видео крутое, и вроде начинаешь сразу думать, может и мне такой стол нужен. И по факту — ничего лишнего, текст и столы разные, даже картонный есть

2. https://www.fontshare.com/
Сайт делал Александр Лагута с женой Екатериной, поэтому он, наверняка, вам попадался на глаза, по крайней мере кейс. Это сервис с бесплатными шрифтами для коммерческого и некоммерческого использования от индийской шрифтовой компании. Кириллицы, конечно же, неть

3. https://getensembl.com/products
Если не хотите покупать набор кастрюлек за 50 тыс с доставкой из Америки, то хотя бы посмотрите их интернет-магазин))

4. https://on-air.caricomassimo.org/
Вот этот сайт мне скорее не понравился, но я его сюда закину. Прием деления окна на 2 части не новый, в этом есть некое удобство и где-то такие штуки могут подойти. Я подумала сразу про Бреус и про часть сайта с коллекциями

5. https://us9.campaign-archive.com/?u=89138ced008e0282fe335b3a8&id=e2c7c04cbb
В канале Главреда сегодня опубликовали старую статью Ильяхова о рекламе, я с удовольствием прочитала. Там речь вроде как про 2015 год, но не скажу, что информация потеряла свою актуальность, ну а нам, вебам, завсегда такие штуки полезны

В пятничный вечерок предлагаю посмотреть подборочку с интересными механиками и сторителлингом в рамках рубрики от нашего дигитал-продюсера Даши :)
#trendwatching

1) Космическое наслаждение, история про космос, мечты и полет. очень приятный стиль иллюстраций и красивая история. Внутри сайта еще и игровая механика внедрена.

https://tothestars.worldoftanks.eu/en/stages?stage=1

(кстати, очень приятно поскролить и в обратном направлении).

2) Сайт посвящен какой-то красной корове, но это неважно.
Очень милая механика: ты можешь записать свой смех и тем самым сделать благотворительный взнос + послушать смех других людей со всей планеты. Забавно же)

https://100ytlc.com/en-en/explore/


3) Ну и Gucci. Тут ребята всегда на стилечке с красивыми веб-проектами. Вроде много видели, но вот эту божью коровку встретила только пару дней назад и, конечно же, помогла ей научиться летать и спасти от гигантских овощей)

https://gucciladybug.gucci.com/

это утро под кофе начнем после небольшой паузы с #trendwatching

1. https://manifesto.androll.fr/ — как отказаться от скролла в принципе? Фигма, миро и прочие тулзы уже давно используют формат открытого пространства для решения функциональных задач, а тут его используют как часть дизайна (ну, и для навигации, конечно). Хочется изучать.

2. https://brunoarizio.com/ — не новый сайт, но тут хорошо все: стиль, как работают с вертикальным скроллом. Ничего не раздражает, не смотря на использование таких, казалось бы, непривычных для людей механик.

3. https://gigarama.ru/russianpanteon/ru/ — да, этот сайт не идеален, но тот факт, что у нас появляются такие проекты меня радует. Кажется, подобные сайты можно изучать в рамках школьной программы, а не рассматривать одинокую фотографию в учебнике. Лайк.

Залетаю с перерывом на обеденный #trendwatching

1. https://onedollarlesson.com
касперский в формате интерактивных лекций рассказывает показывает различные сценарии защиты от злоумышленников при манипулировании деньгами в интернете.
Сторителинг работает как нужно, пользователю дается минимум информации, которая хорошо укладывается в голове и максимум анимированных аналогий.

2. https://flipaclip.com
сайт показывает пример, как можно на этапе онбоардинга пользователя закрыть все ожидания от приложения. Особенно понравилось визуальное описание функций и перекладывание их на пользовательский опыт.


3. https://ipeksu.az
интересный способ визуализировать преимущества продукта с небольшой обманкой в скролле. Скролля вниз, движение продукта идет вверх и показывает

продолжаем #trendwatching и готовим серию уже более полезных постов. камингсун

1. https://www.m-trust.co.jp
Некоторая компания, которая решает соц.вопросики в сфере недвижимости. Но судя по главному экрану — они скорее занимаются подпольно выращиванием растений через нейросетки)

Использованная библиотека JS добавляет некоторого антуража и желания задерживаться на некоторых разделах. Плюс микро интересные решения по UX. Так что даже на японском сайте нет ощущения потерянности))


2. expo.dmlainfo.fr
Виртуальная выставка, которая позволяет понять, что видит человек с болезнью AMD (дистрофия сетчатки глаза), посмотрев на нее глазами, имеющих этот недуг.

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

и сегодня нам подвезли очередную порцию #trendwatching
как раз в обед к десерту

1▪️https://juanmora.co/ - сайт бесконечного скролла (хотя он все-таки не бесконечный). Просто очень прикольная идейка, ховеры, анимация и копирайт.

2▪️https://kffein.com/en - простой и понятный сайт агентства в Монреале. Классическая черно-бело-красная цветовая гамма, приятные ховеры. Нравится идея с курсором в виде боксерской перчатки (появляется внизу в блоке с вакансиями). Предлагаю заглянуть в меню и посмотреть также другие странички их сайта.

3▪️https://menudurable.ca/en/ - очень красочный гайд по сбалансированному питанию. Каждая страничка – своего рода глава гайда с описанием продуктов, интересными фактами и даже рецептами.

и вновь начинаем утро с #trendwatching под кофе

1. http://nuro.co/
Тут на мой взгляд визуальный образ сайта идеально соответствует предмету, который он продвигает. Типографика, цвета, продукт - все говорит о минимализме. При всей простоте нам заботливо рассказывают как определять время на часах.

2. https://guide.so-edinenie.org/audio
Студия Лебедева создала гайд по адаптации сайтов для людей с нарушениями слуха и зрения. Сайт дает не только правила по адаптации, но и возможность прочувстовать на себе каким образом люди взаимодействуют с сайтами. Очень рекомендую почитать для расширения кругозора)

3. https://www.pola.com/wecaremore/
Манифест производителя крема для рук. На довольно короткой страничке с зацикленным скроллом они с помощью иллюстраций и анимации передают свою философию. Как через продукт они заботятся о трех составляющих: человек, общество, планета. Интересно как с помощью центрального элемента (рук) передается настроение того или иного смыслового блока.

4. https://www.usedrop.io/
Слежу за вебфлоу и попался интересный сайтец. Маркетинговая платформа с новым подходом к маркетингу. Не оч понятно как это работает. Но мне понравилось как они ведут пользователя. Инверсия скролла будто ведет тебя наверх к чему то. Ты начинаешь восхождение где то в темном и надоевшем месте, потом ты как бы переходишь какую то черту и делаешь глоток свежего воздуха,а завершением твоего восхождения служит форма заявки. Оч понравился блок, где показано, какие бренды уже присоединились к ним.

Когда попросили интерактива "на все бабки" | #trendwatching

Попался нам на днях сайт брендингового агентства Viens-la из Франции

Каждая страница это набор разных мини-механик, которые заставляют залипнуть.

Просто перечислим, что есть на главной:
1. Лого, которое с милым звуком переворачивается
2. Интерпретация меню с блюдом с навигацией по сайту
3. Последние кейсы в углу на первом экране с ховером и тултип собственным словариком об агентстве
4. Блок с атрибутами бренда. Имитация текстового поля, где чтобы не набирал будет «creative»
5. Услуги, которые превращаются в дартс. Можно сыграть с условиями бюджет/время
6. Блок с наградами и годами, которые идут не списком, а падают по скроллу и переключению счетчика лет
7. Форма, где нельзя нажать «нет»

А еще по всему сайту спрятаны 24 монетки, которые надо найти. Прячутся за некоторыми элементами или действиями.

Собираем монетки тут: https://viens-la.com

Когда речь заходит о новогоднем спецпроекте, то часто первой ассоциацией идёт адвент-календарь или украшение елки.

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

Что-то пожелать нам можно тут

Ссылка на проект: https://app.wishfultree.com

#creativecorner #trendwatching

Angry Pumpkins — игра сделанная полностью на нейронках

Javi Lopez опубликовал игру, которую собрал без единой строчки кода. Сгенерировал при помощи Midjourney, DALL-E 3 и GPT-4

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

Поиграть можно тут (только десктоп): https://bestaiprompts.art/angry-pumpkins/index.html

Инструкция: https://twitter.com/javilopen/status/1719363268177777122

#aicorner #gamecorner #trendwatching

Рубрика: «А так можно было?»

На сайте конференции Next.js можно в коллабе с другими пользователями расставлять кубики на правильные места в реальном времени

Cсылочка: https://nextjs.org/conf

#trendwatching