Responsive — просмотр адаптивности макета прямо в Figma.

Если вы ждали повод посмотреть что-то полезное — вот он!

Обещанные видео уже на нашем YouTube-канале. Собрали две лекции с Дизайн-выходных, которые помогут зарядиться новыми идеями или просто узнать что-то интересное: • Визуальный беспорядок Дизайн-директор студии «Луч» Оля Валеева рассказывает, зачем даже в строгих гайдлайнах нужны композиция, цвет и типографика — и как сделать интерфейс не только понятным, но и красивым • Передача макетов без боли Лекция арт-директора Славы Лукина о том, как учитывать ограничения платформ, говорить с разработкой на одном языке и думать не только о Figma, но и о том, что будет после нее Присоединяйтесь, смотрите и делитесь впечатлениями
Изображение поста

В помощь дизайнерам сегодня существует множество платформ и выбор зависит от вашего уровня профессионализма, режима работы, состава команды, специфики проектов. Собрали подборку популярных и не очень сервисов под разные задачи. Отлично, что везде есть бесплатная версия, чтобы понять, подходит вам продукт или нет.

🔶 Lunacy Приложение для графического дизайна со множеством функций, в том числе с поддержкой ИИ для рутинных задач. Есть онлайн- и офлайн-режимы, командная работа, прототипирование и т.д. 🔶 NinjaMock Платформа для создания прототипов интерфейсов мобильных приложений, веб-приложений и сайтов. Рабочие макеты выглядят как нарисованные от руки эскизы. Есть опция совместной работы. 🔶 Structura.app Российский конструктор прототипов сайтов позволяет создать макет одним из четырёх способов, в том числе и с помощью краулинга — уникальной фичи сервиса. С ней можно скопировать структуру любого сайта и взять для своего проекта. 🔶 Penpot На платформе можно создавать прототипы бесплатно. Здесь открытый исходный код, есть возможность командной работы онлайн, но обучающих материалов немного. 🔶 Webflow Облачная платформа для создания сайтов без использования кода. Проекты можно интегрировать с сервисами аналитики и платёжными системами. Сервисом пользуются дизайнеры и разработчики, а также маркетологи и предприниматели. 🔶 Pixso Редактор для командной работы с облачным хранением и своей онлайн-библиотекой компонентов. Нейросеть AI Assistant сможет сама сгенерировать многие элементы. В бесплатной версии можно открыть доступ к редактированию трёх файлов. 🔶 Sketch Профессиональный векторный графический редактор подойдёт начинающим и опытным дизайнерам. Базовую коллекцию функций можно дополнять плагинами. Работает только на macOS. 🔶 Zeplin Упрощает совместную работу дизайнеров и разработчиков. Инструментов для создания проекта с нуля нет, но можно импортировать свои макеты, а программа сгенерирует для них программный код. 🔶 Visme Онлайн-редактор графического контента поможет с простым дизайном, презентациями, при планировании контента. 🔶 Turbologo Инструмент для автоматической генерации логотипов онлайн. Можно выбрать сферу деятельности и палитру, а система предложит разные варианты и покажет на разных носителях. [Фабрика Дизайна]
Изображение поста

😮 Победа DNS над интерфейсным хаосом

Света, дизайнер интерфейсов DNS, рассказала о трансформации внутреннего продукта DNS REDACTOR. На одной странице насчитывалось 6 типов кнопок, каждый дизайнер рисовал страницы по-своему, а разработчики верстали как считали нужным. За 6 месяцев команда создала полноценную дизайн-систему, которая изменила не только интерфейсы, но и процессы работы. Самым сложным компонентом оказался Select, который пришлось переделывать 4 раза. Зато благодаря ему появились подробные гайды использования с описанием всех возможных сценариев. А новый компонент Aside-header освободил пространство сверху экрана, что критично для продукта, где основа интерфейса — таблицы. Внутри: – Почему внутренние продукты — это лицо компании внутри неё; – Как семантические цвета с альфа-каналом решили проблему 50 оттенков серого; – Зачем фильтры переместили в шапку таблицы; – Какие требования к макетам стали обязательными; – Почему визуальное тестирование добавили в процесс QA; – Как система статусов помогает управлять компонентами. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Графический дизайнер в Pilgrims
Мы — Pilgrims Agency, создаем креативы для соцсетей, 2D и 3D-motion графику, SMM, дизайн и маркетинговые мероприятия любой сложности. Работаем с Яндекс, viju, Буше, Мираторг, SuperStep, Macrocosm, Mesh'n'Flesh и многими другими. Задачи: — создание визуалов для соцсетей, digital-рекламы и презентаций — разработка айдентики и элементов фирменного стиля проектов — подготовка макетов к печати — сбор референсов и мудбордов для новых проектов — поддержание фирменного стиля проектов во всех коммуникациях — работа в команде с арт-директором и SMM-отделом Ожидания: — уверенное владение Figma, Adobe Photoshop — навыки базового монтажа, будут вашим преимуществом — навыки графического дизайна: создание визуального контента для соцсетей (посты, сторис и др.), обработка фотографий, работа с фирменным стилем бренда, создание айдентики и макетов для digital и офлайн-кампаний, подготовка макетов для типографии — чувство композиции, типографики и цвета — креативный подход к работе и вкус Условия: — удаленная работа — полная занятость с 10:00 до 19:00 по мск — ЗП по договоренности → Откликнуться #дизайн
Изображение поста
😍 Как правильно работать с UI/UX-дизайнерами и не сломать продукт
Сергей Галан из Utopia и Елена Рнае из Софториума создали подробный гайд по взаимодействию с дизайнерами. Главная мысль: 80% проблем в проектах возникают не из-за отсутствия таланта у дизайнеров, а из-за сбоев в коммуникации между командой и постановщиками задач. Авторы разбирают частые ошибки: менеджеры перегружают senior-дизайнеров контролем или бросают джунов без опоры, ставят задачи в духе "красиво как у Apple", не фиксируют критерии готовности. В результате проект буксует, а команда получает красивые, но технически нереализуемые макеты или работающий, но неудобный интерфейс. Внутри: – Как оценить уровень дизайнера и выбрать модель взаимодействия; – Структура эффективного брифа с расшифровкой референсов; – Почему архитектору важно видеть дизайн на старте; – Что проверять на демонстрации с участием всей команды; – Какие состояния интерфейса должен передать дизайнер; – Чем плохая работа с компонентами обернётся дорогим обслуживанием. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
🗯 Поездка на Чеховский полиграфический комбинат
Сегодня студенты 4 курса направления «Графический дизайн» вместе с преподавателями отправились в город Чехов, где посетили Чеховский полиграфический комбинат. Во время экскурсии ребята познакомились с процессом печати изнутри: ➖узнали, как создаётся книга — от макета до готового издания; ➖разобрались в работе профессиональных типографских машин; ➖изучили особенности различных видов печати и бумаги. Такие поездки помогают будущим дизайнерам увидеть, как их проекты воплощаются в жизнь — и вдохновляют на новые идеи #ИнститутДизайна #ГрафическийДизайн
💼 Семантическое версионирование. Павел Пономаренко рассказал, как подойти к именованию версий макетов, чтобы облегчить коммуникацию дизайнеров.
Изображение поста
Легендарный УЛЬТРА НЕПРИНУЖДЕННЫЙ ЛЕКТОРИЙ теперь в Питере!
Душевная встреча для дизайнеров, креаторов и других диджитал-специалистов, где будем говорить про жизнь, а не про работу. Где: Кожевенная линия, 30, лекторий Брусницына. Когда: 25 октября в 12:00. 7 минут на 1 спикера. Открытый микрофон в конце. Куча подарков — от каждого спикера свой сюрприз. На этом лектории будет много времени на нетворкинг. Выступать будут коллеги из сообщества с темами, с которыми ещё нигде не выступали. Никаких макетов, интерфейсов, сеточек и типографики. Ведущий лектория — Константин Лобанов, бренд-директор Dprofile. Готовьтесь к интерактивам! Вы сможете выступить на открытом микрофоне. Просто если будет порыв. Предварительная регистрация на выступление не нужна. Программа: 12:00 Сбор гостей 12:30 Начало, вступительное слово 12:45 Ультра-непринужденная лекция Константина Лобанова 13:00 Душевные доклады 13:45 Перерыв 14:00 Душевные доклады 14:45 Открытый микрофон и нетворкинг 16:00 Окончание мероприятия — идём гулять по Брусницыну и есть еду. Мероприятие платное: билет стоит 1500 рублей. Мы не зарабатываем на ивенте, оплата нужна чтобы покрыть расходы на организацию. Билетов всего: 30 штук Чтобы забронировать — пишите Евгению, он пришлет инструкцию по оплате. Увидимся на лектории!
Изображение поста
Как побороть перфекционизм и успевать делать больше? Личный лайфхак 😉
Еще подростком, когда ходил в художку, мог нарисовать хороший пейзаж за 2 дня и еще 7 дней доводить его до идеала.. В работе также — не мог делать задачи быстро и хорошо на 7/10. Задрачивал дизайн по пикселям, 20 минут выбирал фотку из трёх одинаковых или несколько часов убирал эти ебучие висящие предлоги на сайтах 😳 Чересчур обращал внимание на детали. Одновременно гордился этим и корил себя, что много времени сливал на неэффективные действия 📉 ————————— Но нашел этому простое решение. Я начал задавать себе вопрос: «Важно ли кому-то видеть выполнение данной задачи на 10/10?» В 80% СЛУЧАЕВ ОТВЕТ «НЕТ»: 1️⃣ Ну доведу я до идеала макет по отступам, висящим предлогам, теням и пикселям. Клиент не увидит разницы. Лучше уделить больше внимания структуре сайта и текстам — чтобы конверсия была выше 2️⃣ Как оказалось, на моей аватарке канала никто не заметил зеленый стремный «фонарь» под глазом, который я тщетно пытался убрать целый час 3️⃣ Стоит ли 3 часа перебирать шрифты для проекта? Когда можно сразу взять универсальные Inter и Montserrat. Лучше время потратить например на поиск нового клиента и заработать 50 тыс рублей ————————— Я научился отделять второстепенное и больше фокусироваться на том, что действительно двигает меня вперед и делать это на 10/10: поиск клиентов, продажи и изучение маркетинга сайтов 👨‍💻
Изображение поста
Прямиком из лаборатории: как разговаривать с ИИ так, чтобы макеты не расползались
Китайские исследователи показали SpecifyUI — система, которая помогает в итеративном проектировании пользовательских интерфейсов с использованием структурированных спецификаций и генеративного искусственного интеллекта. Сердце системы — SPEC — структурированное, параметризованное, иерархическое промежуточное представление, в котором элементы пользовательского интерфейса представлены в виде управляемых параметров. Да, звучит сложно. Но это может помочь с генеративным дизайном в будущем. Так что давайте разбираться. Как устроен генеративный дизайн сейчас (и что с ним не так) – Текстовые подсказки рулят сценарием: большинство инструментов просят «объяснить словами» замысел, а потом пытаются угадать структуру макета и компоненты. Итерации линейные: мелкая правка часто «расползается» по макету. – Болезненная точечная правка: без формальной структуры сложно поменять один блок, не тронув остальные. Нужна адресная правка по узлу и атрибуту, а не перегенерация целой страницы. Это и закрывает SPEC: правки вида <операция, путь, значение> — например, заменить палитру только у шапки или превратить таблицу конкретной секции в карточки. – Нет мостика к коду: обычная генерация выдает «картинку вдохновения». SPEC строит мост до инженерии: RAG по базе примеров, агент кода и отладчик доводят результат до исполнимого состояния. Чем SPEC нам полезен? – Контроль: намерение фиксируется как SPEC — структурная запись про сетку, палитру, «язык форм», сценарий и иерархию Страница → Секции → Компоненты. Правки вносятся адресно по пути в структуре, не ломая остальное. – Сборка из референсов: система режет референсы на регионы, достает из них структуру и стиль, склеивает в единый SPEC. Можно брать сетку из А, палитру из В, компоненты из С. – Повторяемость и передача в разработку: SPEC конвертируется в рабочий интерфейс и код (React + библиотека компонентов + графики); есть цикл «сгенерировать — отловить ошибку — починить». Почему это не пустая болтовня На корпусе из ~2000 экранов: меньше визуальных ошибок, выше семантическое сходство, стабильнее структура. В тесте с 16 дизайнерами участники отметили лучшее чувство контроля по сравнению с Google Stitch Где это реально заходит – Продуктовые экраны, каталоги, дашборды, лендинги с повторяющимися блоками. – Когда важно держать стиль и логику дизайн-системы. – Когда итераций много и их нужно фиксировать правилами, а не папкой картинок. Когда можно пройти мимо – Разовый визуальный эксперимент ради идеи. – Очень маленькие страницы, где быстрее нарисовать, чем описывать. – Когда нет ресурса сформулировать правила — SPEC требует дисциплины. Итог Это начало пути, но направление правильное: итеративный дизайн с ИИ под контролем структуры. Меньше случайностей, больше повторяемости.
Изображение поста
Codia AI — плагин конвертирует обычный скриншот в редактируемый макет Figma
Ребят, тут есть те, кто работает с Фигмой?
Нашли для вас топовую подборку: Макеты для верстки — актуальный источник нетипичных макетов в Figma. Фундамент для любого портфолио. Figma — канал, где ребята делятся добром, за которое на курсах обычно дерут три шкуры.
Camera Color Copy Paste — плагин для Figma, который позваляет захватывать цвет с камеры вашего телефона и переность его в макет.
AutoLayout — плагин динамически размещает слои во фреймах и обновляет макет при изменении размеров дочерних слоев.
Изображение поста
Помните анекдот про макет Саратова из шишек в натуральную величину к утру? Ну так вот...
Друзья затеяли супер-шалость: детский конкурс по визуализации данных Data kids. Кто читает датавиз-каналы уже о нём наслышаны 😁 Я в жюри и настоятельно приглашаю всех поучаствовать! Кто: дети 6-11 лет и конечно их родители Когда: подача работ до 30 октября Где: вот тут Что: визуализация данных, любая: нарисованная, пластилиновая, склеенная, сложенная из лего, игрушек или шишек в конце концов. Людей, кстати, тоже можно использовать, полная свобода творчества. Что ждёт участников: • крутые подарки: iPad, LEGO и ещё много всего классного • обучающие эфиры, где научат строить диаграммы из всего из чего вообще возможно — первый эфир уже сегодня! • памятные подарки каждому участнику • незабываемый опыт 👉 Регистрация #нерекламапростонравится
Изображение поста
👩‍💻 Дизайнеры и видеомейкеры, ловите подборку, которая сэкономит вам часы работы!
Если нужны готовые ресурсы, шаблоны и материалы, чтобы ускорить проекты и прокачать визуал — вот топ каналов, которые реально помогут: 🗂 Добавить всю подборку одним кликом 🗂 @makety_saitov_figma — Макеты сайтов в Figma @shablony_powerpoint — Шаблоны презентаций PowerPoint @shablony_kreativov — Шаблоны для соцсетей @shrftu — Шрифты @skachat_logotip — Логотипы и мокапы @After_Effects_Templatica — After Effects @Premiere_Pro_Templatica — Premiere Pro @Final_Cut_Pro_Templatica — Final Cut & Apple Motion @futazhi_video — Футажи @stokovye_video — Стоковое видео @zvukovye_effekty — Звуковые эффекты @templatica_stotrage — Архив Pro Дизайнера 🗂 Добавить всю подборку одним кликом🗂
Плагин Google Maps - Map Maker — позволяет легко создавать и настраивать карты Google прямо в макете.
ОСТОРОЖНО! Собираюсь хвастаться и, возможно, делать больно всем, кто ничего не успевает.
Я подготовила и запустила марафон @logotober в одну каску. Помощь я приняла по двум задачам: 1. Отправить в рассылку по почте письмо с приглашением на марафон. 2. Обтравить лисичек для набора стикеров, потому что у меня Photoshop отдал богу душу. Остальное я сделала за двое суток: 1. Разработала концепцию и сценарий проведения марафона. 2. Создала каркас бренд-айдентики: палитра, шрифты, графические элементы. 3. Придумала маскота и набор цифровой сувенирки. 4. Создала стикерпак. 5. Создала макеты: - посты в канал арафона - трекер А4 - стикер для трекера - бейджик участника - шаблоны для публикации работ 6шт. - шаблон оформления заданий марафона - обои на смартфон - путеводитель 11 полос 6. Во все макеты я написала тексты, слоганы, заголовки. 7. Разработала систему кросс-ссылок, чтобы участники могли из разных источников получить информацию и контент. 8. Создала активности для расширения покрытия марафона и привлечения к нему внимания. 9. Написала и продолжаю писать тексты для постов в канале. При двух детях и основной работе. И это движ не ради денег, хотя, конечно, я там не упущу возможности пригласить на свой курс, который очень созвучен марафону. ☄️ Шалость удалась. - На марафоне уже 600+ человек - Бешеная вовлеченность участников. - Мне сам написал Logobaker с предложением разместить инфу о марафоне у них. - Я собираюсь ещё сходить и найти спонсоров на подарки участникам – да пошлют боги мне сил и фантазии. Если будете запускать какие-то активности, то смело приходите ко мне на консультацию – я расскажу, как создавать больше, выше, сильнее, чем у других. Всем чмок. Ушла делать прививку от гордыни (шутка, от гриппа).
Изображение поста
UX в реальности: с чего начать, если не знаешь, с чего начать
6 октября, 18:00 (Zoom) Если вы только начинаете путь в UX/UI и чувствуете, что теория есть, а с реальной задачей — ступор, приходите на эфир. Будем разбираться, что делать, когда вводные расплывчаты, сроки поджимают, а вы — наедине с белым экраном. На встрече обсудим: — с чего начинается UX‑проект в реальной работе (а не в учебнике); — как структурировать процесс, если непонятно, с чего начать; — какие инструменты помогают не застрять: CJM, таблицы с гипотезами и др.; — как не выгореть и не перепрыгнуть этапы, когда «нужен макет вчера»; — типичные ошибки новичков на старте. Подойдёт новичкам и тем, кто делает первые UX/UI-проекты и хочет действовать увереннее. Спикеры: - Катя Тюхай — Team Lead UX/UI в Atom, куратор программы UX/UI - Вика Стрелец — Product Owner, устройства с ИИ, Сбер Участие бесплатное, по регистрации
Изображение поста