Дизайн 360° | Pragmatica

Дизайн 360° | Pragmatica

@senior_designer_pragmatica
Изображение канала: Дизайн 360° | Pragmatica
15 991 подписчик
21 пост
Посты
ai-сезон — всё ⚫️⚫️⚫️
6 недель мы делились хот тейками, кейсами, тулами и инсайтами про работу с нейронками в дизайне. собрали для вас самые жирные посты, сохраняйте: — как завайбкодили сайт 5heads меньше чем за 10 часовтутор: как создавали айдентику и глитчевых чуваков для «кайференции»как собрали генеративный инструмент под айдентику проектакакие ai-тулы добавить в свой базовый минимум (или роскошный максимум, сами решайте) и пайплайнпро навыки нейрокреаторов, которые на рынке сегодня просто mustтутор: как генерить реалистичную кожу через токены, json-промпты и enhancorкак из айдентики бренда вырос 3d-рыцарь на нейронкахподелились процессом создания ресайзератутор: как навайбкодить эффект и пошерить его на netlifзапись нашего первого воркшопа по вайбкодингу и результаты в чатестатья с мнениями о том, как ai меняет профессию дизайнера, процессы и рынок дизайн-студий спасибо, что ставили 🙉 котов на посты, задавали интересные вопросы в комментах и поддерживали нас! кликайте сферу из поста дальше за делами ai юнита можно будет подглядывать в тг-канале 5heads
если собираетесь на наш бесплатный воркшоп по вайбкодингу во вторник, вот вам способ изучить базу: продуктовый лид ⚪️ лёва сделал видео на ютуб, где за несколько шагов с помощью вайбкодинга собирает эффект для сайта.
на практике показал путь от макета в Figma до готового для шера с друзьями эффекта на Netlify — это без единой строчки кода вручную. пайплайн такой: макет в Figma → спека через Claude → план в Cursor → генерация кода → паблишинг на Netlify. <<< смотреть видос >>>
⚫️ ХОТ ТЕЙК:
НЕЙРОНКА УМЕЕТ ДЕЛАТЬ РЕСАЙЗЫ. НО ПОКА НЕ УМЕЕТ ДУМАТЬ О КОМПОЗИЦИИ наш creative technologist ⚪️ влад решил собрать ресайзер, который генерит баннеры под разные форматы прямо в фигме. идея была такая: взять мастер-макет и отдать его llm-модели, чтобы она пересобрала композицию под нужный размер. на практике: оказалось, что нейронка не очень понимает композицию. элементы остаются на месте, но что-то уезжает, странно масштабируется или теряет аккуратность. влад попросил модель делать несколько вариантов баннера, чтобы было из чего выбирать. параллельно задали более жёсткие условия: где остаются ключевые элементы, как они масштабируются, что нельзя сдвигать или перекрывать. добавил базовые проверки — чтобы элементы не накладывались, не вылезали за границы и сохраняли читаемую структуру. если результат не устраивал, дорабатывали его повторными запросами. в итоге сложилась простая цепочка: сгенерили → выбрали лучшие варианты → попробовали поправить. качество выросло, но было что улучшать. лучший результат получили, когда начали работать с моделью через чат и давать ей доступ к макету. так она меньше ломает структуру и аккуратнее собирает баннер. сейчас дорабатываем ресайзер до продукта внутри студии и считаем экономику — где нейронки ускоряют работу, а где пока нет. итог: ресайз через ai выглядит вполне реальным. но как сделать его комфортным для использования — пока вопрос открытый⚫️
⚫️ ХОТ ТЕЙК: РЫЦАРЬ ИЗ СЛУЧАЙНОГО КАДРА ВЫРОС В 3D И ПОПАЛ НА САЙТ. ИЛИ КАК МЫ ДЕЛАЛИ АЙДЕНТИКУ С AI
в прагматике разработали айдентику для финтеха payfect (behance) — с ресёрчем, 3d-ассетами и синей «монеткой» как центром всей системы. для мерча искали ход, который расширит стиль и добавит ему характера: «вдохновение пришло из фильма the fall (2006) — кадр с рыцарем и флагом напомнил лого payfect. через ресайз midjourney, krea enchance, ручную дорисовку в photoshop и inpaint я собрала новый визуальный мотив», – ⚪️ лера, ведущий дизайнер 5heads мы начали думать, как ещё можно развить стиль через нейронки. вместе с ⚪️ юлей и ⚪️ владом из 5heads решили проверить идею, которая сначала казалась сложной: собрать 3d-модель и сразу дать ей жизнь на сайте юля сгенерила 3d-рыцаря, а влад завайбкодил сайт, где его можно покрутить — ловите! лучше смотреть с телефона. в итоге — несколько часов на генерацию и сборку вместо полноценного 3d-продакшена⚫️
до вашего шанса повайбкодить вместе с прагматикой — 12 дней
21 апреля проведем воркшоп по вайбкодингу с ⚪️ владом, нашим creative technologist. он уже собрал на вайбкоде сайт 5heads и знает, где у этого инструмента кнопка «вжух», а где нужно доделать руками. ⚫️ формат сначала влад расскажет всю базу про вайбкодинг (без воды, 20–30 минут). потом — практика: вместе будем перерисовывать сайт большой практики. между блоками — ваши вопросы и фидбэк от влада. ⚫️ что нужно для участия аккаунт в figma + cursor / claude code / платный gpt + codex ⚫️ когда 21 апреля, 18:00 первые 15 зарегистрировавшихся и заполнивших анкету в боте попадут на воркшоп участниками. остальным пришлём ссылку на прямой эфир на ютубе — сможете наблюдать вживую и вайбкодить самостоятельно! еще среди всех участников разыграем 2 бесплатных места на Большую Вайбкод-практику — победителей объявим прямо на эфире. << зарегистрироваться в боте >>
⚫ ХОТ ТЕЙК: ИМЕННО КОЖА ЛОМАЕТ ОЩУЩЕНИЕ РЕАЛЬНОСТИ В AI-ПОРТРЕТАХ
если кожа в генерации выглядит замыленной, причина этого может быть не только в модели, но и в самом процессе: как вы задаете акценты, формулируете промпт и дорабатываете результат. в новом ютуб-видео ведущий дизайнер нашего ai-юнита 5heads ⚪ лера мацуева показывает, как сгенерить реалистичную кожу без «мыла». в ролике даем поэтапный разбор, как добиться естественной кожи через отдельные токены, json-промпты и пост-продакшн. в конце прогоняем всё это на реальном кейсе payfect и делимся фигмой с артефактами и промптами. <<смотреть и генерить с нами >>
⚫️ ХОТ ТЕЙК: ДОСТУП К AI ЕСТЬ У ВСЕХ. СИЛЬНЫХ НЕЙРОКРЕАТОРОВ — ЕДИНИЦЫ
рынок меняется быстрее, чем появляются новые названия профессий. нейрокреатор — уже не отдельный спец, а полноценный level up для дизайнеров. в новой статье на vc лид нашего ai-юнита 5heads ⚪️ лера мацуева разобрала: • какие навыки реально формируют нейрокреатора • как сейчас устроен рынок и спрос • и куда всё это двигается дальше го читать и лайкать
⚫️ ХОТ ТЕЙК:
МЫ СОБРАЛИ AI-ПЛАГИН ЗА ВЕЧЕР — И ОН СТАЛ ЧАСТЬЮ БРЕНДА. делали брендинг для кодинг-платформы Gitverse и в процессе решили поэкспериментировать: а что если собрать собственный генеративный инструмент под айдентику? первую драфтовую версию сделали за вечер с Cursor, WebGL и простым хостингом на Netlify. версией для гитверса поделиться не можем, но показываем ее урезанную версию на скринкасте и то, как она работает в других креативах 🦄 «клиенту зашло, и вместо того чтобы остановиться на демке, мы начали наращивать функциональность: добавили работу с видео, выгрузку SVG, управление их процентным соотношением, кастомные палитры, формы и управление контрастом исходника», – ⚪️ лёва, продуктовый лид суммарно ушло около 20 рабочих часов — мы постоянно докручивали и тестировали. чтобы выкатывать обновления моментально, настроили CI с github-репозиторием. • вывод? иногда ai-инструменту не нужно быть сложным — важнее, чтобы он точно попадал в потребность. покликать > pgverse.netlify.app
💀 ХОТ ТЕЙК:
ИНОГДА ЧЕМ МЕНЬШЕ КОНТРОЛИРУЕШЬ НЕЙРОНКУ, ТЕМ ЖИВЕЕ ПОЛУЧАЕТСЯ СТИЛЬ. вы просили тутор на глитчевых чуваков с кайференции — вот забирайте! айдентика кайференции рождалась из ощущений: мы хотели видеть стиль, который не притворяется аккуратным, а сразу даёт понять, что здесь будет странно и по-своему весело. в работе мы вдохновлялись старыми видеоиграми и работами Гао Ханга — дальше генерили визуалы в Krea, оживляли их в Runway и делегировали написание промптов GPT. в свежем видео на ютубе наш лид-дизайнер ⚪️ настя иванова разбирает весь процесс создания айдентики и делится инструментами. >>> го смотреть на ютубе и накидывать 🙉
🌪 ищем джуна в самый крутой отдел прагматики — маркетинг
вакансия мы впервые (и, скорее всего, единственный раз за ближайший год) открываем джуниорскую позицию в наш in-house маркетинг-отдел — команду, которая создаёт бренд прагматики, офферы, визуалы, лендинги, мерч, видосы и остальное крутецкое всё. как попасть мы сделали открытое тестовое задание — оно лежит в фигме. итог выкладывайте в комменты к этому посту с хэштегом #вмаркетинг и коротким рассказом о себе. не забудьте сделать ссылку открытой. срок сдачи — до 5 марта. дальше мы берем время, чтобы изучить ваши работы, позвать лучших на интервью и если всё совпадёт, предложить оффер от прагматики. ещё бонусы за участие • 3 лучших заберут менторскую встречу с нашей ведущей дизайнеркой 🫶 настей ивановой • все участники получат скидку на учебник look and feel от прагматики
Изображение поста
собрать понятный UI сегодня могут многие. сделать дизайн, который цепляет и идет впереди рынка — уже другой уровень.
чтобы вы стремились ко второму, мы сделали design camp — месяц реальной студийной работы c крутыми проектами для портфолио и фидбэком от менторов. в статье на dsgners наш hr lead 🍕 ксюша малова рассказала, как всё устроено и почему джунам туда идти — просто маст. новый поток стартует 10 марта — подавайте заявку тут до 26 февраля включительно, чтобы получить лучшую прокачку эва.
Изображение поста
ты знаешь, я бы хотел тебе многое сказать, но у меня слов не хватит
мы можем нарисовать. на 13 февраля с нашим ai юнитом 5heads сделали бот, который создает индивидуальную открытку для вашей половинки. вы выбираете, что чувствуете к ней > моделька запускает исследование души > выдает уникальную валентинку только для вас. её точно не найдёшь на пинтересте. p.s открытку для бывшего, или статуса «всё сложно» тоже подготовили. 🤌 пробуйте в senior бот бесплатного художника ваших чувств до 20 февраля: menu > art with love and ai
Изображение поста
wanted: талантливые будущие коллеги
пополняем пул талантов прагматики — для проектной работы на фултайме и парттайме. 🔘ux/ui дизайнер в аутстафф 🔘middle/senior графический дизайнер 🔘middle/senior web-дизайнер 🔘продуктовый дизайн-лид 🔘бренд-дизайнер и еще три вакансии — всё тут. по прежнему в поисках тех, кто с нейронками на «ты»! небольшой рассказ о себе и портфолио присылайте 🍐Лизе в тг @Eliza_Usp
апдейтнули айдентику для одного известного застройщика
самолет обновил свой фирменный стиль, а мы поучаствовали в этом рефреше. собрали гайдбуки, иконки и key visuals — всё про процесс, дизайн-архитектуру и логику решений читайте в статье на Sostav. а всеми подробностями про бренд-гайды с ai-айдентикой на этом проекте поделимся позже — stay tuned. дизайн-поддержка
друзья, 1 день и 53 минуты до нового года, поэтому льем cristal и chandon moët.
это видео — наш способ зафиксировать уходящий год в людях. вспомнить, каким он был, что мы сделали, где собирались, как смеялись и что унесём с собой дальше. дальше — пауза. хорош сидеть в интернете, закрывайте вкладки, откладывайте телефоны и идите отдыхать, обнимать близких, выдыхать и жить. увидимся уже в новом году 🔄
новый, горячий r&d оффер
это формат на месяц, в котором мы вместе с вашей командой исследуем потенциал продукта и превращаем гипотезы в проверяемые концепты. за это время формулируем проблему, проектируем решения и оформляем их в дизайне — так появляется ясность, куда двигаться дальше и как идея может превратиться в продукт. в результате вы получите концепт-презентацию в фигме, вайбкод-прототипе или коротком видео. сможете опробовать и пощупать идею, которая у вас зародилась, или презентовать ее стейкхолдерам. а если идея пока не до конца оформилась — мы найдем ее вместе с вами и отлукэндфилим! получить r&d оффер
вот такой вот он получился — сезон внутри банка. если вы что-то пропустили, то для вас мы собрали самые-самые посты:
статья о проекте, чтобы полностью погрузиться в контекст – видео с дизайн-директором лешей о поиске концепции – рассказ левы ловушки про вайбкодинг фона – рассказ про то, как мы генерили картинки с помощью krea: flux и nano banana – мини-подкаст от дениса про концепцию osных блоков для продуктов на главной а еще вот тут можно скачать диджитал-мерч этого сезона. чтобы экраны ваших телефонов были самые секси и красивые!
чтобы сделать уникальный контент для главной страницы, мы генерили картинки с помощью ии. о деталях и тонкостях рассказывает 🫖 лева ловушка:
использовали в основном krea: flux, krea 1, nano banana. за рефы брали креативную рамку, которую создали superdesigners. дальше дообучали модельку и уточняли итерационно промпт. основной сложностью было отсутствие четких гайдов для новых иллюстраций и ограниченность креативной рамки. очень многое приходилось делать наощупь, постоянно сверяясь с командой сбера и уточняя, туда ли идем. все остальные сложности были стандартными для таких проектов: большое количество иллюстраций и абстрактных смыслов, которым нужно было дать объект. отдельной проблемой было то, что мы сначала подключили генеративщика, но за неделю проекта поняли, что это не супер эффективно. для клевых генераций важно было сильно погрузиться в продукт и смыслы. передавать это человеку со стороны было утомительно. составляя для генеративщицы тз, мы, по сути, сами собирали промпт. поэтому генерации отдали вебдизам, я их сам подучил, и все полетело! ну и как обещали, делимся примером промпта: Tall modern apartment building in the center of a composition. Building is made from a different materials. Scene is light, made from a few fluid shapes from various materials. Colors are diverse – we can see a shades of green, light warm gray and white walls. Soft lightning with gobo shadows. Minimalistic isometric composition. Elegant, clean 3D render. (наши промпты работали в связке со стилями, на которые мы дообучали нейронку, и рефами, а это секрет, сорри) 🟢 подробнее про весь процесс работы над главной читайте в статье
от стандартных блоков к апкам в традиционном виде до насыщенных иконок приложений.
🎞 денис суворов, дизайн-лид прагматики, в подкасте ниже рассказывает, как сформировалась концепция osных блоков для продуктов на главной банка.
как и почему вайбкодили фон для главной рассказывает 🫖 лева ловушка, дизайн-лид прагматики.
потыкать в прототип с картинки можно тут (десктоп онли)