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
Интересная вещь: артисты начали красить все обложки старых релизов под цвет нового альбома. Заходишь в карточку артиста и понимаешь — что-то происходит интересное
К — консистентность
К — консистентность
❤9🔥6