Клятый AirBnb
Для меня до сих пор загадка, почему любое обновление Airbnb вызывает такой ажиотаж. Последнее обновление вообще положило Twitter, но, как по мне, тридэшки — ну, средние, а на проде видосы — 10 шакалов из 10. Предположу, что такое внимание связано с сэром Джонни Айвом, который ведёт всю работу с концептами и лук-н-филом продукта.
Пропускать инфоповоды не хочу, но рассказывать, как мне понравилось, когда это не так, тоже не буду. Так что вот вам короткий гайд, как сделать "по-Airbnb-шному", но не потратить миллион деняк на дизайнеров Apple
За основу берём гайд, который я уже делал. Оттуда нужно взять этап с тем, как заставить GPT выучить стиль для наших иллюстраций. Ассет приложил в комменты
Затем берём новенькую нейроночку Runway, запихиваем туда нашу иконочку и просим анимировать
Вуа-ля
Для концепта или чтобы показать продакту — покатит
Для меня до сих пор загадка, почему любое обновление Airbnb вызывает такой ажиотаж. Последнее обновление вообще положило Twitter, но, как по мне, тридэшки — ну, средние, а на проде видосы — 10 шакалов из 10. Предположу, что такое внимание связано с сэром Джонни Айвом, который ведёт всю работу с концептами и лук-н-филом продукта.
Пропускать инфоповоды не хочу, но рассказывать, как мне понравилось, когда это не так, тоже не буду. Так что вот вам короткий гайд, как сделать "по-Airbnb-шному", но не потратить миллион деняк на дизайнеров Apple
За основу берём гайд, который я уже делал. Оттуда нужно взять этап с тем, как заставить GPT выучить стиль для наших иллюстраций. Ассет приложил в комменты
Затем берём новенькую нейроночку Runway, запихиваем туда нашу иконочку и просим анимировать
Вуа-ля
Для концепта или чтобы показать продакту — покатит
🔥17❤8🤔5
This media is not supported in your browser
VIEW IN TELEGRAM
Ля, а че никто не пишет, что телега тож обновление выкатила
Офигенный паттерн для создания нового элемента из галереи
Такое мыукрадём адаптируем
Офигенный паттерн для создания нового элемента из галереи
Такое мы
🔥14❤11
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Transform
Emil Kowalski, design-engineer из Linear, разбирает базовую, но часто недооценённую магию свойства
Каждый приём иллюстрируется живыми демо: тосты, шторки и даже анимация броска в мусорку
Ссылка
#полезное
Emil Kowalski, design-engineer из Linear, разбирает базовую, но часто недооценённую магию свойства
transformКаждый приём иллюстрируется живыми демо: тосты, шторки и даже анимация броска в мусорку
Ссылка
#полезное
❤12🔥5
Как я рисую концепты
Вот тут спрашивал вас, про что было бы интересно почитать — была очень яркая реакция, что хотите почитать про концепты
Начнём с базы. Есть 5 слоёв концепции:
Идея → Стиль → Композиция → Шрифты → Цвета
Что такое идея концепта
Представим, что вы рисуете карточку товара, и у вас появилась идея: сделать не просто карточку товара, а, скажем, кастомизатор или калькулятор. Этап идеи — опционален, его может и не быть. Это может быть просто классное визуальное решение без глубокой задумки — и это ок
Стиль
Здесь чуть сложнее. Грубо говоря, это лук-н-фил: где часть — про шрифт, часть — про механику, часть — про ощущения. В общем, каким прилагательным вы бы описали макет?
Например: простой, минималистичный, трэшовый, отлетевший, традиционный и т. д.
Композиция
Здесь рекомендую пользоваться методом коллажирования: берёте референс, который вам нравится, и вставляете скриншот понравившегося блока. Прям тупо копируем чужой кусок — и из таких "огрызков" собираем свою композицию. Главное — не копировать и стиль, и композицию одновременно, иначе это уже будет плагиат. Немного отсюда, немного оттуда
Шрифты
Обычно для наброса я беру SF Pro. Дальше зависит от настроения и цели концепта, шрифт можно взять совершенно оторванный от остальных рефов. Главное сохранить стили и принципы использовании типографики рефа. На апке это не очень понятно, здесь лучше на примере веба работает
Цвета
Иногда прошу GPT накидать палитры, иногда беру с какого-то рефа и модифицирую под задачу, самый неприхотливый этап, бери пипетку и вперед
Как это работает на примере
Я вижу клёвую, нестандартную композицию, например: разделение экрана на две подложки. Это уже есть идея и общая композиция, верхнеуровневая. Далее ищу реф с другим настроением, сильно отличающимся по композиции для верстки блоков
Помогает менять тему концепта референса. Например, был концепт музыкального сервиса, а я сделал сохранялку постеров — это не даёт зафреймиться на основном рефе
Если композиция накидывается — докидываю детали: навбар, заголовки, инпуты и т.д. Работаю итерациями — по чуть-чуть наращиваю плотность и проработку
В самом конце проверяю логику, чтобы концептом можно было пользоваться
Как-то так💛
P.S. Бесконечный респект тем, кто дочитает до конца
Вот тут спрашивал вас, про что было бы интересно почитать — была очень яркая реакция, что хотите почитать про концепты
Начнём с базы. Есть 5 слоёв концепции:
Идея → Стиль → Композиция → Шрифты → Цвета
Что такое идея концепта
Представим, что вы рисуете карточку товара, и у вас появилась идея: сделать не просто карточку товара, а, скажем, кастомизатор или калькулятор. Этап идеи — опционален, его может и не быть. Это может быть просто классное визуальное решение без глубокой задумки — и это ок
Стиль
Здесь чуть сложнее. Грубо говоря, это лук-н-фил: где часть — про шрифт, часть — про механику, часть — про ощущения. В общем, каким прилагательным вы бы описали макет?
Например: простой, минималистичный, трэшовый, отлетевший, традиционный и т. д.
Композиция
Здесь рекомендую пользоваться методом коллажирования: берёте референс, который вам нравится, и вставляете скриншот понравившегося блока. Прям тупо копируем чужой кусок — и из таких "огрызков" собираем свою композицию. Главное — не копировать и стиль, и композицию одновременно, иначе это уже будет плагиат. Немного отсюда, немного оттуда
Шрифты
Обычно для наброса я беру SF Pro. Дальше зависит от настроения и цели концепта, шрифт можно взять совершенно оторванный от остальных рефов. Главное сохранить стили и принципы использовании типографики рефа. На апке это не очень понятно, здесь лучше на примере веба работает
Цвета
Иногда прошу GPT накидать палитры, иногда беру с какого-то рефа и модифицирую под задачу, самый неприхотливый этап, бери пипетку и вперед
Как это работает на примере
Я вижу клёвую, нестандартную композицию, например: разделение экрана на две подложки. Это уже есть идея и общая композиция, верхнеуровневая. Далее ищу реф с другим настроением, сильно отличающимся по композиции для верстки блоков
Помогает менять тему концепта референса. Например, был концепт музыкального сервиса, а я сделал сохранялку постеров — это не даёт зафреймиться на основном рефе
Если композиция накидывается — докидываю детали: навбар, заголовки, инпуты и т.д. Работаю итерациями — по чуть-чуть наращиваю плотность и проработку
В самом конце проверяю логику, чтобы концептом можно было пользоваться
Как-то так
P.S. Бесконечный респект тем, кто дочитает до конца
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥39❤17👍12
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Красивой пятницы, вот вам подборка рефов
1❤11🔥6👍3