Disarto

Крайне редко пользуюсь инстаграмом, но сегодня заметил, что квадратная сетка в профиле стала прямоугольной 🧐.

Неудачное решение, которое нарушает один из основных принципов цифрового дизайна "главное — это данные пользователя". В этом случае Meta наплевала на факт того, что люди годами адаптировали свой контент под квадратный формат.

Интерфейс должен подстраиваться под пользователя, а не наоборот. В итоге Meta оправданно получает свою порцию хейта на всех площадках)

Залил небольшое видео на Youtube. Показываю процесс организации референсов в Eagle.

https://youtu.be/zFJXD1tTbmE

https://crustmill.com/ — минималистичный, стильный сайт для… измельчителя специй 😅.

Всё как мы любим: шикарные рендеры, скролл-анимация, современная элегантная типографика.

Из интересных решений:
✨ Переключалка цветов
✨ Горизонтальный скролл со специями
✨ Приятная сбалансированная bento плиточка

Долгое время не дизайнил практически ничего за пределами работы. В итоге дизайн начинает превращаться в рутину.

Пообещал выделять себе хотя бы несколько часов в неделю на дизайн для удовольствия. Периодически буду делиться результатами 🤭.

В этот раз захотелось порисовать простые паттерны.

Делитесь своими набросками/сайд проектами в комментах 🙂

Новое видео. Небольшой сравнительный тест ChatGPT и DeepSeek 🤓

https://youtu.be/9SkBieZuXJo

https://www.designspells.com/ — полезный сайт, собирающий различные микро-взаимодействия: анимация иконок, раскрытие панелек, всевозможные переходы, попапы, модалки, и многие другие полезные мелочи ☺️.

Однозначно рекомендую добавить в список сайтов, куда периодически можно ходить за вдохновением и рефами.

Новое видео на Youtube. В этот раз экспериментальный формат — смотрим вместе приложение Uxcel Go 🤓

https://youtu.be/TiQEmEy8hLU

👆В дополнение к предыдущему посту.

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

Пришлось пройти процесс отрицания и затем принятия ситуации 😁. Помимо этого, нужно было дождаться доступа к новому интерфейсу, так как обновление Фигма выкатывала постепенно и не для всех (кстати, на мой взгляд это плохой способ обновления продукта, по крайней мере с точки зрения конечного потребителя).

В итоге, вторая попытка стартовала в Августе и закончил запись я только в середине Декабря, с небольшими предрелизными активностями в Январе. Всего было потрачено 330+ часов (из них 80 на первую неудачную попытку). Изначально планировал потратить 120 часов 😅.

Выводы:
1. Ещё раз подтвердился факт, что нужно закладывать на проект в 2 раза больше времени, чем рассчитываешь изначально.
2. Анализировать ситуацию перед стартом большого проекта. В целом я знал, что Фигма выкатывают большие обновления каждый год летом, но не принял это во внимание.
3. Даже в неприятной ситуации можно найти точки для роста, т.к. в итоге из-за нехватки времени работу по монтажу видео я делегировал, хотя до этого думал, что никто кроме меня с этим не справится 😅.

Сегодня запустили новую версию курса Супер Figma 🎉. Если вы вдруг только присматриваетесь к профессии дизайнера интерфейсов, или хотите подтянуть свои знания по Фигме — то добро пожаловать 🤗.

Посмотреть подробности можно тут — https://cloudlessons.ru/v/500/

https://bfcm.shopify.com/ — совершенно безумный сайт, отображающий BFCM 2024 данные Shopify. Огромное количество мест, с которыми можно взаимодействовать: переткнуть кабели, покрутить различные ручки, поиграться слайдерами и тумблерами, покрутить глобус.

Чистый детский восторг 🤩.

P.S. Ещё несколько сайтов на ту же тематику:
https://bfcm.stripe.com/
https://vercel.com/bfcm

С Новым Годом! 🎄✨🎉

Загрузил в Figma Community ещё один пак абстрактной графики, сгенеренной с помощью MJ.

Как и в прошлый раз, в наборе .png изображений с прозрачным фоном. Будут полезны для создания визуальных концептов 🤓

Все картинки доступны как для персонального, так и для коммерческого использования.

В файле есть несколько примеров использования.

Забрать можно здесь — https://www.figma.com/community/file/1456642222955541221/15-abstract-rainbow-objects-pack

https://mymind.com/ — продукт с интересной концепцией. Устанавливаете расширение в браузер или мобильное приложение и сохраняете всё, что вам попадается в интернете (картинки, ссылки, статьи, товары, и т.д). Приложение само отсортирует за вас информацию по различным параметрам. В итоге вы скидываете всё в один котёл и mymind делает магию (конечно же не без помощи нейросетки).

Одной из главных фишек продукта является мощный поиск. Можно искать по типу объекта на картинке, по тексту (причём текст можно искать в том числе и на изображениях), тегам, формату и т.д.

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

Бесплатная версия довольно сильно ограничена, но я всё равно рекомендую ознакомиться с этим продуктом. Как минимум получите эстетическое удовольствие🙂.

Новое видео из рубрики дизайн систем. Смотрим Контур Гайды 🤓

https://youtu.be/3oAnRCHJxHI?si=PpR5tBBfX8kwwEZe

https://www.lummi.ai/

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

Можно использовать в дополнение к привычным https://unsplash.com/ и https://www.pexels.com/. Все изображения бесплатные, в том числе для коммерческого использования.

Canva релизнули мини-презентацию о трендах дизайна на 2025.

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

Жаль, что каждый из пунктов не раскрыли должным образом (т.к. по сути это просто промо-сайт шаблонов продукта), но выглядит симпатично. Можно использовать как вдохновение 🙂

https://www.canva.com/design-trends/

https://radiocast.co/ — наткнулся сегодня на интересный сайт онлайн радио. Можно слушать 7000+ радиостанций со всего мира. Сам по себе концепт разумеется не новый (мягко говоря). Но основная фишка в том, как реализована навигация и поиск радиостанций. Искать радио на глобусе оказалось очень интересно, и сразу можно прочувствовать атмосферу определенного места. Пока писал пост слушал сначала радио из Арканзаса (США), затем из Колумбии — 2 совершенно разных вайба.

Автор написал, что создал MVP этого сайта с использованием AI (Claude Sonnet 3.5 + Cursor) за 2 субботы. Чтож, кажется пора учиться делать готовые продукты с помощью AI 😅

https://labs.chaingpt.org/ — интересная типографика, круто выдержанный стиль, идеальное сочетание 3d с общим настроением сайта. Отдельно отмечу работу с сочетанием серого и белого, что по сути и создает 80% атмосферы.

На самом деле выглядит как типичный шот с Dribbble, но это реальный сайт. Одним словом — кайф.

#вдохновение@uiux_dsgn #референсы@uiux_dsgn

https://www.are.na/ — сайт для сбора референсов, о котором мало кто знает. По принципу работы это то же самое, что Pinterest: пользователи сохраняют понравившиеся изображения в коллекции.

Если вы зайдете на главную страницу, то не увидите ничего примечательного (кроме крайне аскетичного дизайна). Для того, чтобы начать полноценно пользоваться сервисом, нужно создать бесплатный аккаунт. Без этого вы даже не сможете воспользоваться поиском по сайту.

Однако, если вы введете в гугл что-то вроде “are.na UI/UX” или “are.na graphic design” то попадете напрямую на коллекции, собранные пользователями (так можно обойти необходимость регистрироваться). И вот тут становится понятно, для чего в принципе стоит обратить внимание на этот сервис. Это такой андеграунд пинтерест, где можно часами переходить от одного блока к другому (так здесь называются сохраненные файлы) наслаждаясь эстетикой брутализма.

Я иногда прихожу сюда за вайбом, который вы можете видеть в картинке к этому посту 🙂.

#вдохновение #референсы

https://halodental.com/ — сайт цифрового стоматологического зеркала 🪞😬

Приятные микро-анимации, крутые визуалы (рендеры и моушн), практичный лэйаут. Все страницы безупречно выдержаны в одном стиле.

С одной стороны ничего революционного, но если описать ощущение от сайта несколькими словами — то это качество и стиль.

Помимо главной есть смысл посмотреть также и другие страницы. Мобильная версия кстати выглядит ничуть не хуже десктопа.

Потестировал работу AI инструмента удаления фона в Фигме и в Фотошопе на 4 примерах.

1. Здесь Photoshop явно выигрывает. Фигма взяла слишком много лишнего. Хотя у Фотошопа менее удачно получилась обработка граней объекта.

2. Во втором примере Фигма на удивление лучше справилась с перьями, да и с изображением в целом.

3. В третьем примере также лучше справилась Figma. Фотошоп сильно "пожрал" кофту модели.

4. Ну и наконец в четвертом примере полная победа Фигмы. Фотошоп снова понаделал дыр там, где они не нужны.

Результаты меня удивили. Я был уверен, что нейронка фотошопа лучше справится с этой задачей (так как продукт всё-таки заточен под работу с изображениями). Но если бы не первый пример, то победа Фигмы была бы абсолютной.

Новое видео на канале. Смотрим Figma AI 🤖

https://youtu.be/WK7iLcsTckc?si=DiFhvEpUZNPIDW-O

За эту неделю получил сразу 2 крутых обновления ChatGPT (у меня подписка Plus).

1. Обновленная голосовая модель. Самое важное для меня — сильно сократилась задержка до ответа и можно наконец перебивать чат. До этого бесило, что приходится выслушивать лишнее, нажимать на экран, чтоб прервать ответ, и затем несколько секунд ждать, пока чат среагирует на новый запрос. Помимо этого говорить нужно было быстро, задумаешься пока формулируешь мысль — сразу пойдет ответ. Теперь задержка менее секунды, и чат на лету понимает, когда нужно замолчать 😁. Помимо этого чат стал понимать юмор и появился выбор голосов.

2. ChatGPT Canvas. По сути это текстовый редактор (с поддержкой кода). Теперь можно выделять конкретные фрагменты текста или кода, и просить ChatGPT что-то с ними сделать (например, переформулировать, дописать или объяснить). В результате сильно увеличивается точность работы. Уже вижу как становятся не нужны многочисленные AI продукты, предлагавшие похожий функционал (а таких в последнее время очень много).

Про сырые обновления.

Обновил на днях iOS и macOS до последних версий. На маке после обновления стали рандомно мигать обои. Очень отвлекает от работы и дико бесит. Некоторые программы, например Loom, автоматически запускаются при определенных действиях, не связанных с ними (чего раньше не случалось). Появились какие-то подлагивания и тормоза там, где их раньше никогда не было.

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

Совершенно не понятно, чем занималась команда тестирования Apple. Такое ощущение, что их там всех поувольняли и выкатили обновление без тестирования вовсе. 😅 В итоге получилось что улучшений никаких (немногочисленные новые функции мне не очень нужны), а вот в ежедневный рабочий процесс добавилось шерховатостей и геморроя. Я всегда считал, что не стоит загружать обновления сразу после выхода, лучше подождать неделю-другую. Но настолько кривой апдейт вижу впервые. И особенно странно что это Apple, которая славится “гладкостью” своего пользовательского опыта. В этот раз получилось совсем не гладко.

Тестируйте обновления перед тем, как выкатывать в прод. Накипело 😁

Немного сайтов для визуального вдохновения. Смотрим стильный e-commerce.

https://youtu.be/u6Y7OJF_CJs?si=PW6sMen-Klx5PzGg

Привет! 👋

1 Октября стартует седьмой поток курса UI/UX дизайн. Группы по-прежнему набираю небольшие (8-10 человек). Стоимость курса с фидбеком 45.000р.

Для записи пишите @disarto

Подробности можно посмотреть на страничке в Notion (там же вы найдете отзывы студентов)
https://disarto.notion.site/UI-UX-design-7-fcfd465ebab24b52a735b63d218147a4?pvs=4

https://abtest.design/ — коллекция успешных A/B тестов от Mobbin.

У каждого теста есть описание, результаты, а также примеры, в каких ещё приложениях используются похожие экраны. Также есть ссылки на развернутые статьи по большинству тестов.

По сути это огромная база знаний по рабочим UX паттернам (ещё и с полноценными кейсами по каждому из них). Крайне рекомендую к ознакомлению.

Обзор приложения Brilliant — обучение математике, логике, computer science и другим наукам 👨‍🔬

https://bennettandclive.com/ — сайт рекламного и брендинового агентства.

Контрастная типографика, классные визуалы, интересные типографические эффекты при скролле (особенно показательна с этой точки зрения страница About).

Оставляет очень позитивные впечатления.

Обзор приложения ZARA 👜

Интересный e-commerce, но не без недостатков. Есть ощущение, что в первой части видео приложение работало не так, как должно было 🤷

Будет интересно почитать ваше мнение 🙂

https://superpower.com/ — сайт с интересными переходами и ховер эффектами.

Записал видео по Figma UI3. Наконец-то дали доступ 😅😅

https://youtu.be/_YFIEQ3HlqY?si=On92NlnTWnURVIz0

Новое видео на канале. Пробуем генерить 3d модели с помощью нейросетей на примере функционала Spline и Meshy AI.

https://youtu.be/IRE7EdQxQSg?si=csjJWHrhz-UBP5J3

Продолжаю делать обзоры приложений. Сегодня смотрим Core by Chloe Ting.

Это не совсем стандартный обзор, т.к. я сам вовлечен в процесс работы над этим продуктом. Но тем интереснее будет услышать ваш фидбек 🙃

https://equals.com/ — продукт для анализа данных (таблицы + BI).

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

Присутствуют яркие цвета, ретро-иконки, и легкий брутализм 🙂

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

Мне очень интересно узнать, как вам такой формат — заходит или нет? И нужно ли снимать ещё на подобные темы?

https://youtu.be/Nbk3vjr-cvI?si=O0fH3RUP5dP5chRZ

https://techspeed.com/ — сайт компании, представляющей различные сервисы, связанные с данными.

Очень интересный стиль интерактивных иллюстраций: реагируют на курсор, можно неплохо так залипнуть на несколько минут.

Яркие нестандартные цвета, обилие графики, анимированные переходы между страницами. Всё это делает сайт немного безумным (так как иногда все эти эффекты применяются сверх меры), но от этого не менее интересным для изучения.

На внутренних страницах также есть что посмотреть, всё сделано с любовью. Рекомендую также заглянуть на страницы About и Success Stories — есть интересные решения 🤓