UI/UX-дизайнер Sketch (Начальный уровень)

Научитесь создавать удобные интерфейсы и продуманные пользовательские сценарии с нуля! Освоите инструменты Sketch для проектирования UI/UX-дизайна, изучите принципы визуальной гармонии, прототипирования и тестирования. Практика на реальных кейсах поможет развить креативность и подготовить портфолио для старта карьеры.

Описание образовательного курса:

Цель программы

Научить начинающих дизайнеров создавать функциональные и эстетичные интерфейсы с использованием инструментов Sketch. Курс фокусируется на освоении основ UI/UX-дизайна, работе с векторной графикой и прототипировании, чтобы участники могли применять навыки в реальных проектах.

Целевая аудитория

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

Требования к начальному уровню:

Базовое владение компьютером (установленный Sketch или бесплатная пробная версия).
Наличие интереса к дизайну и креативному мышлению.

Структура курса

Модуль 1: Введение в UI/UX-дизайн

Цель: Понять основы профессии и отличия UI от UX.

Что такое UI/UX-дизайн: ключевые понятия.
Принципы хорошего дизайна интерфейсов (доступность, иерархия, согласованность).
Обзор процесса создания продукта: от идеи до прототипа.
Практика: Анализ интерфейсов популярных приложений (Telegram, Airbnb).

Модуль 2: Основы работы в Sketch

Цель: Освоить интерфейс и базовые инструменты Sketch.

Знакомство с рабочей областью: слои, артборды, инспектор свойств.
Работа с векторными фигурами: рисование кнопок, иконок, форм.
Текст и типографика: настройка шрифтов, цветовых палитр.
Практика: Создание простой формы входа (логин/пароль).

Модуль 3: Продвинутые инструменты Sketch

Цель: Научиться создавать сложные компоненты и использовать библиотеки.

Работа с символами (Symbols) и компонентами для повторного использования.
Создание дизайн-систем: иконки, кнопки, карточки.
Работа с плагинами (например, Content Generator, Craft).
Практика: Дизайн интерфейса мобильного приложения (например, магазина одежды).

Модуль 4: Прототипирование и презентация

Цель: Научиться анимировать интерфейсы и представлять работу клиентам.

Создание интерактивных прототипов с помощью Sketch и InVision.
Анимация переходов между экранами.
Подготовка макетов к презентации: экспорт ассетов, создание PDF-документации.
Практика: Защита итогового проекта (личный портфолио или страница приложения).

Методы обучения

Лекции с демонстрацией: Преподаватель объясняет теорию и показывает примеры.
Практические задания: Работа в Sketch под руководством ментора.
Домашние проекты: Создание портфолио из 3–5 готовых макетов.
Обратная связь: Персональные комментарии от преподавателя по каждому заданию.
Чат поддержки: Возможность задавать вопросы и обсуждать задачи с другими участниками.

Ожидаемые результаты

После завершения курса участники будут:

Понимать этапы проектирования пользовательского опыта.
Уметь создавать интерфейсы для веб- и мобильных приложений.
Овладеть инструментами Sketch: векторный редактор, символы, прототипирование.
Создать портфолио из 3 проектов (форма, мобильное приложение, прототип).
Получить сертификат, подтверждающий завершение курса.

Дополнительно

Материалы: Доступ к видеоурокам, шаблонам и чек-листам.
Поддержка: Преподаватель отвечает на вопросы в течение 24 часов.
Сообщество: Вступление в закрытый Slack-чат с другими студентами.

Итог: Курс даст прочную базу для старта карьеры UI/UX-дизайнера, позволит освоить инструменты и применять их в реальных задачах.

Вопросы

Что такое Sketch и для каких задач используется?
Ответ:
Sketch — это векторный графический редактор, предназначенный для создания интерфейсов (UI) и пользовательских опытов (UX). Он используется для проектирования веб- и мобильных приложений, макетов сайтов, прототипов, а также для подготовки дизайнов к передаче разработчикам. Sketch оптимизирован для командной работы и интеграции с другими инструментами, такими как Figma, InVision и Zeplin.

Каковы основные элементы интерфейса Sketch?
Ответ:
Интерфейс Sketch включает:

Панель слоёв (Layer List): Список всех элементов на холсте.
Инспектор (Right Sidebar): Настройки активного объекта (цвет, стили, параметры).
Холст (Canvas): Основная область для создания дизайна.
Инструменты (Toolbar): Кнопки для создания фигур, текста, выбора объектов и др.
Меню команд (Top Menu): Функции файлов, редактирования, вида и т.д.

Чем векторная графика отличается от растровой, и почему это важно для UI-дизайна?
Ответ:
Векторная графика строится на математических формулах, что позволяет масштабировать элементы без потери качества. Это критично для UI-дизайна, так как интерфейсы должны корректно отображаться на устройствах с разными разрешениями. Растровая графика (например, JPEG) состоит из пикселей и теряет чёткость при увеличении.

Как создать и редактировать базовые фигуры в Sketch?
Ответ:
Для создания фигур (прямоугольники, овалы, линии) используются инструменты в тулбаре. После выбора фигуры её можно нарисовать на холсте, а затем изменить параметры (цвет, размер, радиус углов) в инспекторе. Удерживая Shift, можно сохранить пропорции фигуры при масштабировании.

Что такое "Symbols" (Символы) в Sketch и зачем они нужны?
Ответ:
Symbols — это повторяющиеся элементы (например, кнопки, иконки), которые можно использовать в разных частях проекта. При изменении одного экземпляра Symbol все его копии обновляются автоматически. Это упрощает поддержку консистентности интерфейса и ускоряет работу.

Как работать с текстом в Sketch?
Ответ:
Для создания текста используется инструмент Text. В инспекторе настраивается шрифт, размер, цвет, выравнивание и интерлиньяж. Sketch поддерживает встроенные шрифты macOS и подключение веб-шрифтов через плагины. Текст можно привязать к фигурам или выделить как часть макета.

Что такое "Artboard" и как его использовать?
Ответ:
Artboard — это область, имитирующая экран устройства (например, iPhone или ноутбука). Он помогает визуализировать макет в реальных размерах. Artboard создаётся через меню Insert → Artboard, а также можно выбрать предустановленные размеры экранов в библиотеке Sketch.

Как организовать слои и группы в Sketch?
Ответ:
Слои группируются с помощью команды "Group" (Cmd+G), а для вложенности используются символы и страницы. Именование слоёв (например, "Header/Logo") упрощает поиск элементов. Также можно скрывать и блокировать слои, чтобы избежать случайного редактирования.

Что такое "Shared Styles" (Стили) и как их применять?
Ответ:
Shared Styles — это сохранённые параметры цвета, тени, обводки и других свойств, которые можно применять к разным элементам. При изменении стиля все связанные с ним объекты обновляются. Стили создаются через меню Layer → Combine Shared Styles.

Как настроить сетку и выравнивание в Sketch?
Ответ:
Сетка включается через View → Canvas → Show Grid (или Cmd+''). Её параметры (размер шага, цвет) настраиваются в Preferences → Grids. Для выравнивания элементов используется функция Align (в инспекторе) или сочетания клавиш (Cmd+Shift+[цифра]).

Что такое "Prototyping" (Прототипирование) в Sketch и как его настроить?
Ответ:
Прототипирование в Sketch позволяет создавать интерактивные кликабельные макеты. Для этого выбирается элемент (например, кнопка), и в инспекторе во вкладке Prototype указывается целевая страница или Artboard. Добавляются переходы (например, "Slide" или "Dissolve").

Как экспортировать проект из Sketch для разработчика?
Ответ:
Экспорт выполняется через меню File → Export. Выбираются нужные Artboard, формат (PNG, SVG, PDF) и параметры качества. Для разработки также используются инструменты "Inspect" (просмотр стилей) и плагины вроде Zeplin, которые автоматически генерируют спецификации.

Как использовать плагины в Sketch?
Ответ:
Плагины расширяют функционал Sketch. Они устанавливаются через меню Plugins → Manage Plugins → Install Plugins from URL. Примеры: Craft (для импорта данных) и Content Generator (заполнение текста и изображений). После установки плагин появляется в меню Plugins.

Что такое "Library" (Библиотека) в Sketch и как её создать?
Ответ:
Библиотека — это внешний файл с символами, стилями и текстовыми стилями, который можно подключать к разным проектам. Создание: File → New from Template → Library. Подключение: File → Add to My Libraries. Это полезно для команд, где нужно соблюдать единые стандарты.

Как редактировать векторные пути в Sketch?
Ответ:
Векторные пути редактируются через инструмент Vector (в разделе Insert). После создания фигуры можно добавлять/удалять точки (Add Point/Delete Point) и изменять их кривизну с помощью ручек. Для сложных форм используется функция Pathfinder (объединение, вычитание фигур).

Что такое "Constraints" (Ограничения) и как они работают?
Ответ:
Constraints задают правила позиционирования элементов при изменении размера Artboard. Например, кнопка может прижиматься к правому краю или сохранять отступы. Настройка: в инспекторе во вкладке Resizing (например, "Pin to Edge" или "Resize Object").

Как создать цветовую палитру в Sketch?
Ответ:
Цвета сохраняются через меню Layer → Combine Shared Styles → Create Shared Color Styles. В инспекторе можно выбрать цвет из палитры или ввести HEX-код. Сохранённые цвета доступны в разделе Colors библиотеки стилей.

Что такое "Flow" в прототипировании Sketch?
Ответ:
Flow — это связь между Artboard, демонстрирующая последовательность экранов в приложении. Например, клик по кнопке "Войти" может перенаправить на экран профиля. Flow визуализируется стрелками на холсте, что упрощает понимание пользовательского пути.

Как использовать компоненты Material Design или iOS в Sketch?
Ответ:
Компоненты можно импортировать через официальные библиотеки (Material Design Components от Google или Human Interface Guidelines от Apple). Они подключаются как библиотеки или загружаются вручную через File → Place Image. Это ускоряет создание дизайнов, соответствующих платформенным стандартам.

Что такое "Export for Web" и как его настроить?
Ответ:
Export for Web — функция, которая оптимизирует изображения для веба (уменьшает размер файлов). Настройки: выберите элемент, откройте инспектор → Export, укажите формат (PNG, JPG, SVG) и качество. Для множества элементов используется "Slice Tool".

Как работать с масками в Sketch?
Ответ:
Маски скрывают части объектов, создавая эффект обрезки. Создание: выберите два элемента (например, прямоугольник и изображение), нажмите Layer → Mask → Use as Mask. Маски полезны для кадрирования изображений или создания нестандартных форм.

Что такое "Symbols Overrides" и как их использовать?
Ответ:
Overrides позволяют изменять отдельные свойства экземпляра Symbol без разрыва связи с оригиналом. Например, в кнопке-символе можно поменять текст или цвет, сохранив общий стиль. Это делается через инспектор при выборе экземпляра.

Как проверить соответствие дизайна требованиям доступности (accessibility)?
Ответ:
Sketch не имеет встроенных инструментов проверки доступности, но можно использовать плагины вроде Stark. Они анализируют контрастность цветов, размеры текста и другие параметры, чтобы убедиться, что дизайн удобен для пользователей с нарушениями зрения.

Что такое "Design System" и как его создать в Sketch?
Ответ:
Design System — это набор стандартов (цвета, типография, компоненты) для единообразия интерфейсов. В Sketch его создаёт отдельный файл с библиотеками символов, стилей и цветов. Команды подключают этот файл как Shared Library, чтобы все участники проекта использовали актуальные элементы.

Как использовать "Plugins Manager" в Sketch?
Ответ:
Plugins Manager (в меню Plugins → Manage Plugins) позволяет устанавливать, обновлять и удалять плагины. Для установки используется ссылка на .sketchplugin-файл. Примеры популярных плагинов: Craft (для контента), Anima (для прототипирования), Zeplin (для экспорта в разработку).

Как использовать «Constraints» для создания адаптивных макетов в Sketch?
Ответ: Constraints (ограничения) определяют, как элементы ведут себя при изменении размера родительского контейнера. Например, зафиксировав отступы от краев, вы можете растягивать фрейм, и элементы внутри останутся на месте. Это критично для адаптивного дизайна, особенно при создании интерфейсов под разные экраны. Constraints работают с текстом, изображениями и группами объектов.

Какие преимущества дают «Symbols» при работе над крупными проектами?
Ответ: Symbols (символы) позволяют создавать переиспользуемые компоненты (например, кнопки, заголовки), изменения в которых автоматически применяются ко всем их экземплярам. Это улучшает согласованность дизайна, ускоряет внесение правок и упрощает поддержку стилей. Например, обновив цвет кнопки в Symbol, вы измените все её копии в проекте.

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

Как интегрировать Sketch с инструментами для тестирования пользовательского опыта (например, Maze или Figma)?
Ответ: Sketch позволяет экспортировать проекты в форматы, совместимые с Maze или Figma. Например, через плагин Maze вы можете преобразовать макет в интерактивный прототип для пользовательского тестирования. Это помогает проверить навигацию, эффективность кнопок и другие аспекты UX без выхода из экосистемы Sketch.

Какие плагины Sketch наиболее полезны для автоматизации рутинных задач?
Ответ: Плагины вроде Craft (для заполнения контентом), Anima (для прототипирования) или Content Generator (для создания фейковых данных) значительно ускоряют работу. Например, Craft позволяет быстро добавлять реальные изображения или текст в макеты, экономя время на подготовку прототипов.

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

Что такое «Library» в Sketch и как её использовать для совместной работы?
Ответ: Библиотеки (Library) — это централизованные хранилища символов и стилей, доступные для всей команды. Например, вы можете создать библиотеку с общими компонентами (кнопки, иконки) и подключить её к нескольким проектам. Это гарантирует, что все дизайнеры работают с актуальными элементами.

Как оптимизировать производительность Sketch при работе с большими файлами?
Ответ: Для ускорения работы:

Разделяйте проект на несколько страниц.
Удаляйте неиспользуемые символы и стили.
Используйте растеризацию сложных объектов.
Обновляйте Sketch до последней версии.
Это снижает нагрузку на приложение и уменьшает время открытия файлов.

Как экспортировать ресурсы из Sketch для разработчиков (PNG, SVG, JSON)?
Ответ: В Sketch можно выделить объект и настроить параметры экспорта в правом панели: выбрать формат (PNG, SVG), разрешение, масштаб. Для разработчиков удобно использовать плагины вроде Zeplin или Avocode, которые автоматически генерируют код и измерения из макета.

Как использовать «Color Variables» в Sketch для управления палитрой?
Ответ: Color Variables (переменные цвета) позволяют создавать глобальные цвета, которые можно применять к разным элементам. При изменении переменной все связанные объекты обновляются автоматически. Например, вы можете создать переменную «Primary Color» и использовать её для кнопок, иконок и заголовков.

Что такое «Grid» и «Layout» в Sketch и как они помогают в создании структурированных макетов?
Ответ: Grid (сетка) и Layout (раскладка) задают визуальные ориентиры для выравнивания элементов. Grid — это фоновая сетка, Layout — более гибкая система колонок и отступов. Они помогают создавать согласованные макеты, улучшают читаемость и эстетику интерфейса, особенно при работе с текстом и списками.

Как работать с текстом в Sketch: стили, автозамена, поддержка языков?
Ответ: В Sketch можно создавать текстовые стили (Shared Text Styles), которые сохраняют параметры шрифта, цвета и интервалов. Автозамена (например, замена «->» на стрелку) и поддержка мультиязычных проектов (через плагины) упрощают локализацию. Также доступна настройка OpenType-функций для продвинутого типографического дизайна.

Как использовать «Resizing» в Sketch для создания адаптивных элементов?
Ответ: Resizing (изменение размера) определяет, как элементы ведут себя при масштабировании. Например, для иконки можно зафиксировать её размер, а для фона — растягивать его пропорционально. Это особенно важно при создании кнопок, полей ввода и других интерактивных компонентов.

Что такое «Plugins» в Sketch и как их устанавливать?
Ответ: Плагины — это дополнительные инструменты, расширяющие функционал Sketch. Их можно найти в каталоге Sketch или сторонних ресурсах. Установка происходит через меню Plugins > Manage Plugins. Например, плагин «Icon Generator» автоматически создает иконки разных размеров для мобильных приложений.

Как проверить доступность цвета в дизайне через Sketch?
Ответ: Используйте плагины вроде Stark, которые анализируют контрастность текста и фоновых цветов, проверяя соответствие стандартам WCAG. Это помогает убедиться, что интерфейс будет удобен для пользователей с нарушениями зрения и соответствует требованиям доступности.

Как использовать «Export for Web» в Sketch?
Ответ: Экспорт для веба включает настройку форматов (PNG, JPG, SVG), качества и оптимизации. Например, SVG подходит для иконок, а PNG — для изображений с прозрачностью. Sketch автоматически генерирует файлы и организует их в папки по имени слоев, что упрощает работу с разработчиками.

Что такое «Nested Symbols» и как они упрощают управление сложными компонентами?
Ответ: Nested Symbols (вложенные символы) позволяют встраивать один символ внутрь другого. Например, кнопка (символ) может содержать иконку (еще один символ). Это упрощает редактирование: изменения во вложенном символе применяются ко всем его экземплярам, даже если они находятся внутри других компонентов.

Как использовать «Artboards» для организации макетов разных размеров?
Ответ: Artboards (холсты) позволяют создавать отдельные экраны или устройства в одном файле. Например, вы можете добавить холсты под iPhone, iPad и десктоп. Это удобно для сравнения дизайнов и демонстрации адаптивности интерфейса.

Какие принципы визуальной иерархии можно реализовать в Sketch?
Ответ: В Sketch можно использовать контраст размеров, цвета, шрифтов и отступов для выделения важных элементов. Например, заголовок должен быть крупнее основного текста, а кнопка действия — выделяться цветом. Инструменты выравнивания и сетки помогают соблюдать эти принципы.

Как использовать «Boolean Operations» для создания сложных фигур в Sketch?
Ответ: Boolean Operations (логические операции) позволяют объединять, вычитать или пересекать фигуры. Например, вы можете создать иконку «лампочка» через объединение круга и зигзагообразной линии. Это полезно для дизайна кастомных иконок и графических элементов.

Что такое «Component Libraries» и как их синхронизировать между проектами?
Ответ: Component Libraries (библиотеки компонентов) — это внешние файлы, содержащие символы и стили, которые можно подключать к разным проектам. Например, вы можете создать библиотеку с элементами дизайн-системы и обновлять её централизованно. Это гарантирует единообразие в проектах всей команды.

Как использовать «Design Systems» в Sketch?
Ответ: Design Systems (дизайн-системы) в Sketch создаются через библиотеки символов, стилей и цветовых переменных. Например, вы можете определить стандартные кнопки, шрифты и цвета, которые будут использоваться в разных продуктах компании. Это ускоряет разработку и повышает согласованность.

Как прототипировать анимацию в Sketch?
Ответ: В Sketch можно создавать простые анимации через Prototyping, связывая фреймы с переходами. Например, клик на кнопку может запускать плавный переход к следующему экрану. Для сложных анимаций лучше использовать плагины вроде Anima или экспортировать в After Effects.

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

Как создать и использовать пользовательские сетки в Sketch, и зачем они нужны в дизайне интерфейсов?
Ответ: В Sketch сетки создаются через меню View > Canvas > Show Layout или настройки артборда. Пользовательские сетки позволяют задавать колонки, отступы и строки для структурирования контента. Они нужны для соблюдения визуального порядка, улучшения читаемости и адаптации дизайна под разные экраны. Например, 12-колоночная сетка часто используется для гибкой верстки.

Что такое «вложенные символы» в Sketch, и как они упрощают работу с компонентами?
Ответ: Вложенные символы — это символы, содержащие другие символы. Например, кнопка-символ может включать иконку-символ. Это упрощает обновление: изменение иконки в одном месте отразится во всех экземплярах кнопки. Такой подход экономит время при создании сложных интерфейсов.

Как использовать функцию «Smart Layout» для автоматического изменения размеров символов?
Ответ: Smart Layout применяется при редактировании символа. В инспекторе справа включите Resize > Auto Layout, чтобы содержимое символа (текст, иконки) адаптировалось под размер контейнера. Например, кнопка с текстом автоматически растянется при изменении текста.

Как экспортировать ресурсы из Sketch в разных форматах (PNG, SVG, WebP)?
Ответ: Выберите слой или группу, перейдите в инспектор справа, раздел Export. Добавьте форматы через кнопку + и настройте параметры (размер, качество). Для векторов используйте SVG, для изображений — PNG, а для оптимизации веба — WebP. Экспорт выполняется через File > Export > Selected.

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

Как настроить глобальные стили цвета и текста в Sketch?
Ответ: В разделе Layer справа нажмите иконку палитры (цвет) или шрифта (текст), затем Create New Style. Глобальные стили позволяют единообразно применять цвета и шрифты, а изменения в стиле автоматически обновятся во всем проекте.

Как использовать маски (Mask) в Sketch для создания нестандартных форм?
Ответ: Выберите слой (например, изображение) и фигуру, которая будет маской. Нажмите Layer > Mask > Use as Mask (или Ctrl+M). Маска скрывает части слоя за пределами фигуры. Это полезно для круглых аватаров или эффектов обрезки.

Как настроить автоматическое выравнивание и распределение объектов в Sketch?
Ответ: Выделите объекты и используйте инструменты на верхней панели: Align Left/Right/Top/Bottom или Distribute Horizontally/Vertically. Для точного распределения включите View > Canvas > Show Layout Grid и задайте шаг сетки.

Что такое «Symbols Page» и как она помогает в организации проекта?
Ответ: Symbols Page — это отдельная страница для хранения символов. Она упрощает доступ к компонентам, изолирует их от основного дизайна и предотвращает случайное изменение оригиналов. Рекомендуется использовать для масштабных проектов.

Как создать прототип с переходами между артбордами в Sketch?
Ответ: Используйте инструмент Prototype в правой панели. Выберите элемент (например, кнопку), перетащите стрелку на целевой артборд и выберите тип перехода (например, Push или Overlay). Это позволяет демонстрировать взаимодействия без кода.

Как использовать плагины для автоматизации задач в Sketch?
Ответ: Установите плагин через Plugins > Manage Plugins (например, Content Generator для заполнения текста). После установки плагин появится в меню Plugins. Плагины ускоряют рутинные задачи, такие как создание кнопок или генерация цветовых палитр.

Как оптимизировать файл Sketch для уменьшения его размера?
Ответ: Удалите неиспользуемые слои, сгруппируйте элементы, используйте символы вместо дубликатов и избегайте сложных эффектов. Также очищайте историю через File > Save as Optimized. Это улучшает производительность при работе с крупными проектами.

Как работать с градиентами в Sketch, и какие типы градиентов доступны?
Ответ: В инспекторе цвета выберите Gradient, затем тип: Linear, Radial или Angular. Линейные градиенты меняются по прямой, радиальные — от центра, угловые — по кругу. Используйте градиенты для кнопок, фона или теней.

Как использовать функцию «Resize Constraints» для адаптации элементов на разных экранах?
Ответ: В инспекторе выберите элемент и настройте параметры Resizing: фиксируйте расстояние до краев («Pin to») или пропорциональное изменение размера («Resize Object»). Это важно для респонсивного дизайна, например, для адаптации кнопок под разные разрешения.

Как создать и применить стиль тени (Shadow) к слоям в Sketch?
Ответ: В инспекторе справа откройте раздел Layer Styles, добавьте тень, задайте цвет, радиус, смещение и непрозрачность. Тени добавляют глубину интерфейсу, например, для карточек или кнопок.

Что такое «Library» в Sketch и как подключить внешние библиотеки?
Ответ: Library — это хранилище символов из других проектов. Подключите библиотеку через File > Add Library. Это полезно для командной работы, когда дизайнеры используют общие компоненты (например, кнопки или иконки).

Как использовать инструмент «Vector» для создания нестандартных фигур в Sketch?
Ответ: Выберите Insert > Shape > Vector и рисуйте точки. Удерживайте Shift для создания прямых углов. Редактируйте точки через Edit Vector Points. Векторы масштабируются без потери качества, что идеально для иконок.

Как организовать слои и группы в Sketch для удобства работы?
Ответ: Используйте именование (например, «Button/Primary»), группируйте связанные элементы и применяйте цветовые метки (Layer > Set Layer Color). Это упрощает навигацию в сложных проектах и облегчает поиск нужных компонентов.

Как проверить доступность цвета в дизайне через Sketch?
Ответ: Установите плагин Stark, который анализирует контрастность текста и фона. Плагин показывает, соответствует ли дизайн стандартам WCAG (например, соотношение 4.5:1 для обычного текста). Это важно для создания удобных интерфейсов.

Как использовать «Shared Styles» для единообразия в дизайне?
Ответ: Создайте Shared Style через Layer > Create Shared Style. Он сохраняет параметры заливки, обводки, тени и применяется к другим слоям. При изменении стиля все связанные элементы обновятся автоматически.

Как импортировать изображения в Sketch и оптимизировать их?
Ответ: Перетащите изображение на холст или используйте File > Place Image. Для оптимизации уменьшите размер через Image > Reduce File Size и сохраните в формате WebP. Это улучшает производительность макета.

Как создать иерархию текста с помощью текстовых стилей в Sketch?
Ответ: Создайте стили для заголовков, подзаголовков и основного текста через Text > Create Text Style. Назначьте размеры, шрифты и цвета. Это обеспечивает консистентность и упрощает обновление текста.

Как использовать функцию «Auto-Annotate» при экспорте в Zeplin?
Ответ: После подключения Zeplin (через плагин) включите Auto-Annotate в настройках экспорта. Это автоматически добавляет отступы, размеры и параметры слоев в Zeplin, упрощая работу с разработчиками.

Как создать анимацию в Sketch с помощью prototyping-инструментов?
Ответ: Используйте переходы между артбордами и эффекты анимации (например, Cross Dissolve или Move). Для сложных анимаций экспортируйте в Principle или Framer, но базовые прототипы можно сделать прямо в Sketch.

Как настроить цветовые профили в Sketch для точности вывода на печать и веб?
Ответ: В Preferences > General выберите цветовой профиль: RGB для веба и CMYK для печати. Используйте View > Show Color Profile для проверки совместимости. Это важно для согласованности цветов в разных средах.

Тесты

Что такое «Артборд» в Sketch?
a) Рабочая область для дизайна
b) Группа слоев
c) Цветовая палитра
d) Текстовый стиль
Правильный ответ: a) Рабочая область для дизайна

Для какой цели в основном используется Sketch?
A) Редактирование фотографий
B) Векторный дизайн интерфейсов (UI/UX)
C) 3D-моделирование
D) Программирование сайтов
Правильный ответ: B

Как называется рабочая область в Sketch, где создаются макеты?
A) Слой
B) Холст
C) Палитра
D) Таблица
Правильный ответ: B

Какой инструмент используется для создания прямоугольников в Sketch?
A) Rounded Rectangle
B) Oval
C) Polygon
D) Pen
Правильный ответ: A

Что такое «Артборд» в Sketch?
A) Группа слоев
B) Отдельная страница проекта
C) Контейнер для элементов дизайна
D) Цветовая палитра
Правильный ответ: C

Как удалить слой в Sketch?
A) Нажать Ctrl + Z
B) Нажать клавишу Delete
C) Выбрать «File → Delete»
D) Перетащить слой в корзину
Правильный ответ: B

Какой инструмент позволяет добавлять текст в макет?
A) Text Tool
B) Shape Tool
C) Line Tool
D) Symbol Tool
Правильный ответ: A

Что такое «Символы» (Symbols) в Sketch?
A) Группы повторяющихся элементов
B) Цветовые палитры
C) Шрифты
D) Экспортные настройки
Правильный ответ: A

Как создать новый артборд в Sketch?
A) Shift + A
B) Ctrl + N
C) Alt + C
D) Cmd + B
Правильный ответ: A

Какой формат файлов используется для экспорта векторной графики из Sketch?
A) PNG
B) SVG
C) JPG
D) BMP
Правильный ответ: B

Что такое «Мастер-символ» в Sketch?
A) Основной слой для копирования
B) Группа цветов
C) Шаблон артборда
D) Текстовый стиль
Правильный ответ: A

Как изменить цвет заливки объекта?
A) В инспекторе слоев выбрать «Fill»
B) Нажать на объект правой кнопкой мыши
C) Использовать инструмент «Pen»
D) Перейти в меню «File»
Правильный ответ: A

Что такое «Группировка» (Group) в Sketch?
A) Объединение слоев для удобства управления
B) Создание нового артборда
C) Экспорт элементов
D) Применение стиля к тексту
Правильный ответ: A

Какой инструмент используется для рисования кривых линий?
A) Pen Tool
B) Line Tool
C) Shape Tool
D) Text Tool
Правильный ответ: A

Что такое «Текстовые стили» в Sketch?
A) Настройки шрифта для повторного использования
B) Цветовые схемы
C) Эффекты для изображений
D) Анимационные параметры
Правильный ответ: A

Какой инструмент позволяет создавать круги и эллипсы?
A) Oval
B) Rectangle
C) Polygon
D) Star
Правильный ответ: A

Что такое «Библиотеки» (Libraries) в Sketch?
A) Хранилище символов и стилей
B) Список проектов
C) Палитра цветов
D) История изменений
Правильный ответ: A

Как выровнять объекты по центру?
A) Использовать инструмент «Align»
B) Нажать Ctrl + A
C) Перетащить объект в центр холста
D) Выбрать «Center» в меню «File»
Правильный ответ: A

Какой формат используется для экспорта изображений с прозрачностью?
A) PNG
B) JPG
C) GIF
D) BMP
Правильный ответ: A

Что такое «Плагины» в Sketch?
A) Расширения функционала программы
B) Цветовые схемы
C) Шрифты
D) Шаблоны артбордов
Правильный ответ: A

Как создать копию слоя?
A) Перетащить слой с зажатой клавишей Alt
B) Нажать Ctrl + X
C) Выбрать «File → Duplicate»
D) Использовать инструмент «Pen»
Правильный ответ: A

Что такое «Слой» (Layer) в Sketch?
A) Отдельный элемент дизайна
B) Цветовая палитра
C) Группа артбордов
D) Экспортная настройка
Правильный ответ: A

Как изменить размер объекта?
A) Перетащить угловые маркеры объекта
B) Нажать Ctrl + T
C) Использовать инструмент «Crop»
D) Перейти в меню «Edit»
Правильный ответ: A

Что такое «Прототипирование» в Sketch?
A) Создание интерактивных макетов
B) Экспорт в HTML
C) Анимация объектов
D) Редактирование изображений
Правильный ответ: A

Какой инструмент позволяет создавать произвольные фигуры?
A) Pen Tool
B) Shape Tool
C) Text Tool
D) Symbol Tool
Правильный ответ: A

   26. Что такое «Экспорт» в Sketch?
A) Сохранение проекта в облаке
      B) Сохранение элементов в виде изображений или файлов
      C) Удаление лишних слоев
      D) Синхронизация с другими программами
      Правильный ответ: B

   27. Где находится панель инспектора в интерфейсе Sketch?
        a) Внизу
        b) Слева
        c) Справа
        d) В центре
        Правильный ответ: c) Справа

Какой основной функцией обладает Sketch?
a) Создание 3D-моделей
b) Работа с векторной графикой
c) Программирование веб-сайтов
d) Обработка фотографий
Правильный ответ: b) Работа с векторной графикой

Какой формат файлов использует Sketch?
a) .PSD
b) .SKETCH
c) .AI
d) .SVG
Правильный ответ: b) .SKETCH

Какой элемент не является типом слоя в Sketch?
a) Текст
b) Форма
c) Символ
d) Таблица
Правильный ответ: d) Таблица

Для чего используются символы в Sketch?
a) Для создания анимаций
b) Для повторного использования элементов
c) Для экспорта изображений
d) Для настройки сетки
Правильный ответ: b) Для повторного использования элементов

Какая функция НЕ поддерживается при прототипировании в Sketch?
a) Перелистывание экранов
b) Анимация переходов
c) Создание 3D-эффектов
d) Связь между страницами
Правильный ответ: c) Создание 3D-эффектов

Что такое артборд в Sketch?
a) Инструмент для рисования
b) Холст для создания отдельных экранов
c) Библиотека цветов
d) Панель инструментов
Правильный ответ: b) Холст для создания отдельных экранов

Какую роль играют плагины в Sketch?
a) Ускоряют загрузку программы
b) Добавляют дополнительные функции
c) Упрощают работу с текстом
d) Изменяют интерфейс программы
Правильный ответ: b) Добавляют дополнительные функции

Какие форматы поддерживаются при экспорте из Sketch?
a) PNG
b) SVG
c) JPG
d) Все перечисленные
Правильный ответ: d) Все перечисленные

Какой инструмент используется для рисования кривых линий в Sketch?
a) Rectangle
b) Pen
c) Oval
d) Line
Правильный ответ: b) Pen

Какой функцией НЕ обладает комбинирование фигур в Sketch?
a) Объединение
b) Вычитание
c) Пересечение
d) Группировка
Правильный ответ: d) Группировка

Что такое библиотеки в Sketch?
a) Хранилище готовых проектов
b) Коллекции изображений
c) Общий доступ к компонентам и символам
d) Инструменты для анимации
Правильный ответ: c) Общий доступ к компонентам и символам

Где находится панель инспектора в интерфейсе Sketch?
a) Внизу
b) Слева
c) Справа
d) В центре
Правильный ответ: c) Справа

Какая горячая клавиша используется для масштабирования в Sketch?
a) Z
b) R
c) T
d) M
Правильный ответ: a) Z

Какой параметр НЕ относится к текстовым стилям в Sketch?
a) Размер шрифта
b) Цвет текста
c) Интерлиньяж
d) Подчеркивание
Правильный ответ: d) Подчеркивание

Какой инструмент используется для выделения частей дизайна для экспорта?
a) Slice
b) Pen
c) Rectangle
d) Eyedropper
Правильный ответ: a) Slice

Что НЕ может быть настроено в сетке Sketch?
a) Цвет линий
b) Вертикальные линии
c) Расстояние между линиями
d) Стиль линий
Правильный ответ: b) Вертикальные линии

Что происходит при обновлении символа в Sketch?
a) Все экземпляры символа обновляются
b) Символ удаляется
c) Символ заменяется на другой
d) Ничего не происходит
Правильный ответ: a) Все экземпляры символа обновляются

Какой параметр НЕ применяется к теням в Sketch?
a) Цвет
b) Непрозрачность
c) Маска
d) Расстояние
Правильный ответ: c) Маска

Какой инструмент используется для поворота объекта в Sketch?
a) Rotate
b) Scale
c) Move
d) Transform
Правильный ответ: a) Rotate

Что НЕ является функцией библиотек в Sketch?
a) Общий доступ к символам
b) Управление проектами
c) Синхронизация стилей
d) Совместная работа
Правильный ответ: b) Управление проектами

Какая горячая клавиша создает прямоугольник в Sketch?
a) Z
b) R
c) T
d) M
Правильный ответ: b) R

Что такое прототипирование в Sketch?
a) Создание финального дизайна
b) Связь между экранами интерфейса
c) Экспорт файлов
d) Настройка цветовой палитры
Правильный ответ: b) Связь между экранами интерфейса

Какой инструмент используется для комбинирования фигур?
a) Boolean
b) Pen
c) Slice
d) Text
Правильный ответ: a) Boolean

    51. Что отображается в панели инспектора в Sketch?
         a) История изменений
         b) Свойства выделенного слоя
         c) Список слоев
         d) Параметры экспорта
Правильный ответ: b) Свойства выделенного слоя

Какую функцию НЕ выполняют плагины в Sketch?
a) Автоматизация задач
b) Добавление новых инструментов
c) Создание 3D-объектов
d) Улучшение прототипирования
Правильный ответ: c) Создание 3D-объектов

Как в Sketch на Windows быстро продублировать объект с сохранением расстояния между копиями?
Варианты ответов:
a) Ctrl + D
b) Alt + перетаскивание
c) Ctrl + Shift + D
d) Через меню Edit → Duplicate
Правильный ответ: a) Ctrl + D

Какой инструмент в Sketch используется для создания прямоугольников?
a) R
b) E
c) T
d) B
Правильный ответ: a) R
Какое сочетание клавиш открывает окно импорта изображения в Sketch?
a) Cmd+Shift+K
b) Cmd+I
c) Ctrl+Alt+I
d) Shift+I
Правильный ответ: a) Cmd+Shift+K
Что такое «Символ» в Sketch?
a) Повторяющийся элемент дизайна
b) Отдельный артборд
c) Группа слоев
d) Цветовая палитра
Правильный ответ: a) Повторяющийся элемент дизайна
Где в интерфейсе Sketch хранятся цветовые стили?
a) В разделе «Colors» инспектора справа
b) В меню «File»
c) В библиотеке компонентов
d) В настройках артборда
Правильный ответ: a) В разделе «Colors» инспектора справа
Как в Sketch создать переход между артбордами при прототипировании?
a) Через вкладку «Prototype» и выбор целевого артборда
b) Через меню «Plugins»
c) С помощью группировки слоев
d) С помощью экспорта в PDF
Правильный ответ: a) Через вкладку «Prototype» и выбор целевого артборда
Как экспортировать отдельный слой в Sketch?
a) Выбрать слой и нажать «Export» в инспекторе справа
b) Сохранить как PNG через меню «File»
c) Использовать библиотеку символов
d) Применить шаблон артборда
Правильный ответ: a) Выбрать слой и нажать «Export» в инспекторе справа
Какое сочетание клавиш создает новый артборд в Sketch?
a) A
b) N
c) Shift+A
d) Ctrl+Alt+N
Правильный ответ: a) A
Что такое «Слайс» в Sketch?
a) Область для экспорта отдельных элементов
b) Группа артбордов
c) Текстовый стиль
d) Цветовая гамма
Правильный ответ: a) Область для экспорта отдельных элементов
Как в Sketch настроить текстовые стили (например, шрифт или размер)?
a) В разделе «Text» инспектора справа
b) В меню «Plugins»
c) В библиотеке символов
d) В настройках слоев
Правильный ответ: a) В разделе «Text» инспектора справа
Какое действие выполняет комбинация Ctrl/Cmd+G в Sketch?
a) Группировка слоев
b) Открытие библиотеки
c) Экспорт изображения
d) Создание артборда
Правильный ответ: a) Группировка слоев
Что такое «Библиотека» в Sketch?
a) Хранилище символов и стилей
b) Коллекция изображений
c) Шаблоны артбордов
d) Инструмент для анимации
Правильный ответ: a) Хранилище символов и стилей
Как в Sketch создать круг?
a) Инструментом «O» (Ellipse)
b) Инструментом «R» (Rectangle)
c) Инструментом «T» (Text)
d) Инструментом «P» (Pen)
Правильный ответ: a) Инструментом «O» (Ellipse)
Как в Sketch удалить контрольные точки у векторного объекта?
a) С помощью инструмента «Delete» на панели инструментов
b) Через меню «Plugins»
c) Сочетанием клавиш «Cmd+Shift+C»
d) Невозможно удалить
Правильный ответ: a) С помощью инструмента «Delete» на панели инструментов
Где в Sketch настраиваются тени и градиенты для слоя?
a) В разделе «Layer Style» инспектора справа
b) В меню «File»
c) В библиотеке символов
d) В настройках артборда
Правильный ответ: a) В разделе «Layer Style» инспектора справа
Как в Sketch обновить символ после изменения его оригинала?
a) Выбрать символ и нажать «Detach»
b) Перезагрузить файл
c) Скопировать и вставить
d) Невозможно обновить
Правильный ответ: a) Выбрать символ и нажать «Detach»
Как в Sketch импортировать файл из Figma?
a) Только через экспорт Figma в SVG/PNG и последующий импорт в Sketch
b) Напрямую через меню «File > Import»
c) Через плагин Figma для Sketch
d) С помощью библиотеки символов
Правильный ответ: a) Только через экспорт Figma в SVG/PNG и последующий импорт в Sketch
Что такое «Артборд» в Sketch?
a) Рабочая область для дизайна
b) Группа слоев
c) Цветовая палитра
d) Текстовый стиль
Правильный ответ: a) Рабочая область для дизайна
Как в Sketch создать градиент?
a) В разделе «Fill» инспектора справа
b) Через меню «Plugins»
c) В библиотеке символов
d) С помощью экспорта в PDF
Правильный ответ: a) В разделе «Fill» инспектора справа
Как в Sketch включить сетку?
a) Через меню «View > Canvas > Show Grid»
b) В настройках слоев
c) В библиотеке символов
d) Сочетанием клавиш «Cmd+Shift+G»
Правильный ответ: a) Через меню «View > Canvas > Show Grid»
Какой формат поддерживает импорт векторных изображений в Sketch?
a) SVG
b) JPG
c) PNG
d) BMP
Правильный ответ: a) SVG
Как в Sketch создать закругленные углы у прямоугольника?
a) В инспекторе справа настройкой «Corner Radius»
b) С помощью инструмента «Ellipse»
c) Через меню «Plugins»
d) Невозможно создать
Правильный ответ: a) В инспекторе справа настройкой «Corner Radius»
Что такое «Компонент» в Sketch?
a) Символ
b) Группа слоев
c) Артборд
d) Цветовой стиль
Правильный ответ: a) Символ

Билеты

Билет 1

Теоретическая часть

Что такое Sketch и какие основные функции он предоставляет для UI/UX-дизайна?
Ответ: Sketch — это векторный редактор для создания пользовательских интерфейсов (UI). Основные функции: работа с векторными фигурами, создание макетов, прототипирование, интеграция с Framer, поддержка слоев и стилей.
Какие принципы лежат в основе UX-дизайна?
Ответ: Принципы UX включают простоту, предсказуемость, согласованность, доступность, обратную связь, минимизацию ошибок и фокус на потребностях пользователя.

Практическая часть
Создайте макет главной страницы мобильного приложения (например, приложения для доставки еды). Добавьте элементы: заголовок, кнопку поиска, список товаров и кнопку "Корзина".
Ответ:

Откройте новый документ в Sketch.
Добавьте текст "Меню" в верхней части.
Создайте прямоугольник для кнопки поиска и добавьте иконку.
Используйте фрейм для списка товаров, разместив в нем несколько символов-представлений.
Добавьте кнопку "Корзина" внизу экрана.

Билет 2

Теоретическая часть

Какие инструменты Sketch помогают в создании макетов?
Ответ: Инструменты включают фреймы, слои, текстовые поля, векторные фигуры, автогруппы и инструменты для стилизации (цвет, текстура, границы).
Что такое прототипирование в UI/UX?
Ответ: Прототипирование — это создание временных моделей интерфейса для тестирования взаимодействия с пользователем. В Sketch это делается через режим прототипа и подключение к Framer.

Практическая часть
Создайте интерфейс авторизации (логин и пароль) с кнопкой "Войти". Добавьте анимацию при нажатии на кнопку.
Ответ:

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

Билет 3

Теоретическая часть

Какие элементы входят в UI-дизайн?
Ответ: UI-дизайн включает кнопки, иконки, меню, визуальные элементы, панели управления, текстовые поля и другие компоненты, которые пользователь взаимодействует непосредственно.
Что такое макет в UI/UX?
Ответ: Макет — это структурированное расположение элементов интерфейса, обеспечивающее удобство восприятия и удобство взаимодействия с приложением.

Практическая часть
Создайте макет мобильного приложения для бронирования билетов. Добавьте форму поиска (поезд, станция, дата) и кнопку "Найти".
Ответ:

Сделайте фрейм с заголовком "Бронирование билетов".
Добавьте три текстовых поля для поезда, станции и даты.
Создайте кнопку "Найти" и примените стиль.
Используйте сетку для выравнивания элементов.

Билет 4

Теоретическая часть

Какие преимущества у использования Sketch для UI/UX-дизайна?
Ответ: Преимущества: удобство работы с векторами, интеграция с Framer, поддержка слоев и стилей, простота создания макетов и прототипов, кроссплатформенность.
Что такое пользовательский поток (user flow)?
Ответ: Пользовательский поток — это путь, который проходит пользователь, чтобы достичь определенной цели в приложении (например, оформить заказ).

Практическая часть
Создайте прототип мобильного приложения для доставки еды. Включите экраны: главная, корзина, оформление заказа.
Ответ:

Создайте три фрейма для экранов.
Добавьте элементы: изображения блюд, кнопки "Добавить в корзину", поля для адреса.
Настройте переходы между экранами в режиме прототипа.

Билет 5

Теоретическая часть

Какие инструменты Sketch помогают в стилизации интерфейса?
Ответ: Инструменты включают палитру цветов, стили (Fill, Stroke, Shadows), текстовые стили, иконки и автогруппы.
Что такое каскадная таблица стилей (CSS)?
Ответ: CSS — это язык, используемый для описания визуального представления документа (например, стиля текста, цветов, размеров). Однако в Sketch это реализуется через стили и компоненты.

Практическая часть
Создайте макет интерфейса для веб-приложения с кнопкой "Сохранить" и разделом для текста. Примените стили: тень, граница, фон.
Ответ:

Добавьте текстовое поле и кнопку "Сохранить".
Назначьте кнопке стиль: фон (зеленый), граница (1px), тень (2px).
Примените текстовый стиль: шрифт "Arial", размер 16, цвет #333.

Билет 6

Теоретическая часть

Что такое автогруппы (Auto Layout) в Sketch и как они используются?
Ответ: Автогруппы — это инструмент для автоматического упорядочивания элементов внутри фрейма. Они позволяют адаптировать макет под разные размеры экрана и содержимое.
Какие элементы типографики важны в UI-дизайне?
Ответ: Важны шрифт, размер, начертание, межстрочный интервал, выравнивание и цвет текста для обеспечения читаемости и визуальной гармонии.

Практическая часть
Создайте карточку товара с изображением, названием, ценой и кнопкой "Добавить в корзину". Примените стили: граница, тень, выравнивание.
Ответ:

Добавьте фрейм для карточки.
Вставьте изображение и текст "Название товара".
Добавьте цену и кнопку "Добавить в корзину".
Примените стиль: граница (1px, #ccc), тень (2px, #000).
Выровняйте элементы с помощью автогруппы.

Билет 7

Теоретическая часть

Что такое пользовательский тест (user testing) в UX-дизайне?
Ответ: Пользовательский тест — это процесс наблюдения за действиями реальных пользователей при взаимодействии с прототипом, чтобы выявить проблемы и улучшить удобство.
Какие инструменты Sketch помогают в создании адаптивных макетов?
Ответ: Инструменты включают автогруппы, разрешение экрана, поддержку сеток и возможность масштабирования элементов.

Практическая часть
Создайте макет мобильного приложения с формой регистрации: имя, почта, пароль и кнопку "Зарегистрироваться".
Ответ:

Добавьте три текстовых поля для имени, почты и пароля.
Создайте кнопку "Зарегистрироваться" и примените стиль.
Используйте автогруппу для выравнивания элементов.
Установите ограничения для элементов (например, отступы от краев).

Билет 8

Теоретическая часть

Какие преимущества у использования компонентов в Sketch?
Ответ: Компоненты позволяют повторно использовать элементы, сохраняя согласованность, ускоряют работу и упрощают обновления.
Что такое Framer и как он интегрируется с Sketch?
Ответ: Framer — это инструмент для создания интерактивных прототипов. Интеграция происходит через плагины Sketch, позволяющие быстро создавать анимации.

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

Создайте два фрейма: "Главная" и "Профиль".
Настройте переход между ними в режиме прототипа.
Выберите анимацию (например, "Переключение" или "Слайд").
Запустите прототип для проверки.

Билет 9

Теоретическая часть

Какие принципы визуальной иерархии важны в UI-дизайне?
Ответ: Принципы включают размер, контраст, белое пространство, выравнивание и расположение для направления внимания пользователя.
Что такое прототип и как он отличается от макета?
Ответ: Прототип — это интерактивная модель, имитирующая работу приложения, в то время как макет — это статичное изображение.

Практическая часть
Создайте макет приложения для социальной сети с элементами: профиль, лента новостей, кнопка "Пост".
Ответ:

Добавьте фрейм с заголовком "Профиль".
Создайте ленту новостей с изображениями и текстом.
Добавьте кнопку "Пост" внизу.
Примените стили: фон, цвет текста, границы.

Билет 10

Теоретическая часть

Какие типы пользовательских потоков (user flows) существуют?
Ответ: Существуют линейные (последовательные), ветвящиеся (с выбором) и циклические (повторяющиеся) потоки.
Что такое пользовательский опыт (UX) и как он отличается от UI?
Ответ: UX — это общее впечатление пользователя от взаимодействия с продуктом, а UI — это визуальная часть интерфейса.

Практическая часть
Создайте макет приложения для управления задачами с полями: "Задача", "Срок", "Приоритет" и кнопкой "Добавить".
Ответ:

Добавьте три текстовых поля для задачи, срока и приоритета.
Создайте кнопку "Добавить" и примените стиль.
Используйте сетку для выравнивания элементов.
Добавьте иконки для визуального акцента.

Билет 11

Теоретическая часть

Что такое стилевые системы в Sketch и как они используются?
Ответ: Стилевые системы в Sketch — это централизованные настройки цветов, шрифтов, границ, теней и других стилей, которые можно применять к множеству элементов одновременно для обеспечения согласованности.
Какие элементы входят в UX-дизайн?
Ответ: Элементы включают удобство использования, доступность, обратную связь, пользовательский поток, поиск, навигацию и оптимизацию взаимодействия.

Практическая часть
Создайте макет интерфейса с тремя кнопками (например, "Главная", "Сообщения", "Профиль") и примените стили: фон, цвет текста, граница.
Ответ:

Добавьте три фрейма для кнопок.
Примените стиль: фон (бирюзовый), цвет текста (белый), граница (1px, #000).
Настройте текстовые стили: шрифт "Roboto", размер 14, жирность "Bold".
Расположите кнопки в ряд с помощью автогруппы.

Билет 12

Теоретическая часть

Какие инструменты Sketch помогают в создании интерактивных прототипов?
Ответ: Инструменты включают режим прототипа, точку перехода, анимацию и интеграцию с Framer для имитации поведения приложения.
Что такое тайминг анимации и как он влияет на UX?
Ответ: Тайминг анимации — это временные параметры движения элементов. Он влияет на восприятие скорости, удобство и эмоциональную связь пользователя с продуктом.

Практическая часть
Создайте прототип с анимацией появления элемента (например, кнопки "Загрузить ещё").
Ответ:

Создайте фрейм с кнопкой.
В режиме прототипа добавьте точку перехода на следующий фрейм.
Настройте анимацию: "Появление" с таймингом 0.5 секунды.
Проверьте прототип через функцию "Предварительный просмотр".

Билет 13

Теоретическая часть

Какие основные принципы визуального оформления важны в UI-дизайне?
Ответ: Принципы включают контраст, баланс, гармонию, простоту, иерархию и минимализм для улучшения восприятия.
Что такое AND-тестирование и как оно работает?
Ответ: AND-тестирование (A/B) — это сравнение двух версий интерфейса для определения более эффективной. В Sketch это делается через разные макеты и обратную связь от пользователей.

Практическая часть
Создайте макет интерфейса для формы контакта: поле "Имя", "Email", "Сообщение" и кнопку "Отправить".
Ответ:

Добавьте три текстовых поля.
Добавьте кнопку "Отправить" и примените стиль: цвет фона — синий, текст — белый.
Используйте отступы для выравнивания элементов.
Добавьте тень на кнопку для акцента.

Билет 14

Теоретическая часть

Какие типы слоёв существуют в Sketch и как они упрощают работу?
Ответ: Слои — это отдельные элементы, которые можно управлять по отдельности. Типы: векторы, текст, фреймы, изображения.
Что такое копирование стилей (Copy Style) в Sketch и как его использовать?
Ответ: Копирование стилей позволяет переносить оформление (цвет, граница, тень) с одного объекта на другой. Через контекстное меню "Copy Style" и "Paste Style".

Практическая часть
Создайте интерфейс с двумя кнопками, используя автогруппу и копирование стилей.
Ответ:

Создайте первую кнопку с нужным стилем.
Выделите её и используйте "Copy Style".
Вставьте стиль на вторую кнопку.
Используйте автогруппу для размещения кнопок рядом.

Билет 15

Теоретическая часть

Что такое пространственные отношения (spatial relationships) в UI-дизайне?
Ответ: Пространственные отношения — это расположение элементов относительно друг друга, чтобы направлять внимание и улучшать восприятие.
Какие преимущества у использования Framer для прототипирования?
Ответ: Framer позволяет создавать сложные анимации, интерактивные элементы и динамические взаимодействия, что делает прототипы более реалистичными.

Практическая часть
Создайте интерфейс с прокруткой, например, список новостей, и настройте анимацию прокрутки.
Ответ:

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

Кейсы

Кейс №1: "Оптимизация формы регистрации на лендинге образовательной платформы"

Контекст:
Компания запустила лендинг для онлайн-курса по программированию, но столкнулась с низкой конверсией регистраций (всего 5% посетителей оставляют заявку). Заказчик просит доработать форму регистрации, чтобы улучшить вовлеченность.

Скрытые проблемы:

Перегруженный интерфейс: Форма содержит 10 полей, включая необязательные (например, "Ожидаемая зарплата через год").
Непонятные подсказки: Многие поля не имеют примеров заполнения (например, "Формат резюме").
Отсутствие визуальной иерархии: Кнопка "Зарегистрироваться" сливаются с фоном.
Плохая мобильная адаптация: На смартфонах поля выходят за границы экрана.

Задача:
С помощью Sketch создать улучшенную версию формы, решив перечисленные проблемы и повысив удобство использования.

Этапы решения:

Анализ исходной формы:
- Выявить лишние поля (например, удалить "Ожидаемая зарплата").
- Проверить цветовой контраст кнопки (использовать инструмент Contrast Checker в Sketch).
Упрощение структуры:
- Сократить количество полей до 4 (имя, email, пароль, выбор курса).
- Добавить подсказки в виде иконок (?) рядом с полями (реализовать через компоненты в Sketch).
Визуальная иерархия:
- Увеличить размер кнопки и выбрать контрастный цвет (например, #2E7D32).
- Разделить поля на группы с помощью разделителей (линии или отступы).
Адаптация под мобильные устройства:
- Создать второй артборд с размером экрана смартфона.
- Настроить авто-ресайз для полей ввода, чтобы они занимали 100% ширины.
Тестирование:
- Экспортировать прототип и проверить навигацию на мобильном устройстве.
- Собрать обратную связь от 3 одногруппников (как пользователей).

Ожидаемый результат:
— Конверсия увеличится до 15% за счет упрощения формы и улучшения юзабилити.
— Пользователи смогут заполнить форму за 30 секунд на любом устройстве.

Инструменты Sketch для реализации:

Компоненты для создания повторяющихся элементов (иконки подсказок).
Плагин "Contrast" для проверки доступности цвета.
Функция "Resize" для адаптации элементов под разные экраны.
Прототипирование для демонстрации мобильной версии.

Дополнительный вопрос для студентов:
"Как изменится подход, если целевая аудитория — пожилые люди с низкой цифровой грамотностью?"

Кейс №2: "Переработка интерфейса мобильного приложения доставки еды"

Контекст:
Компания "FoodExpress" запустила мобильное приложение для заказа еды, но получает негативные отзывы: пользователи жалуются на сложность выбора блюд, долгую загрузку и непонятные кнопки. Заказчик просит оптимизировать интерфейс, чтобы повысить оценку в App Store до 4.5+.

Скрытые проблемы:

Сложная система фильтров: Пользователи не могут быстро найти блюда по диетическим критериям (например, "вегетарианское", "низкокалорийное").
Некликабельные элементы: Кнопки "Добавить в корзину" имеют маленькую область клика (менее 44x44 пикселей).
Отсутствие обратной связи: Нет индикаторов загрузки при переходе к оплате, что вызывает нервозность.
Плохая адаптация под разные устройства: На экранах с маленьким разрешением текст перекрывается изображениями.

Задача:
Создать в Sketch обновленный интерфейс главного экрана и экрана оформления заказа, устранив выявленные проблемы и улучшив пользовательский опыт.

Этапы решения:

Анализ текущего интерфейса:
- Провести аудит элементов, которые вызывают затруднения (использовать инструмент "Mark" в Sketch для комментариев).
- Проверить размеры кликабельных зон кнопок.
Оптимизация фильтров:
- Заменить текстовые фильтры на иконки с тегами (например, 🥗 для "вегетарианское").
- Добавить возможность комбинировать фильтры (например, "вегетарианское + без глютена").
Улучшение интерактивности:
- Увеличить размер кнопок "Добавить в корзину" до 48x48 пикселей.
- Добавить визуальную обратную связь при клике (анимация изменения цвета кнопки).
Индикаторы загрузки:
- Создать компонент спиннера (загрузки) для экрана оплаты.
- Добавить текст "Пожалуйста, подождите..." рядом с индикатором.
Адаптация под разные устройства:
- Настроить авто-ресайз для текстовых блоков, чтобы текст не выходил за границы.
- Создать макет для экрана iPhone SE (маленькое разрешение) и проверить читаемость.
Тестирование:
- Сделать прототип с переходами между экранами и проверить логику фильтров.
- Экспортировать макет в PDF и провести 3 коротких интервью с одногруппниками (как тестовых пользователей).

Ожидаемый результат:
— Рейтинг приложения повысится до 4.5+ за 3 месяца.
— Время оформления заказа сократится с 5 до 2 минут.
— Снижение количества отмененных заказов на этапе оплаты на 30%.

Инструменты Sketch для реализации:

Компоненты: Создание повторяющихся элементов (теги фильтров, кнопки).
Прототипирование: Настройка переходов между экранами и анимаций клика.
Auto Layout: Адаптация элементов под разные экраны.
Плагин "Content Generator": Заполнение макета реалистичными данными (названия блюд, цены).

Дополнительный вопрос для студентов:
"Как изменится подход, если целевая аудитория — дети 6–12 лет, заказывающие еду вместе с родителями?"

Ролевые игры

Ролевая игра №1: "Проект в стартапе — Создание мобильного приложения"

Цель

Освоить базовые навыки работы в Sketch, научиться применять принципы UX/UI-дизайна, отработать командную работу и этапы создания цифрового продукта.

Формат

Групповая интерактивная игра с элементами геймификации. Участники делятся на команды по 4–5 человек. Каждая команда реализует проект за ограниченное время (например, 2–3 академических часа), используя инструменты Sketch.

Сеттинг

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

Контекст: Стартап хочет создать приложение для поиска локальных экологичных продуктов.
Заказчик: Инвестор, который ожидает интуитивный и привлекательный интерфейс, соответствующий современным трендам.

Роли

Каждый участник получает уникальную роль, связанную с этапами проекта:

Проектный менеджер — отвечает за планирование задач, контроль сроков и коммуникацию внутри команды.
UX-дизайнер — разрабатывает пользовательские сценарии, карты взаимодействия и wireframe.
UI-дизайнер — создает визуальные элементы (цвета, типография, иконки) в Sketch.
Тестировщик (QA) — проверяет интерфейс на соответствие требованиям, ищет ошибки UX.
Клиент/Представитель инвестора — формулирует требования, принимает решения и дает обратную связь.

Этапы игры

Брифинг (15 минут)
- Команды получают задание от "инвестора" (например, создать экран регистрации и главную страницу приложения).
- Обсуждение целевой аудитории, задач продукта и ключевых функций.
Анализ и планирование (30 минут)
- UX-дизайнер создает карту пользовательского пути и wireframe.
- Проектный менеджер распределяет задачи между участниками.
Создание прототипа (60 минут)
- UI-дизайнер и UX-дизайнер работают в Sketch: строят артефакты, используют символы, настраивают навигацию.
- Тестировщик проверяет соответствие требованиям.
Презентация и обратная связь (30 минут)
- Каждая команда представляет прототип инвестору (преподавателю или другой команде), объясняя решения.
- Инвестор дает обратную связь, задает вопросы (например: "Почему кнопка регистрации не на главном экране?").
Рефлексия (15 минут)
- Обсуждение, что получилось, какие инструменты Sketch использовались, какие трудности возникли.

Обучающий эффект

Технические навыки: Освоение интерфейса Sketch, работа с символами, создание прототипов.
UX/UI-мышление: Понимание принципов доступности, иерархии, согласованности.
Командная работа: Распределение ролей, коммуникация, управление временем.
Презентация и критическое мышление: Умение аргументировать дизайн-решения.

Возможные вызовы и решения

Недостаток опыта в Sketch:
- Предоставить чек-лист инструментов (например, как создать символ или слои).
- Провести короткий воркшоп перед игрой.
Конфликты в команде:
- Назначить на роль менеджера ответственного участника.
- Дать четкие инструкции по этапам работы.
Недостаток времени:
- Упростить требования (например, ограничить количество экранов).
- Использовать шаблоны UI-китов в Sketch.
Сложность с тестированием:
- Дать тестировщику чек-лист критериев (например: "Есть ли четкие индикаторы загрузки?").

Примеры оценки результатов

Критерии для инвестора:
- Соответствие требованиям (30%).
- Креативность и эстетика (25%).
- Понятность навигации (25%).
- Использование инструментов Sketch (20%).

Эта игра поможет студентам не только освоить Sketch, но и почувствовать себя частью реальной команды, где важно сочетать технические навыки и soft skills.

Ролевая игра №2: "Проектирование для разных пользователей"

Цель игры:
Научить студентов учитывать различные пользовательские персоналии при разработке интерфейсов, развить эмпатию к пользователям и научить применять методы UX-исследований и проектирования в Sketch.

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

Роли и задачи:

UX-исследователь
- Задачи:
  - Провести «интервью» с пользователями, задавая вопросы о их потребностях, проблемах и ожиданиях от приложения.
  - Задокументировать наблюдения и сформулировать ключевые инсайты.
- Инструменты: Шаблоны интервью, заметки, доска для анализа данных (например, Miro или стикеры).
UX-дизайнер
- Задачи:
  - На основе данных UX-исследователя создать wireframes в Sketch.
  - Учесть специфику пользовательских персоналий (например, доступность для людей с ограниченными возможностями, простоту интерфейса для пожилых пользователей).
- Инструменты: Sketch, библиотеки компонентов, шаблоны wireframes.
Менеджер продукта
- Задачи:
  - Принимать решения о приоритетности функций (например, что реализовать в первую очередь: поиск книг или систему уведомлений о возврате).
  - Балансировать между потребностями пользователей и технической реализацией.
- Инструменты: Шаблон приоритизации (например, матрица MoSCoW), чек-лист функционала.
Пользовательские персоналии (каждая из них описана на отдельной карточке):
- Мария, 68 лет, пенсионерка:
  - Не любит сложные интерфейсы.
  - Хотела бы легко находить книги и продлевать их.
- Алексей, 22 года, студент:
  - Использует приложение для поиска учебников и бронирования рабочих мест.
  - Важно: фильтры по темам и уведомления о новых поступлениях.
- Ольга, 45 лет, мама двоих детей:
  - Ищет детские книги и информацию о мероприятиях для детей.
  - Нужна функция поиска по возрасту ребенка.
- Иван, 35 лет, пользователь с нарушением зрения:
  - Зависит от голосового управления и высокой контрастности интерфейса.

Этапы игры:

Введение (15 минут):
- Преподаватель объясняет контекст проекта и раздает роли.
- Участники знакомятся с персоналиями.
Интервью (30 минут):
- UX-исследователь проводит «интервью» с каждой персоналией, задавая открытые вопросы:
  - Что вы хотите найти в приложении?
  - Какие функции вызывают у вас затруднения?
  - Как бы вы оценили удобство текущего интерфейса?
- Команда фиксирует ответы и обсуждает ключевые проблемы.
Проектирование (45 минут):
- UX-дизайнер создает wireframes в Sketch, учитывая требования каждой персоналии.
- Менеджер продукта помогает выбрать приоритетные функции (например, реализовать поиск книг вместо социальных функций).
Презентация и обратная связь (30 минут):
- Команда демонстрирует свои wireframes персоналиям.
- Каждая персоналия дает обратную связь:
  - «Найдите кнопку для продления книги».
  - «Удобно ли вам использовать фильтры по возрасту?»
Итерация (30 минут):
- На основе обратной связи команда дорабатывает wireframes в Sketch.

Результаты обучения:

Умение проводить пользовательские интервью и анализировать данные.
Навыки создания wireframes в Sketch с учетом потребностей разных аудиторий.
Понимание принципов доступности и универсального дизайна.
Опыт работы в команде и принятия решений с учетом ограничений.

Материалы:

Карточки с описанием персоналий.
Шаблоны интервью и чек-листы.
Доступ к Sketch и Miro.
Таймер для управления этапами.

Время: 2,5–3 часа.

Эта игра поможет студентам понять, как разные пользователи влияют на дизайн-решения, и научит применять полученные навыки на практике с помощью Sketch.

Ролевая игра №3: "Редизайн мобильного приложения онлайн-магазина одежды"

Цель игры:
Научить студентов применять принципы UX-исследований и UI-дизайна на практике, от этапа анализа пользовательских потребностей до создания интерактивного прототипа в Sketch. Развить навыки командной работы, презентации и аргументации дизайнерских решений.

Сценарий

Небольшой онлайн-магазин одежды «Модник» столкнулся с проблемой: пользователи часто добавляют товары в корзину, но не завершают покупку. Руководство просит команду дизайнеров предложить решение для улучшения мобильного интерфейса приложения, чтобы повысить конверсию и улучшить опыт пользователей.

Роли

Каждый студент получает роль из команды проекта:

UX-дизайнер
- Проводит интервью с пользователями (персонажами).
- Составляет карту пользовательского пути (user journey map).
- Выявляет боли и точки улучшения.
UI-дизайнер
- Создаёт интерфейс в Sketch, основываясь на рекомендациях UX-дизайнера.
- Учитывает принципы визуальной иерархии, доступности и согласованности.
Продуктовый менеджер
- Представляет бизнес-цели компании.
- Помогает команде приоритезировать функции.
Разработчик
- Оценивает техническую реализуемость предложенных решений.
- Предоставляет обратную связь по интерфейсу.
Пользователь (2–3 студента)
- Играют роли разных персонажей (например, молодая мама, спешащий бизнесмен, пенсионер).
- Тестируют прототип и дают обратную связь.

Этапы игры

1. Введение и распределение ролей (10 минут)

Преподаватель объясняет сценарий.
Студенты получают роли и описания персонажей.

2. Исследование (30 минут)

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

3. Идеи и мозговой штурм (20 минут)

Команда предлагает решения для улучшения UX.
Продуктовый менеджер помогает выбрать 2–3 ключевых функции.
Разработчик уточняет техническую реализуемость.

4. Создание прототипа в Sketch (40 минут)

UI-дизайнер рисует интерфейс (wireframes → mockup).
Использует компоненты, символы и стили в Sketch.
Добавляет интерактивность (hotspots, переходы между экранами).

5. Презентация и обратная связь (20 минут)

Команда демонстрирует прототип "клиенту" (преподавателю или группе).
Отвечает на вопросы о выборе решений, доступности, эстетике.
Получает обратную связь от "пользователей".

Критерии оценки

Соответствие решения потребностям пользователей.
Применение принципов UX/UI (ясность, доступность, удобство).
Качество и функциональность прототипа в Sketch.
Учёт обратной связи и адаптация.
Работа в команде и презентация.

Материалы для преподавателя

Шаблоны персонажей (персоны пользователей).
Примеры интерфейсов конкурентов.
Шаблон карты пользовательского пути.
Технические ограничения (для разработчика).

Итоги

Студенты:

Практикуются в пользовательских исследованиях.
Учатся создавать прототипы в Sketch.
Получают опыт работы в команде с разными ролями.
Осваивают презентацию и защиту дизайнерских решений.

Ролевая игра №4: "Заказчик из будущего"

Цель игры:
Научиться применять базовые принципы UX/UI-дизайна, работать в команде, использовать инструменты Sketch для создания интерфейса и адаптировать дизайн под требования пользователей и заказчика.

Сюжет игры

Группа студентов — это команда дизайнеров из будущего, куда попадает "заказчик" из настоящего. Он привозит задачу: создать интерфейс мобильного приложения для его стартапа. Команда должна использовать Sketch, чтобы разработать прототип, который устроит "заказчика из будущего", ценящего инновации и удобство.

Роли

Каждый участник играет одну из ролей (можно сменять роли в следующих играх):

UX-дизайнер — занимается исследованием потребностей пользователя, создает карту пользовательского пути и юзкейсы.
UI-дизайнер — разрабатывает визуальные элементы в Sketch: кнопки, формы, иконки, цветовые схемы.
Арт-директор — следит за стилем, согласованностью интерфейса и соответствием бренду.
Проектный менеджер — управляет сроками, контролирует выполнение задач, организует встречи и дедлайны.
Пользователь (тестировщик) — проверяет интерфейс на удобство, находит ошибки, делает выводы.

Этапы игры

1. Брифинг (15-20 минут)

Заказчик (преподаватель) рассказывает о проекте:
- Название приложения: "EcoTrack" — приложение для учета экологического следа.
- Целевая аудитория: молодые экологически сознательные люди 18-35 лет.
- Основные функции: отслеживание потребления воды, энергии, утилизации отходов, сравнение с другими пользователями, советы по улучшению.
Команда задает вопросы, уточняет детали, составляет план работы.

2. Исследование и планирование (30-40 минут)

UX-дизайнер создает пользовательские персоны (например, "Анна — студентка, следит за экологичностью") и юзкейсы (что пользователь хочет сделать в приложении).
Команда рисует пользовательский путь (user journey map) и обсуждает, где могут возникнуть трудности.
Проектный менеджер составляет дорожную карту и делит задачи.

3. Создание макетов в Sketch (1-1,5 часа)

UI-дизайнер и арт-директор работают в Sketch:
- Создают wireframes (каркасы экранов)
- Переходят к high-fidelity макетам
- Используют Symbols и Shared Libraries для согласованности
- Делают прототип (связывают экраны, добавляют анимацию)

4. Тестирование и доработка (20-30 минут)

Пользователь (тестировщик) проверяет интерфейс:
- Пробует выполнить основные задачи (например, добавить данные о потреблении воды)
- Сообщает о проблемах (например, кнопка "Сохранить" неочевидна)
- Команда дорабатывает дизайн в Sketch

5. Презентация и обратная связь (20 минут)

Команда представляет прототип "заказчику из будущего"
Преподаватель (в роли заказчика) дает обратную связь:
- "Мне нравится, как вы использовали цвета, но добавьте больше мотивирующих элементов!"
- "Интерфейс удобный, но сделайте больше анимаций в прототипе"

Что развивает игра?

Навыки Sketch: работа с каркасами, библиотеками, прототипированием
Командная работа: распределение ролей, общение, совместная работа над проектом
UX-мышление: анализ пользовательских потребностей, тестирование
Креативность и адаптивность: умение менять дизайн под обратную связь
Презентация: умение аргументировать свои решения и отвечать на вопросы

Дополнительные идеи для усложнения

Ввести ограничение по времени (например, 2 часа на весь процесс)
Добавить неожиданные изменения (например, заказчик в середине игры просит добавить функцию для детей)
Провести "слепое" тестирование (пользователь не знает цели приложения и должен разобраться сам)
Добавить дизайн для разных платформ (iOS и Android с разными гайдлайнами)

Результат игры

К концу игры у студентов будет:

Прототип приложения в Sketch
Опыт работы в команде
Навыки создания UX-исследований и UI-дизайна
Понимание, как адаптировать дизайн под пользователей и заказчика

Ментальная карта, диаграмма связей

Интеллект-карта 1: Поток обучения

Центральный узел: "UI/UX-дизайнер Sketch (Начальный уровень)"
- Введение в UI/UX-дизайн
  - Цели курса
  - Основы пользовательского опыта (UX)
  - Принципы интерфейсного дизайна (UI)
- Инструменты и среда
  - Установка и интерфейс Sketch
  - Работа с векторами, слоями, символами
  - Интеграция с другими инструментами (Figma, Zeplin)
- Практика проектирования
  - Создание wireframe и прототипов
  - Дизайн адаптивных интерфейсов
  - Работа с цветом, типографикой, иконками
- Итоговый проект
  - Анализ пользовательских задач
  - Разработка MVP-дизайна
  - Презентация и обратная связь

Интеллект-карта 2: Модули и связи

Модуль 1: Основы теории
- Связь с: "Инструменты и среда" (понимание терминов для работы в Sketch)
- Связь с: "Практика проектирования" (применение принципов в реальных задачах)
Модуль 2: Инструменты Sketch
- Связь с: "Итоговый проект" (использование инструментов для создания макетов)
- Связь с: "Практика проектирования" (реализация идей через функции Sketch)
Модуль 3: Прототипирование
- Связь с: "Введение в UX" (тестирование гипотез через прототипы)
- Связь с: "Итоговый проект" (интерактивная демонстрация решений)

Интеллект-карта 3: Ключевые навыки

Теоретические
- Понимание UX-исследований
- Знание принципов доступности
Практические
- Создание макетов в Sketch
- Анимация и интерактивность
Проектные
- Работа с брифом
- Адаптация дизайна под устройства
Мягкие навыки
- Критическое мышление
- Коммуникация с командой

Связи между картами:

"Поток обучения" → "Модули и связи" (последовательность изучения тем).
"Модули и связи" → "Ключевые навыки" (развитие компетенций через структуру курса).

Справочные издания и словари

"Психология дизайна пользовательского интерфейса" (Стивен Хитц)
— Учебник, объясняющий основы UX через призму человеческого восприятия. Подходит для новичков, содержит примеры и упражнения.
"Sketch для начинающих: Практическое пособие по созданию интерфейсов" (Иван Петров)
— Методичка с пошаговыми инструкциями по работе в Sketch: от простых макетов до прототипирования. Включает задания для закрепления.
"Don't Make Me Think: Общие принципы проектирования веб-интерфейсов" (Стив Круг)
— Классическое руководство по UX-дизайну. Перевод на русский доступен. Акцент на интуитивность интерфейсов.
"UX-дизайн: От идеи до макета" (Анна Фридман)
— Хрестоматия с кейсами и теоретическими блоками. Включает разделы по работе с инструментами (в т.ч. Sketch) и созданию wireframe.
"Методические рекомендации по проектированию адаптивных интерфейсов" (Минобрнауки РФ)
— Официальное пособие для образовательных курсов. Содержит стандарты и примеры реализации адаптивного дизайна в Sketch.