🛠️ DevTools для дизайнера: как проверять вёрстку без страха перед кодом

Дима из Voximplant написал руководство по использованию инструментов разработчика для дизайнеров. Главная мысль: открыть DevTools это как поднять капот у автомобиля. Не нужно разбирать двигатель, достаточно понимать, где что находится. Самая полезная функция для дизайнера это инспектор элементов. При наведении на элемент DevTools подсвечивает отступы цветом: зелёный показывает padding (внутренние отступы), оранжевый показывает margin (внешние). Вкладка Computed показывает финальные значения после всех вычислений браузера, а Styles показывает исходные CSS-правила и откуда они пришли. В Responsive Design Mode можно проверить адаптив, выбрав конкретное устройство или задав размеры вручную. Справа есть ручка для плавного изменения ширины, чтобы заметить момент, когда начинаются проблемы с вёрсткой. Внутри: – Как быстро достать SVG-логотип через Copy element; – Зачем нужна вкладка Network для скачивания защищённых изображений; – Как тестировать идеи прямо в браузере без Figma; – Почему изменения видны только вам до обновления страницы; – Какие пять основных зон есть в интерфейсе DevTools; – Как конкретные значения отступов упрощают фидбек разработчикам. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Мне, уверен, как и тебе, сложно держать фокус на цели, какой бы она ни была Так как путь к цели состоит из микро-шагов, которые дают результат не в моменте, а на дистанции 👟 Тот самый 1% действий в день благодаря эффекту сложного процента, позволяют достичь огромного прогресса и увеличить результат в 37 раз за год У меня была очень простая цель: стать востребованным дизайнером, который делает сильные проекты и вообще не думает о том, где брать клиентов. И все вышло 🤞🏻 А начинал я просто с минимум 30 минут в день над конкретной задачей — Хочу вести блог? Уделяю этому 30 минут каждый день, пишу посты, ищу вдохновение и темы, которые лично мне интересны. Из этого появился весь контент в канале, даже на старте, когда особо некому было читать его — Хочу клиентов? Уделяю 30 минут в день на это. Пробую разные способы, о которых до меня никто не думал и комбинирую это с самыми базовыми вещами: кейсы на беханс, разные объявления на авито или пишу старым заказчикам — Хочу делать работы лучше? Выделяю 30 минут на поиски референсов, формирую их по папкам, ищу вдохновляющие работы, смотрю разные микро-курсы и думаю, как могу все это объединить и применить именно в дизайне карточек ⚡️ Правило 30 работает просто безотказно, даже этот пост был написан мною за чуть больше 30 минут сконцентрированной работы Уверен, что почти у каждого есть «вредное хобби», привычка или обязанность, на которую ты тратишь гораздо больше времени В этом случае главное сместить фокус и прост начать, а если вдруг забил, не отчаиваться и вернуться к прежнему ритму за максимально возможный короткий срок Давайте соберем максимум {🔥} на этот пост и следующий будет с супер исходником работы!

Руслан Ильясов и Антон Минеев из МТС рассказали о четырёх кейсах внедрения игровых механик во внутренние и внешние продукты компании. Самый неожиданный результат показал внутренний сервис SAM, где спрятали эмулятор с ретроиграми вроде Mario и Boogerman прямо в витрине приложений. В приложении «Мой МТС» запустили новогодний адвент-календарь с 30 мини-играми на 30 дней. За прохождение начислялась внутренняя валюта для промокодов партнёров или игровой косметики. NPS среди игравших вырос на 3-4%, заметно увеличился трафик в экосистемные сервисы. В «МТС Карме» за месяц MAU подскочил на 46%, а количество обратной связи между сотрудниками выросло на 22,5%. Команда предупреждает о рисках фрода: если механика связана с промоакциями, всегда найдутся те, кто придёт только за кодами для перепродажи. Внутри: – Почему одна рулетка лучше тридцати мини-игр по багам и рискам; – Как защитить промоакции от перепродажи кодов на сторонних площадках; – Зачем привязывать задания к разным сервисам экосистемы; – Какие трудозатраты понадобились для роста MAU на 32% (спойлер: две бутылки пива); – Почему важно различать внутреннюю и внешнюю мотивацию пользователей; – Как геймификация из маркетингового аттракциона становится системным инструментом. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Влад из Wildberries рассказал об архитектуре дизайн-системы «Ритм», которая состоит из трёх уровней: примитивы (токены), абстракции (рецепты) и экспорт (готовые компоненты). Дизайнеры работают только с экспортным слоем, не видя сложности внутренних механизмов. Ключевая проблема в том, что дизайнеры часто неправильно применяют токены к компонентам, что ломает систему при рефакторинге. Например, кнопка проходит через пять уровней абстракций от базового токена «перпл пятисотый» до финального компонента. Figma создаёт дополнительные ограничения: только четыре переключения свойств на коллекцию, невозможность создать зависимости между элементами без костылей. Команда уже экспериментирует с нейросетями, загружая правила дизайн-системы в базу знаний AI для автоматической генерации форм на основе компонентов. Внутри: – Почему семантика важнее визуального оформления при объединении продуктов; – Как три типа поверхностей (паш, врапер, контролс) определяют поведение элементов; – Зачем форфилду нужны слоты, иконки, суффиксы и префиксы; – Какие альтернативы Figma используют код вместо визуального редактора; – Почему продукт должен управлять дизайн-системой, а не наоборот; – Как нейросети учатся не создавать новые элементы вне системы. ДС довольно сложная, мозг подкипает, но интересно посмотреть внутрянку) ➡️ Смотреть видео ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥 – altcap.com – mont-fort.com – workflow.design – vanta.com – thenewindustrials.com ——— – tryklack.com – ziphq.com – dyte.io – elimar.lmigroupintl.com – instant.so ——— – officeofoverview.com – fruitful.com – chainzoku.io – studionuts.com.br – wise.com/us ——— – totems-soclage.com – bisougallery.com – arqui9.com – devin.ai – three.studio ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

▪️ Стася — хейт, эмоции и самооценка Стася работает над своим портфолио, на этой неделе начнет искать клиентов. Параллельно каждый день ведет дневник эмоций: хвалит себя за каждый маленький шаг, который делает, старается замечать, где она на автомате снова начинает себя ругать 🥷 На видео реакция Стаси на ваши злые комментарии под историей про дубайского клиента — эмоции на пике, но она продолжает работать и развиваться. ▪️ Хаулат — первые большие результаты За день Хаулат сделала то, чего многие боятся и тянут месяцами: 🥷У Хаулат важная задача — повысить чек на свои услуги. К пятому дню реалити она написала четырем постоянным клиенткам, чтобы назначить созвон. Хаулат пока переживает, поэтому я разделил задание на две части: 🥷Сначала собрать обратную связь о своей работе, чтобы прощупать почву. 🥷А потом объявить, что скоро поднимет цены Впереди несколько сложных созвонов, пожелаем ей удачи. 🥷 ещё она переделала две презентации (для отправки и для выступления с анимацией); 💬 На видео шок и радость Хаулат. ▪️ Лена — усталость и дедлайны Признаётся, что темп реалити даёт по башке и совмещать всё сложно. Но Лена упёртая и старается: 🤩собрала подборку из 100 слайдов в бьюти-сфере; 🤩 подготовила список мероприятий, где могут пригодиться её презентации; 🤩 составила список потенциальных клиентов по сферам; 🤩 собрала референсы для будущего портфолио и готовится к защите диплома на курсе PowerPoint Ниндзя. 💬 На видео видно, как Лена справляется с нагрузкой и держит темп. 🔥 Ставьте огни и завтра покажу реальные работы участниц, будет интересно!

Эти навыки востребованы в дизайне, рекламе, игровой индустрии и кинопроизводстве — и это лишь часть возможностей. Хотите понять, подходит ли вам это направление, или прокачать свои умения и навыки? Присоединяйтесь к бесплатному мини-курсу по 3D-моделированию! Будет интересно как новичкам, так и опытным дизайнерам и иллюстраторам: https://epic.st/S_kpcV?erid=2VtzqvfWRwv Формат обучения: 5 занятий с теорией и практикой после каждого видео Что вас ждёт на курсе? ✔️ Разбор направлений в 3D ✔️ Работа в Blender — одной из самых популярных программ для 3D-графики ✔️ Что такое рендер и как его настроить ✔️ Подбор референсов для создания проектов ✔️ Практика: создадите персонажа для игры, локацию и рекламный ролик Ну и самое главное: после этого курса вы будете знать, как применить новые навыки, и сможете начать путь к своей 3D-мечте. 🔥 Бонус: откроем доступ к записям конференции по нейросетям после первого урока. Узнаете, как использовать ИИ в работе и в жизни.

Самый простой и изысканный способ украсить интерьер – добавить в него картины, это давно известно. А вот где эти картины взять – уже задачка со звездочкой. Магазинов и художественных галерей предостаточно, но ассортимент там часто очень своеобразный. Тигры на лавандовых полях, олени на водопое, мишки в лесу – такого зверинца не видел ни один заповедник. А абстракции напоминают легендарную сцену из фильма 1+1. (Помните, фраза главного героя: “у чувака кровь пошла из носа, а он просит за это тридцатку!?”). Про цены деликатно промолчу – они выходят за грани разумного. Но тем не менее, мы часто добавляем в наши проекта картины изумительной красоты, которые идеально дополняют интерьер и становятся частью концепции. Так было и в этот раз – во время приемки объекта в ЖК Foriver заказчик попросил добавить арт. Сроки поджимали, бюджет был ограничен, но мы пошли ва-банк и нашли идеальное решение. В максимально короткие сроки (5 дней) создали эксклюзив, который попал в точку. Что сделали: ✅дизайнер проекта Лаура отправила нашей художнице несколько референсов; ✅собрали из них цельную композицию; ✅выдержали всё в палитре проекта; ✅ сделали масштабно по размеру. Результат: живопись маслом + золотая поталь в размере 100×160 см. А стоимость очень демократичная для такого уровня мастерства и качества: • холст – 7 000 ₽ • работа – 15 000 ₽ • доставка – 2 000 ₽ • крепления + навес – 2 000 ₽ Итого: 26 000 ₽ за индивидуальное искусство, идеально интегрированное в интерьер. Попробуйте найти такое на заказ — вы оставите в несколько раз больше. А попадание в цвета и атмосферу — дело случая. Повесили прямо напротив входа: восприятие интерьера формируется за секунды, а второй попытки произвести первое впечатление не будет. Если фокусная точка в прихожей не продумана, причин для восторга уже меньше Как вам результат? 🔥

Команда Ozon Tech рассказала о типичных проблемах при создании дашбордов и способах их решения. Главная проблема в том, что красивые панели данных часто оказываются бесполезными из-за избытка информации и конфликта интересов между дизайнерами, аналитиками и пользователями. Основные ошибки включают попытку поместить все метрики на одну страницу, неверные допущения о знаниях пользователей и неправильную расстановку акцентов. Решение в создании трёхуровневой иерархии: верхний уровень с ключевыми показателями и крупной типографикой, средний с визуализацией трендов, нижний с детальной аналитикой в периферийной зоне. Важно соблюдать принцип единоначалия фильтров, когда все элементы визуализации подчиняются единым правилам фильтрации. Без этого пользователь столкнётся с несогласованными данными и потратит время на настройку каждого фильтра отдельно. Внутри: – Почему для топ-менеджмента нужны стратегические показатели, а для специалистов детальный анализ; – Как использовать вкладки и детализацию вместо перегрузки главного экрана; – Зачем ограничивать яркие индикаторы для управления вниманием; – Какие библиотеки упрощают разработку (AG Grid, Apache EChart, Recharts); – Почему Apache Superset может заменить разработку с нуля; – Когда использовать линейные графики, а когда радиальные индикаторы. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

- Имеет возможность генерировать изображения по тексту - Также можно генерировать image-to-image изображения используя референсные изображения. Мне нравится эта модель так в ней можно очень детально «перевоплощать» исходное изображение. При правильно подобранном промпте исходное изображение можно весьма сильно стилизовать, сохраняя не только базовые детали, но и мелочи Токеномика модели - 30 токенов за изображение Попробовать: @aicreativeclub_bot

Павел Литвиненко из «Лаборатории Касперского» рассказал о разработке интерфейсов для Kaspersky NGFW. Главная идея в том, что в ИБ-продуктах недостаточно базового понимания UX. Нужно погружаться в специфику и становиться частично ИБ-специалистом, чтобы понимать реальные потребности пользователей. Автор приводит интересную аналогию. FortiGate это Android мира NGFW (простой для новичков), а Palo Alto как iOS (сложнее, но функциональнее для опытных). Команда Kaspersky стремилась создать решение, доступное и новичкам, и матёрым специалистам. В процессе исследований выяснилось, что B2B-интерфейсы должны быть максимально насыщенными. Пользователи хотят видеть больше информации на экране. Внутри: – Почему дизайнеру ИБ-продуктов нужен подход deep dive; – Как сократить количество кликов в повседневных сценариях; – Почему плотность интерфейса критична для B2B-продуктов; – Как работа с UX-болями помогает приоритизировать улучшения; – Зачем проводить исследования с реальными сетевыми инженерами; – Как из «приглашённого аутсорсера» стать полноценным членом команды. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

В прошлом посте вспоминали скевоморфизм — кнопки под кожу, деревянные текстуры и ламповость начала нулевых. Позволим себе ещё немного ностальгии по временам flash-анимации и дизайну, который больше говорил эмоциями, а не метриками. Мы помним, когда дизайнер в вебе был скорее художником, интерфейсы создавали по наитию, вдохновляясь референсами и личным вкусом. С тех пор многое изменилось. Появились исследования, метрики, юзабилити-тесты — и стало ясно: интуиция важна, но её нужно подтверждать фактами. Сегодня это называется дизайном на основе данных. 😃 анализируем поведение пользователей; 😃 проверяем гипотезы через тестирование; 😃 опираемся на цифры, а не только на вкус. Креативность при этом никуда не делась — просто стала инструментом, а не импровизацией Аналитика помогает понять, где можно экспериментировать, а где лучше сохранить предсказуемость: интуиция и опыт соединяются с исследованиями, чтобы продукт работал для людей. Когда в последний раз данные изменили ваше дизайнерское решение?

Ралука Будиу из Nielsen Norman Group разбирает новый визуальный язык Apple Liquid Glass. Интерфейс теперь переливается и мерцает, как будто телефон обернули в желе, но красота оборачивается проблемами с юзабилити. Главная претензия к прозрачности элементов. Текст поверх изображений становится нечитаемым, особенно когда Apple предлагает ставить фотографии фоном для сообщений. В почтовом приложении дошло до абсурда: текст накладывается на текст, превращая чтение темы письма в криптографическую задачку. Кнопки постоянно анимируются без смысла: точки карусели превращаются в слово Search, вкладки пузырятся и покачиваются при переключении. Расстояние между элементами сократилось вопреки гайдлайнам Apple о минимальных 0.4 см между целями для нажатия. Внутри: – Почему полупрозрачные элементы управления конкурируют за внимание с контентом; – Как поиск переехал снизу вверх, нарушив многолетние привычки; – Зачем кнопка «Вперёд» в Safari то появляется, то исчезает; – Почему вкладки спрятали в меню многоточия вместо прямого доступа; – Как хлебные крошки исчезли из кнопки «Назад»; – Почему автор считает это попыткой отвлечь от отсутствия обещанных AI-функций. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Каждому дизайнеру нужно иметь свое портфолио и чтобы оно выглядело достойно вы можете найти референсы у других авторов: 1) Wall of Portfolios — курируемая библиотека сайтов-портфолио от дизайнеров со всего мира. 2) CursorUP — более 100 стильных портфолио для вашего вдохновения 3) Product Design Portfolio Inspiration — более 90 портфолио от продуктовых дизайнеров в одном файле Figma. #подборки #сервисы 💙

Что ок? 🤌 Что не ок? 👎 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Алёна Лагойкина из AGIMA рассказала о годе экспериментов с нейросетями для создания изображений. За это время у неё полетела видеокарта, она завела китайскую симку и начала учить китайский язык, чтобы получить доступ к веб-версии Stable Diffusion. Базовый промпт состоит из четырёх элементов: субъект (главный объект), детали (поза, одежда, эмоции), окружение (пространство вокруг) и стили (художественное направление). Английский язык работает лучше русского, а первое существительное в промпте модель запоминает как главное. В MidJourney вес элементов задаётся двойными двоеточиями, в Stable Diffusion круглые скобки увеличивают вес на 10%, квадратные уменьшают. Оптимальный диапазон для усиления 1,1-1,5, для ослабления 0,7-0,9. Внутри: – Как диффузионные модели превращают шум в изображения; – Почему LoRA позволяет сохранить персонажа неизменным; – Зачем нужны негативные промпты и список обязательных; – Как IMG2IMG помогает менять стиль при сохранении композиции; – Почему Inpaint спасает от артефактов локально; – Какие нейронки открытые, а какие принадлежат корпорациям. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Что ок? 🤌 Что не ок? 👎 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Что ок? 🤌 Что не ок? 👎 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Что ок? 🤌 Что не ок? 👎 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Что ок? 🤌 Что не ок? 👎 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы