Любопытный проект с редкой механикой в NYT про Великие деревья в Нью-Йорке.
Механика переворота карточек необычная, ей человека активно обучают в начале.
То есть карточка колышется плюс несколько раз анимируется иконка поворота. Дальше предлагается абсолютно однотипная механика, которая является ключевой и системной для этого проекта.
При этом в принципе сами карточки можно не читать. Понятно, что про все 40 никто не прочитает. Можно просто пролистать фотки. И если понравилось, то уже листаешь фотки конкретного дерева и читаешь про него.
Такая механика выбора жилья в эйрбнб.
При этом сами фотки меняются анимацией, что явно не выглядит удачным. Потому что привыкаешь свайпом переворачивать именно картинки. Тут приходится просто ждать.
Ну и добавление в "избранное" тоже симпатичное. Получается целых три не совсем обычных механики на самом деле. Переворот, добавление в избранное и автолисталка.
Механика переворота карточек необычная, ей человека активно обучают в начале.
То есть карточка колышется плюс несколько раз анимируется иконка поворота. Дальше предлагается абсолютно однотипная механика, которая является ключевой и системной для этого проекта.
При этом в принципе сами карточки можно не читать. Понятно, что про все 40 никто не прочитает. Можно просто пролистать фотки. И если понравилось, то уже листаешь фотки конкретного дерева и читаешь про него.
Такая механика выбора жилья в эйрбнб.
При этом сами фотки меняются анимацией, что явно не выглядит удачным. Потому что привыкаешь свайпом переворачивать именно картинки. Тут приходится просто ждать.
Ну и добавление в "избранное" тоже симпатичное. Получается целых три не совсем обычных механики на самом деле. Переворот, добавление в избранное и автолисталка.
Forwarded from Поясни за UX
Сегодняшний сайт дня на Awwards для Cartier – это какой-то эппл на максималках в мире ювелирки.
Говорю сразу – это промо, а не главная магазина, его смотрят на экранах больше, чем моя гостинная.
У таких страниц одна задача – впечатлить. Нет цели конвертнуть в СТА (ее по факту и нет). Ты должен залипнуть, погрузиться в атмосферу богатства и роскоши.
Давайте попробуем разобрать приемы, которыми достигается эта цель:
1. Минимум навигационных возможностей. Фактически это обычный лендинг, но он устроен не сверху-вниз, а вглубь. Пользователь максимально дизориентируется и просто скроллит, выключив мозг. Благодаря этому, все что он может – потреблять впечатления.
2. Микровзаимодействия. Благодаря тому, что часики можно вертеть, рисовать вокруг них, пользователь прикасается к элитной жизни, замечает детали. Кроме того, это триггерит нажатия и переход в детали, а там еще куча всего, что происходит по клику/скроллу. И снова тотальное залипалово.
3. Фокус на продукт. Минимум текста, максимум картинок это база
4. Визуальная концепция. Ты буквально "идешь" по шоуруму Картье, в каждой комнате свой стиль и настроение. Имхо, ребята не дожали "выход", могли бы отправить меня в ювелирный космос, вместо этого приземлили в рекламный видос
5. Композиция. И в "комнатах" и в деталках часов царит симметрия, основная силовая линия и выравнивание по центру, четко прослеживаются 5 колонок. Куча воздуха, умеренная пластика в модульных блоках с фотками. Все работает на вайбы элитарности.
6. Шрифты. У ребят свой Cartier Sans – элеганза с засечками, который они используют, внезапно, для основного текста. Обычно серифы берут в заголовки, так как он в большой массе текста нечитабельный, но на лендосе кегли крупные, могут себе позволить. При этом заголовки набраны каким-то гротеском, от которого веет стимпанком (что, вобщем, логично, это же страница про часы)
7. Звук. Любое действие сопровождается изменениями в райском звуковом сопровождении, что усиливает погружение
Насладиться полноценно можно с хорошим интернетом, с компа и со звуком
💜 Магазин для дизайнеров
💜 Консультации
💜 Навигация по постам
Говорю сразу – это промо, а не главная магазина, его смотрят на экранах больше, чем моя гостинная.
У таких страниц одна задача – впечатлить. Нет цели конвертнуть в СТА (ее по факту и нет). Ты должен залипнуть, погрузиться в атмосферу богатства и роскоши.
Давайте попробуем разобрать приемы, которыми достигается эта цель:
1. Минимум навигационных возможностей. Фактически это обычный лендинг, но он устроен не сверху-вниз, а вглубь. Пользователь максимально дизориентируется и просто скроллит, выключив мозг. Благодаря этому, все что он может – потреблять впечатления.
2. Микровзаимодействия. Благодаря тому, что часики можно вертеть, рисовать вокруг них, пользователь прикасается к элитной жизни, замечает детали. Кроме того, это триггерит нажатия и переход в детали, а там еще куча всего, что происходит по клику/скроллу. И снова тотальное залипалово.
3. Фокус на продукт. Минимум текста, максимум картинок это база
4. Визуальная концепция. Ты буквально "идешь" по шоуруму Картье, в каждой комнате свой стиль и настроение. Имхо, ребята не дожали "выход", могли бы отправить меня в ювелирный космос, вместо этого приземлили в рекламный видос
5. Композиция. И в "комнатах" и в деталках часов царит симметрия, основная силовая линия и выравнивание по центру, четко прослеживаются 5 колонок. Куча воздуха, умеренная пластика в модульных блоках с фотками. Все работает на вайбы элитарности.
6. Шрифты. У ребят свой Cartier Sans – элеганза с засечками, который они используют, внезапно, для основного текста. Обычно серифы берут в заголовки, так как он в большой массе текста нечитабельный, но на лендосе кегли крупные, могут себе позволить. При этом заголовки набраны каким-то гротеском, от которого веет стимпанком (что, вобщем, логично, это же страница про часы)
7. Звук. Любое действие сопровождается изменениями в райском звуковом сопровождении, что усиливает погружение
Насладиться полноценно можно с хорошим интернетом, с компа и со звуком
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
☝🏻Я бы не разделял этих восторгов. У проекта очень плохой UX, при всех его достоинствах. 99% пользователей в жизни не догадаются, что часы можно крутить и просто проскроллят галерею и пойдут дальше. Нет ни одного текста. Из каждого режима (рисование, крутилка) выход по незаметному тапу (клику) в правом углу. Но как концепт дает пищу для идей.
💯2
И похожий по механике скроллителл с движением по мирам, лишенный этих недостатков. Русский сайт группы Аквариум.
https://www.aquarium.ru/ru
Спасибо Настеньке за ссылку
https://www.aquarium.ru/ru
Спасибо Настеньке за ссылку
🔥3❤1🤯1😍1🦄1
This media is not supported in your browser
VIEW IN TELEGRAM
Понравилась простая mobile first вёрстка. Видно что десктоп сделан по остаточному принципу, но это ничего не портит. Такой материал можно собрать довольно быстро.
Понравилось также как элегантно нарратив завязан на движении по карте. Отмечу функциональный локатор.
https://elpais.com/internacional/2024-05-29/mapas-hamas-resurge-en-areas-de-gaza-que-israel-consideraba-desmanteladas.html
Понравилось также как элегантно нарратив завязан на движении по карте. Отмечу функциональный локатор.
https://elpais.com/internacional/2024-05-29/mapas-hamas-resurge-en-areas-de-gaza-que-israel-consideraba-desmanteladas.html
❤2
Media is too big
VIEW IN TELEGRAM
Увлекательное видео от Экономист прямо в ленте Инстаграма с правильно сделанной пузырьковой картодиаграммой внутри.
Кроме того, много быстро сменяющихся футажей (двигающиеся в кадре фото и видео из соцсетей) с подписью источника и простая 3д сцена с морскими контейнерами; один анимированный цифрофакт; сделанная в Афтере сцена с декоративными переписками мошенников.
Отлично удерживает внимание, без усилий досмотрел до конца
Кроме того, много быстро сменяющихся футажей (двигающиеся в кадре фото и видео из соцсетей) с подписью источника и простая 3д сцена с морскими контейнерами; один анимированный цифрофакт; сделанная в Афтере сцена с декоративными переписками мошенников.
Отлично удерживает внимание, без усилий досмотрел до конца
❤1👍1🤯1
Forwarded from Табакерка
This media is not supported in your browser
VIEW IN TELEGRAM
#несерьзнаяэкономика
- Инфляции нет. Все идет по плану!
- Так в 2020-м средняя зарплата какая была? А в 2025-м практически каждый, включая женщин и стариков, может получать от 210 тысяч плюс выплата за подписание контракта. Что, съели? Ну, признайтесь! Вы просто работать не хотите, а хотите только ролики свои снимать.
- Инфляции нет. Все идет по плану!
- Так в 2020-м средняя зарплата какая была? А в 2025-м практически каждый, включая женщин и стариков, может получать от 210 тысяч плюс выплата за подписание контракта. Что, съели? Ну, признайтесь! Вы просто работать не хотите, а хотите только ролики свои снимать.
👆Пример вирального видео, построенного на простейшем сравнении цен автомобилей сейчас и 5 лет назад. Из аналитики — [неправильно] рассчитанные проценты роста (или что это?).
Осталось добавить нормализацию по инфляции.
Осталось добавить нормализацию по инфляции.
👀2
Forwarded from data.csv (Алексей Смагин)
Лучшее завершение рабочей недели — с цитатами Дмитрия Медведева
“Ъ” проанализировал канал бывшего президента России, выделил там характерные прилагательные и обзывательства, и сделал генератор фраз.
Теперь, чтобы придумать оригинальное оскорбление, можно обратиться к опыту гуру!
https://www.kommersant.ru/doc/7992199
“Ъ” проанализировал канал бывшего президента России, выделил там характерные прилагательные и обзывательства, и сделал генератор фраз.
Теперь, чтобы придумать оригинальное оскорбление, можно обратиться к опыту гуру!
https://www.kommersant.ru/doc/7992199
😁4
This media is not supported in your browser
VIEW IN TELEGRAM
Формат, про который я уже писал, но есть некоторые отличия.
NYT все больше и все шире (видимо это хорошо идёт по метрикам) использует этот ход. Прямо во время листания ленты запускается видео, которое ведёт автор материала, он сам находится в кадре. В данном случае это graphics editor. Часто там есть какой-то эксперт или человек на месте. В этом случае, так как это визуальный журналист, что мне и показалось важным зафиксировать, он рассказывает на 1,5 минуты историю, построенную на анализе спутниковых снимков и сопровождает инфографикой. Плюс его видео из дома, снятое на телефон, плюс футажи из базы и конечно субтитры.
Фактически это и самостоятельный материал и он же является тизером к основному тексту, под которым выходит.
https://www.nytimes.com/video/world/middleeast/100000010405069/where-will-gazans-go.html?smid=url-share
NYT все больше и все шире (видимо это хорошо идёт по метрикам) использует этот ход. Прямо во время листания ленты запускается видео, которое ведёт автор материала, он сам находится в кадре. В данном случае это graphics editor. Часто там есть какой-то эксперт или человек на месте. В этом случае, так как это визуальный журналист, что мне и показалось важным зафиксировать, он рассказывает на 1,5 минуты историю, построенную на анализе спутниковых снимков и сопровождает инфографикой. Плюс его видео из дома, снятое на телефон, плюс футажи из базы и конечно субтитры.
Фактически это и самостоятельный материал и он же является тизером к основному тексту, под которым выходит.
https://www.nytimes.com/video/world/middleeast/100000010405069/where-will-gazans-go.html?smid=url-share
🕊2
Forwarded from Дата-сторителлинг (Андрей Дорожный)
📈Wordle для диаграмм
В копилку дата-квизов. Игра Chartle — что-то вроде Wordle, но для диаграмм: игроки угадывают страну, выделенную на графике красным цветом. Увлекательно и интересно, новые задания каждый день. Проверьте себя, перешлите коллегам.
Еще по теме
Дата-квиз на знание мира в 2100 году
Подписывайтесь 👉 📈Дата-сторителлинг
В копилку дата-квизов. Игра Chartle — что-то вроде Wordle, но для диаграмм: игроки угадывают страну, выделенную на графике красным цветом. Увлекательно и интересно, новые задания каждый день. Проверьте себя, перешлите коллегам.
Еще по теме
Дата-квиз на знание мира в 2100 году
Подписывайтесь 👉 📈Дата-сторителлинг
👆Внимательные читатели подсказали, что я не написал ссылку. Исправляюсь!
https://meodai.github.io/poline/
https://meodai.github.io/poline/
meodai.github.io
Poline — Esoteric Color Palette Generation Library
poline is lightweight, dependency free and fast JavaScript function written in TypeScript. It draws lines between anchors over polar coordinates to generate pleasing color palettes.
❤4
Forwarded from Denis Sexy IT 🤖
Если кто-то хотел почитать вечером что-то на Английском, то вот – копия емейл ящика Джеффри Эпштейна с закосом под Gmail почту:
https://jmail.world/
Переписку официально опубликовал сенат США на этой неделе
Если вы не знаете кто это, я вам завидую – почитать можно тут, сразу скажу, история мерзейшая, не буду ее пересказывать
https://jmail.world/
Переписку официально опубликовал сенат США на этой неделе
Если вы не знаете кто это, я вам завидую – почитать можно тут, сразу скажу, история мерзейшая, не буду ее пересказывать
❤1
Я бы отметил как просто и лаконично сделано с технической точки зрения. Ведь это же просто галерея статичных картинок, меняющихся по скроллу. Но сторителлинг зарешал.
👇🏻
👇🏻
Forwarded from Диаграммы и презентации
Хочу поделиться пусть совсем не новым, но сильным визуальным проектом от Reuters. Он показывает масштаб кризиса рохинджа в 2017 году: сколько людей было вынуждено бежать, как быстро выросли лагеря беженцев и как огромная толпа превращается в целый "город", сопоставимый с крупными городами. Через постепенное увеличение численности - от десятка до сотен тысяч - визуализация позволяет почувствовать масштаб трагедии не как сухие цифры, а как жизнь огромного количества людей.
1. Масштаб, который ощущается физически
История начинается с малого: 15 человек. А после идет на увеличение. Ты просто скроллишь, а толпа перед глазами растет. Иногда увеличение масштаба работает честнее любых линий и столбцов: цифры становятся чем-то, что можно прочувствовать.
2. Переход от фигур к абстракции
Сначала показаны человеческие фигуры. Когда количество достигает сотен тысяч, визуализация превращается в строгую сетку-плитку. Переход сделан аккуратно: сначала создается эмоциональная связь, а затем внимание плавно переводится на масштаб.
3. Правильные аналогии
Сравнение численности лагеря с известными крупными городами мира - сильный ход. Это классический, но очень эффективный прием: мы плохо ощущаем огромные числа, но намного лучше понимаем, например, масштаб знакомых городов. После такого сравнения цифра перестает быть абстракцией.
4. Минимум цветов, украшений, никакого визуального шума
Все внимание на количестве людей и на масштабе происходящего.
5. Текст поддерживает, а не перетягивает внимание
Reuters грамотно дозируют текст: ровно столько, чтобы понять контекст, но не отвлечься от визуальной части. Это важно: визуализация работает как основной рассказчик, а текст как проводник.
Очень качественная работа и сильный пример того, как датавиз способен говорить о сложных гуманитарных темах
➡️https://www.reuters.com/graphics/MYANMAR-ROHINGYA/010050XD232/
1. Масштаб, который ощущается физически
История начинается с малого: 15 человек. А после идет на увеличение. Ты просто скроллишь, а толпа перед глазами растет. Иногда увеличение масштаба работает честнее любых линий и столбцов: цифры становятся чем-то, что можно прочувствовать.
2. Переход от фигур к абстракции
Сначала показаны человеческие фигуры. Когда количество достигает сотен тысяч, визуализация превращается в строгую сетку-плитку. Переход сделан аккуратно: сначала создается эмоциональная связь, а затем внимание плавно переводится на масштаб.
3. Правильные аналогии
Сравнение численности лагеря с известными крупными городами мира - сильный ход. Это классический, но очень эффективный прием: мы плохо ощущаем огромные числа, но намного лучше понимаем, например, масштаб знакомых городов. После такого сравнения цифра перестает быть абстракцией.
4. Минимум цветов, украшений, никакого визуального шума
Все внимание на количестве людей и на масштабе происходящего.
5. Текст поддерживает, а не перетягивает внимание
Reuters грамотно дозируют текст: ровно столько, чтобы понять контекст, но не отвлечься от визуальной части. Это важно: визуализация работает как основной рассказчик, а текст как проводник.
Очень качественная работа и сильный пример того, как датавиз способен говорить о сложных гуманитарных темах
➡️https://www.reuters.com/graphics/MYANMAR-ROHINGYA/010050XD232/
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Совершенно роскошный дата-геосторителлинг для промо поста в рамках челленджа в соцсети.
🔥13
Forwarded from Чартомойка (Aleksandr Bogachev)
Yan Holtz сделал очень симпатичную игрушку (и историю вокруг неё) о том, как сделать график более читаемым и аккуратным.
Попробуйте сами, лучше только на десктопе.
https://www.react-graph-gallery.com/example/line-chart-design-improvement
Попробуйте сами, лучше только на десктопе.
https://www.react-graph-gallery.com/example/line-chart-design-improvement
👎1👀1