🛠️ DevTools для дизайнера: как проверять вёрстку без страха перед кодом
Дима из Voximplant написал руководство по использованию инструментов разработчика для дизайнеров. Главная мысль: открыть DevTools это как поднять капот у автомобиля. Не нужно разбирать двигатель, достаточно понимать, где что находится.
Самая полезная функция для дизайнера это инспектор элементов. При наведении на элемент DevTools подсвечивает отступы цветом: зелёный показывает padding (внутренние отступы), оранжевый показывает margin (внешние). Вкладка Computed показывает финальные значения после всех вычислений браузера, а Styles показывает исходные CSS-правила и откуда они пришли. В Responsive Design Mode можно проверить адаптив, выбрав конкретное устройство или задав размеры вручную. Справа есть ручка для плавного изменения ширины, чтобы заметить момент, когда начинаются проблемы с вёрсткой.
Внутри:
– Как быстро достать SVG-логотип через Copy element;
– Зачем нужна вкладка Network для скачивания защищённых изображений;
– Как тестировать идеи прямо в браузере без Figma;
– Почему изменения видны только вам до обновления страницы;
– Какие пять основных зон есть в интерфейсе DevTools;
– Как конкретные значения отступов упрощают фидбек разработчикам.
➡️ Читать статью
———
💻 Курс по поиску работы 😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
💕🧡💕Продолжим рассказывать вам истории студентов о своих наставниках в честь Дня преподавателя высшей школы. И эта история о доценте кафедры журналистики и медиатехнологий и СМИ СПбГУПТД Марине Васильевой.
«Она закладывала не просто «знания», а методологию: как «читать» текст, видеть его каркас, понимать замысел автора и применять эти инструменты в собственной работе...»
…
«Истинный талант раскрывается в ее педагогическом внимании. Она обладает редким умением диагностировать интересы студента. Помню, на одной из практических работ я, увлекаясь темой социальной журналистики, отошла от строгого формата задания. Вместо замечания я получила список литературы по теме и совет обратить внимание на тексты определенных публицистов. Она не ограничивает, а направляет, используя внутреннюю мотивацию ученика как главный ресурс для роста...»
✏️Автор - студентка кафедры журналистики и медиатехнологий и СМИ СПбГУПТД Алиса Кузьмина.
📖Продолжение читайте на Дзене
#ДеньПреподавателя
#ВкладНаставника
Геймификация уборки в visionOS
Нейрофест Айда — это про концентрацию знаний и опыта в AI за 1 день
12 декабря в Москве соберутся специалисты, которым важно развиваться в маркетинге, дизайне и бизнесе через современные AI-подходы.
Формат простой: минимум воды, максимум практических решений.
Эксперты из СБЕР, VK, МТС и других компаний разбирают генерацию изображений, работу с рекламой, внедрение AI-подходов в процессы и делятся тем, что действительно применимо.
Что включает программа:
• 5 направлений: дизайн, маркетинг, бизнес, искусство, образование
• 20 экспертов, которые ежедневно работают с AI в своих проектах
• 7 часов образовательного контента
• 4 практических воркшопа по генерации изображений от Самокат, ЦЕХ, Mish.Design
• Более 40 дизайн и маркетинг руководителей ведущих продуктовых компаний соберутся в одном месте
🍌 Для подписчиков ЦЕХ — промокод AIDATELEGA25
Скидка 25% на любой билет. Действует 4 дня.
Качайте свои AI-харды и адаптируйтесь к изменениям вместе с Айда Нейрофестом
1️⃣2️⃣
Расписание и билеты — здесь
🚀 Кто хочет разобраться в HTML так, чтобы вас понимал верстальщик и чтобы вы сами понимали, как реально сверстать ваш дизайн-макет?
На самом деле, вам не нужно разбираться во frontend-разработке или знать, что такое Vue, чем отличается Vue от Angular и т.д. Нужно знать только общие принципы, а это реально сделать за один-два вебинара с практическим заданием.
📌 Тема важная и нужная, хочу провести для вас интенсив по ней.
Давайте соберем 300 🔥 на этот пост, чтобы понимать интересно ли вам и имеет смысл готовить контент для этого интенсива.
Если активности будет достаточно, то предварительно на следующей неделе проведем интенсив.
Meta* представила SAM 3D, новую модель, которая умеет создавать полноценные 3D-реконструкции из обычных 2D-изображений.
*признана экстремистской в РФ
Коллеги, сейчас завершаем интенсив по логотипам и уже пора планировать следующие активности для вас.
Думаю, будет очень полезно провести интенсив по HTML для дизайнеров. Достаточно знать базовые принципы: как строятся блоки, что может быть в интерфейсе, а что — нет. И когда вы поймете эти основы, ваши макеты станут чище, логичнее и проще в сборке. А значит — будет меньше правок и меньше стресса после передачи проекта в разработку.
Что думаете, интересна вам такая тема? Поставьте 🔥 к этому посту, кто хотел бы поучаствовать в таком интенсиве с практикой и разбором ваших домашних заданий.
☝️ Эмоции в упаковке: как вызвать нужное чувство и удержать внимание
💛 Упаковка — это гештальт, где детали и последовательность «чтения» играют ключевую роль. Вы узнаете, как сделать так, чтобы эмоция продолжала жить не только на полке, но и в дальнейших коммуникациях бренда.
Зачем человек покупает ваш продукт?
Какую эмоцию он хочет испытать в этот момент?
И какая история скрыта за упаковкой?
🖥 Хотите узнать, как создавать упаковку, которая действительно запоминается? Тогда слушайте голосовое!
Вот так создал обложку для ролика на основе чернового наброска. Дизайнеры все???
Туториал на крутую фишку в презе 😎
Хочешь, чтобы твои слайды цепляли с первого взгляда? Лови простой, но эффектный трюк, от которого презентация сразу станет «вау» ✨
Как повторить 👇
1. Вставь 4 фото, добавь внизу текст.
2. Добавь фигуру «прямоугольник» на одну из картинок, залей ее черным цветом и сделай полупрозрачной.
3. Добавь эту фигуру на оставшиеся 3 фотографии.
4. Дублируй слайд 4 раза.
5. Теперь по очереди начиная со 2 слайда удали добавленную фигуру.
6. Примени эффект для переходов «появление» и наслаждайся результатом 🔥
Ставь реакцию ❤️, если полезно