Как я рисую концепты
Вот тут спрашивал вас, про что было бы интересно почитать — была очень яркая реакция, что хотите почитать про концепты
Начнём с базы. Есть 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
Хороший пример как можно обновить стандартный опыт пользователя
Apple сделала трейлер F1 с тактильной отдачей, странно, что сделали только сейчас
Есть несколько слоев хаптика, ощущается интересно, но меня почему-то бесит
Apple сделала трейлер F1 с тактильной отдачей, странно, что сделали только сейчас
Есть несколько слоев хаптика, ощущается интересно, но меня почему-то бесит
🔥8❤1
Я заболел, решил: голова не варит — чё, пойду гляну новые гайдлайны эпловые. Как правильно теперь рисовать интерфейсы
И у меня очень много вопросов
Вот, например, первое изображение — это показывали, как правильно шторки рисовать. И там три разных стиля по отступам
Второй прикол: показали текстовую кнопку с кривыми отступами
Третий — вот пример объединённой навигации. Ниже — пример, как по гайдам нужно верстать
Кривая галка в кнопке
Пятый момент: сначала подумал, что у стрелки есть компенсация — немного левее, как это сейчас сделано в текущих гайдах. А нет — в другом месте отступы одинаковые
Чё?
Сам видос
И у меня очень много вопросов
Вот, например, первое изображение — это показывали, как правильно шторки рисовать. И там три разных стиля по отступам
Второй прикол: показали текстовую кнопку с кривыми отступами
Третий — вот пример объединённой навигации. Ниже — пример, как по гайдам нужно верстать
Кривая галка в кнопке
Пятый момент: сначала подумал, что у стрелки есть компенсация — немного левее, как это сейчас сделано в текущих гайдах. А нет — в другом месте отступы одинаковые
Чё?
Сам видос
🗿12🔥6👍3