Манка о дизайне http://mankadsgn.ru ru Sat, 25 Apr 2026 23:27:16 +0300 дизайнер и разработчик: как начать взаимодействие http://mankadsgn.ru/blog/post1 http://mankadsgn.ru/blog/post1?amp=true Wed, 16 Jul 2025 15:23:00 +0300 Для опытных что надо делать дизайнеру, чтобы наладить контакт с разработчиком

дизайнер и разработчик: как начать взаимодействие

Между дизайнерами и разработчиками часто возникает «пропасть», иначе говоря gap. Это мешает создавать качественные интерфейсы и замедляет процесс разработки

Почему возникает этот gap в коммуникации?

Разные подходы к работе: дизайнеры сосредоточены на визуале и опыте, а разработчики – на технической реализации
Недостаток технической грамотности у дизайнеров: если дизайнер не понимает, как устроен фронтенд, он может делать нерабочие решения, которые потом приходится переделывать
Неправильная передача макетов в разработку: неструктурированные файлы, отсутствие нейминга слоев, непроработанные состояния (hover, focus и т.д.) и сценарии. Чаще всего дизайнер рисует картинку в статичном состоянии, а не продумывает, как с ней будут взаимодействовать команда и пользователи

Что можно сделать дизайнеру, чтобы улучшить взаимодействие?

  1. Изучить основы фронтенда (HTML/CSS) на базовом уровне + панель разработчика + атомарный дизайн, названия и функции элементов
  2. Поддерживать порядок в файле, чтобы всей команде было ясно, где что находится и в каком статусе готовности
  3. Давать релевантные названия слоев, компонентов и их пропсов (свойств)
  4. Проработать микро-ux (показывать все состояния элементов): обозначить где что лежит и подписать
  5. Использовать токены: согласовать с командой подход к созданию и неймингу
  6. Проработать все сценарии, каждый из которых лежит отдельно от другого с наглядным путем, комментами, ссылками, видео / прототипом
  7. Проводить дизайн-ревью, если есть возможность

Как вы можете помочь разработке?

Подсказывайте по взаимодействию с фигмой. Это не их основная программа, они не знают всех фич, обновлений и названий. Они не знают, как быстро пермещаться между макетами, компонентами и их состояниями
Нейминг в фигме отличается от нейминга в разработке, существует много не совпадений по функционалу
И самое главное, спрашивайте и уточняйте: «Что я могу улучшить? Как я могу тебе помочь?»

Здоровое взаимодействие – это не разовая передача файла, а постоянный процесс общения и доработки

Подробнее в видео
]]> с чего начать новичку в дизайне http://mankadsgn.ru/blog/post3 http://mankadsgn.ru/blog/post3?amp=true Wed, 16 Jul 2025 15:23:00 +0300 Для новичков кратко о состоянии рынка дизайна и первых шагах новичка

с чего начать новичку в дизайне

Привет, ребятушки! 🩷 Сегодня поговорим о том, как сейчас выглядит рынок дизайна и с чего начать, если вы только собираетесь попробовать
Если коротко – рынок сильно изменился. Порог входа стал выше, конкуренция выросла, а требования к дизайнерам стали строже. Просто «уметь делать красиво» уже не прокатит, а бездумно юзать нейросети – моветон
Но это не повод складывать лапки. В любой сфере всегда будут те, кто скажет: «Уже поздно начинать». И вы можете их послушать и никогда не попробовать
Но если вы из тех, кто понимает, что начинать никогда не поздно, то подходите к вопросу осознанно и ловите стратегию

Стратегия первых шагов

1) Определите направление дизайна
Веб, продуктовый, графический, коммуникационный или другие направления дизайна – попробуйте понять, что вам ближе
Ответьте себе на вопросы:
  • Что вам нравится делать?
  • Какой у вас тип мышления?
  • Вам нравится работать в одиночку или в команде?
  • Что для вас важнее: визуал, самовыражение или решение проблем, анализ поведения людей?
Далее посмотрите обзоры и сравните направления, можете на практике попробовать по чуть-чуть те, которые заинтересовали
И только после определения направления
2) Освойте инструменты
Если мы говорим про интерфейсы, то без Figma сегодня никуда. Это базовый минимум, который нужно знать, чтобы двигаться дальше
Также не стоит пытаться изучить сразу все. Начните с базы и постепенно усложняйте материал
3) Учитесь системности
Не просто повторяйте туториалы с YouTube, а анализируйте, почему нужно делать именно так. Учитесь видеть структуру, паттерны и взаимосвязи – это пригодится в любом направлении дизайна
4) Делайте проекты
Простые макеты и маленькие кейсы, потому что только через практику приходит понимание, что работает, а что нет
5) Найдите окружение
Комьюнити, где можно общаться с другими дизайнерами, задавать вопросы, получать обратную связь, а не страдать в одиночку
6) Не бойтесь ошибаться
Начало карьеры – время экспериментов. Если вы выбрали не то направление, то потом можно перейти в другое
Если у вас ничего не получается, то продолжайте делать и учиться на своих ошибках. Вспомните, как вы учились чему-то впервые, и сколько времени вам потребовалось, чтобы начать чувствовать себя увереннее
Ошибки – естественная часть процесса обучения
]]> софт скилы для дизайнера интерфейсов http://mankadsgn.ru/blog/jd19g8e7i1-soft-skili-dlya-dizainera-interfeisov http://mankadsgn.ru/blog/jd19g8e7i1-soft-skili-dlya-dizainera-interfeisov?amp=true Wed, 16 Jul 2025 15:23:00 +0300 Для опытных почему важно развивать не только хард скилы в фигме, но и софты тоже

софт скилы для дизайнера интерфейсов

Вы можете иметь сильные UI навыки и даже UX, но если ваша говорилка и думалка не развиты, то о какой работе в команде идет речь?
К сожалению, софт скилы иногда играют решающую роль при выборе кандидата, поэтому если вы не думали о том, чтобы начать учиться разговаривать, анализировать и объяснять свои решения, то пора задуматься.

Почему это важно:

1) Продажа себя на собеседованиях

Без умения донести собственную ценность и вес ваших навыков – вы просто «еще один дизайнер с рынка».
Вам нужно уметь:
  • Анализировать и предлагать разные решения, учитывая контекст, аудиторию, ситуацию.
  • Аргументировать и ставить под сомнения / защищать свои решения.
  • Демонстрировать открытость и желание разобраться.
  • Не только отвечать, но и задавать релевантные вопросы.

2) Коммуникация в кросс-функциональных командах

Без коммуникации ваши макеты – это просто картинки в Figma, потому что никто не узнает, как ими пользоваться, и почему выбранное вами решение является рабочим.
Вам придется выстроить грамотную коммуникацию с разработкой и остальными членами команды, если вы хотите быть ценным членом команды, а не «дизайнером-руками».

3) Реагирование на обратную связь

Если вы любите болезненно реагировать на любое высказывание в ваш адрес, то напоминайте себе, что критика касается ваших решений, а не вас лично. Вы должны уметь отделять себя от работы: «Плохое решение ≠ я плохой».
  • Концентрируйтесь на сути претензий, а не на своих эмоциях.
  • Учитесь признавать свои ошибки и использовать фидбек для улучшений.
Если у человека все в порядке с головой, то у него нет цели унизить вас. Каждый член команды хочет сделать продукт лучше, поэтому ищет более рабочее решение, которое учитывает финансовые и технические возможности.

4) Проведение и построение исследований

Вы либо будете их проводить, либо нет. Но если будете развиваться в данном направлении, то интервьюирования незнакомых людей, сбора инсайтов и анализа болей пользователей – не избежать, а значит придется много говорить и думать.

5) Прогнозирование своих решений

Прежде чем сразу прыгать в Figma, научитесь задавать себе единственный вопрос «Почему?» и задавайте его столько раз, пока не поймете, что вы будете делать и почему. Учитесь анализировать риски, тестировать крайние случаи и предусматривать разные варианты развития сюжета.

На своем курсе я учу не только думать, но и разговаривать

В универе у меня было ОГРОМНОЕ количество практики и на 5 курсе у нас было психологическое консультирование. Как вы понимаете такому на теории не научиться. Поэтому у нас были ролевки в начале в группе, а потом и на реальных людях.
Это был бесценный опыт!
Поэтому я решила для ребят с обратной связью ввести формат ролевых игр, чтобы подготовить их к реальной жизни. Так как у меня небольшая группа (12 человек) с обратной связью, то я могу спокойно экспериментировать с форматами и уделять внимание каждому.
На групповом тарифе предусмотрен регулярный формат для тренировки софт скилов, где мы учимся разговаривать, анализировать и аргументировать свои решения, чтобы в реальной жизни они не мэкали, не боялись и умели презентовать себя и свою работу.
Также мы проводим ролевые игры, где они тренируются проводить интервью друг на друге.
Дизайн интерфейсов не начинается и не заканчивается макетами в Figma, это про мышление, и коммуникацию. Уделяйте больше внимания софт скилам, создавайте себе среду и ситуации, потому что вам придется коммуницировать с другими людьми. Со временем операционка вытеснится и уйдет на задний план в лапки ИИ, а навыки анализа, аргументации и коммуникации – помогут вам остаться на плаву
]]> UI kit: элементы интерфейса http://mankadsgn.ru/blog/ygzo22taz1-ui-kit-elementi-interfeisa http://mankadsgn.ru/blog/ygzo22taz1-ui-kit-elementi-interfeisa?amp=true Sat, 03 Jan 2026 14:08:00 +0300 Для опытных UI Kit краткий список основных UI элементов и их описание

UI kit: элементы интерфейса

Любой UI Kit помимо токенов и стилей содержит элементы интерфейса (компоненты), которые позволяют юзеру взаимодействовать с сайтом, аппкой или программой, передавая команды системе и получая в ответ информацию
Если вас интересует продуктовый дизайн, то вы обязаны хорошо разбираться в дизайн системах и их составляющих, а так же грамотно собирать UI Kit

Основные типы элементов

→ Button (кнопка)

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

→ FAB (Floating Action Button, плавающая кнопка)

Плавающая кнопка выполняет основное или наиболее частое действие на экране. Она отображается поверх всего содержимого экрана (чаще в правом нижнем углу), обычно в виде круга с иконкой в центре
Используйте FAB только в том случае, если это наиболее подходящий способ представления основного действия экрана

→ Checkbox (чекбокс)

Чекбоксы позволяют пользователю выбрать один или несколько вариантов из списка. Отображаются в форме квадрата и галки
Если в списке есть несколько вариантов, вы можете сэкономить место, используя чекбоксы вместо переключателей вкл/выкл (switch). Если у вас один вариант, избегайте использования чекбокса и используйте вместо него переключатель вкл/выкл. Всегда опирайтесь на контекст

→ Radio Group (радио)

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

→ Switch (переключатель)

Переключатели включают или выключают состояние одной конкретной настройки (вкл/выкл, да/нет)
Переключатели являются предпочтительным способом настройки параметров на мобильном устройстве. Они используются для бинарного выбора (одна опция, два состояния), в то время как чекбокс – для нескольких независимых вариантов, а радио – для выбора одной из нескольких взаимоисключающих

→ Select (селект)

Селект – поле ввода с выпадающим меню для сбора информации из списка вариантов

→ Text Field / Input (текстовое поле)

Текстовые поля позволяют пользователям вводить и редактировать текст
Они позволяют юзерам вводить текст в пользовательский интерфейс. Обычно появляются в формах и диалогах

→ Accordion (аккордеон)

Компонент аккордеон позволяет пользователям показывать и скрывать разделы связанного контента на странице
Список панелей (обычно вертикальных) можно раскрывать и сворачивать кликом по их заголовкам, чтобы показать или скрыть связанный контент, экономя пространство и уменьшая визуальную нагрузку

→ Avatar (аватар)

Аватар – это визуальный способ представления юзера или компании в пользовательском интерфейсе

→ Date Picker (дейт пикер)

Date Picker позволяет пользователям выбирать дату
Помимо Date Picker существует компонент Time Picker, который позволяет пользователю выбрать время

→ Divider (разделитель)

Разделитель обеспечивает тонкую, ненавязчивую линию для группировки элементов с целью усиления визуальной иерархии

→ Table (таблица)

Таблицы отображают наборы данных и информацию таким образом, что ее легко просматривать, чтобы пользователи могли искать закономерности и идеи

→ Tooltip (подсказка)

Подсказка – элемент интерфейса, который обучает пользователя
Всплывающая подсказка появляется при наведении (hover) курсора к интересующему объекту или в случае недопустимого действия

→ Badge (значок)

Значок создает небольшой значок в правом верхнем углу у другого элемента. Обычно используется для оповещений. Показывает просто статус (индикация) и не является кликабельным элементом

→ Chip (чип / чипсы / фишки)

Чипсы – это компактные элементы, представляющие входные данные, атрибут или действие
Они позволяют пользователям вводить информацию, делать выбор, фильтровать контент или запускать действия. Обычно являются интерактивными и кликабельными элементами

→ Progress (прогресс)

Индикаторы хода выполнения (счетчики) отображают неопределенное время ожидания или отображают длительность процесса
Они информируют пользователей о состоянии текущих процессов, таких как загрузка приложения, отправка формы или сохранение обновлений

→ Skeleton (скелет)

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

→ Backdrop (бэкдроп)

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

→ Dialog (диалог)

Диалоги информируют пользователей о задаче и могут содержать важную информацию, требовать принятия решений или включать несколько задач
Диалог – это тип модального окна, которое появляется перед содержимым приложения, чтобы предоставить важную информацию или запросить решение. Диалоги отключают все функции приложения при появлении и остаются на экране до тех пор, пока не будут подтверждены, отклонены или не будет выполнено требуемое действие

→ Snackbar / Alert (снэки / алерты)

Закусочные бары (также известные как тосты) используются для кратких уведомлений о процессах, которые были или будут выполнены
Snackbar появляется временно и плавает над пользовательским интерфейсом, чтобы предоставить пользователям (некритические) обновления процессов приложения

→ App Bar (верхняя панель приложения)

Верхняя панель приложений предоставляет контент и действия, связанные с текущим экраном. Она используется для брендинга, заголовков экрана, навигации и действий.
Ее можно преобразовать в контекстную панель действий (Tool Bar) или использовать как панель навигации

→ Breadcrumbs (хлебные крошки)

Хлебные крошки – это навигационная цепочка, показывающая путь пользователя от главной страницы до текущей, состоящая из ссылок на предыдущие уровни иерархии

→ Drawer (драйвер)

Навигационные панели (или «боковые панели») обеспечивают эргономичный доступ к функциям сайта или приложения, таким как переключение учетных записей
Панель навигации может быть постоянно на экране или управляться с помощью значка меню навигации. Это дополнительные поверхности, которые в основном используются на десктопах и планшетах​​

→ Link (ссылка)

Ссылка связывает веб-страницы и является элементом навигации. Она выступает как более легкий аналог кнопки. Ее нельзя использовать для основного действия (для этого есть кнопка)

→ Dropdown / Menu (выпадающий список)

Выпадающий список (раскрывающийся) – элемент интерфейса, позволяющий выбрать одно из нескольких заранее определённых значений параметра. Вы можете раскрыть выпадающий список наведением (hover) курсора мыши или нажатием (click) на селект

→ Tabs (табы / вкладки)

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

→ Pagination (пагинация)

Пагинация позволяет пользователю выбрать определенную страницу из диапазона страниц

Элементов интерфейса достаточно много и каждый имеет свое строение и свойства. Грамотно построенные элементы помогут сэкономить множество часов и нервов как дизайнеру, так и разрабам. На модуле 2 мы не только разбираем построение всех вышеперечисленных элементов, но и показываем как их использовать в интерфейсе
]]>