Задание

Задача

Не останавливайтесь на первом получившемся результате, даже если он Вам нравится. Попробуйте по-разному организовать одно и то же содержание секции: изменить группировку, пропорции, расположение элементов и расстановку акцентов. Сравните решения и выберите наиболее удачное для итоговой доработки в Figma.

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

Что необходимо сделать

Выберите две темы из предложенного списка:

• Одну простую тему – разработайте 3-5 композиционных вариантов.
• Одну сложную тему – разработайте 3 композиционных варианта.

Затем выберите по одному лучшему варианту каждой темы и доработайте их внешний вид и устройство в Figma.

Результат: 6-8 вариантов секций и 2 доработанные финальные версии (одна простая и одна сложная). Финальные версии создаются на основе выбранных вариантов; придумывать для них ещё две новые композиции не нужно. Исходные варианты сохраните для сравнения.

Порядок выполнения

1. Изучите техническое задание

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

Тематику и тексты разрешается изменять. Например, вместо дизайн-студии можно выбрать кондитерскую, игровую компанию или инженерное бюро. При этом необходимо сохранить назначение секции, основные смысловые блоки и сопоставимый объём содержания. Удалять обязательные элементы только ради упрощения работы нельзя.

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

2. Найдите разные композиции

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

Это рабочие варианты: не нужно доводить каждую деталь до совершенства. На этапе поиска можно не настраивать Auto Layout окончательно, но содержание и композиция уже должны быть понятны. Корректная настройка Auto Layout обязательна у двух финальных секций.

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

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

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

3. Изучите референсы

После первых собственных вариантов можно изучить примеры на Dribbble, Behance и других ресурсах. Сравните способы организации информации и продолжите экспериментировать со своими секциями.

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

4. Выполните итоговый дизайн

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

К каждой готовой секции добавьте 1-2 предложения, объясняющие, почему выбрана именно эта композиция.

5. Проверьте секции с разным содержимым

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

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

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

Поэтому заранее проверяйте все перечисленные случаи, которые встречаются в Ваших секциях, и адаптируйте макет под разное содержимое. Если оно ломает расположение элементов, исправьте структуру, размеры или настройки Auto Layout. Не подгоняйте данные только ради красивой картинки: интерфейс должен оставаться понятным и аккуратным в разнообразных реальных ситуациях.

Общие требования

• Работайте в десктопном формате и масштабе 1:1.
• Применяйте Auto Layout в итоговых секциях; корректно используйте отступы, выравнивание, Hug contents, Fill container и Fixed.
• Обеспечьте логичную визуальную иерархию и удобочитаемость всех основных данных.
• Сохраняйте смысл и взаимосвязи информации, даже если изменяете её формулировки и визуальное представление.
• Использование компонентов необязательно. Применяйте их по необходимости, но не создавайте искусственную компонентную систему только ради требования.
• Интерактивное прототипирование, разработка сайта и адаптивные версии не требуются.
• Для высоты фрейма секции используйте Hug contents.

Часть 1. Простые секции

Выберите одну тему. Для неё необходимо создать от 3 до 5 различных композиционных вариантов и один финальный дизайн.

01. Подписка на рассылку

Задача: заинтересовать пользователя рассылкой и предложить подписаться.

Обязательно:

• Название или заголовок рассылки.
• Краткое объяснение пользы и периодичности выпусков.
• Поле для email и кнопка подписки.
• Короткое пояснение об условиях подписки.
• 2-3 примера тем или материалов из будущих выпусков.

Пример: рассылка о дизайне «Дизайн без лишнего шума»; подборка статей и инструментов раз в две недели; выпуски «Удобные формы», «Приёмы типографики», «Полезные плагины».

Дополнительно (по желанию): превью последнего выпуска, выбор интересующих рубрик, переключатель частоты получения писем.

02. Анонс мероприятия

Задача: представить событие и мотивировать посетителя зарегистрироваться.

Обязательно:

• Название и краткое описание мероприятия.
• Дата и время проведения.
• Место или формат участия; информация о стоимости.
• Не менее трёх пунктов программы с названиями или временем.
• Кнопка регистрации.

Пример: «Design Weekend» – конференция о цифровых продуктах; онлайн, 15 ноября, 11:00-18:00, участие бесплатное; в программе доклады о визуальных системах, интерфейсах и мастер-класс.

Дополнительно (по желанию): 1-2 спикера, фото площадки, количество мест, обратный отсчёт до начала.

03. Преимущества продукта

Задача: объяснить сильные стороны продукта и показать, чем он полезен пользователю.

Обязательно:

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

Пример: приложение NoteFlow: единое пространство задач, командная работа, удобные представления, автоматическое сохранение. Ключевое преимущество – объединение задач и заметок.

Дополнительно (по желанию): показатель эффективности, небольшой сценарий использования, сравнение «до/после».

Подсказка: преимущества не обязаны выглядеть как четыре одинаковые карточки. Попробуйте разные способы расстановки акцентов.

04. Отзывы клиентов

Задача: повысить доверие к продукту или услуге через отзывы пользователей.

Обязательно:

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

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

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

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

05. О компании

Задача: кратко рассказать, чем занимается компания и что её отличает.

Обязательно:

• Название компании и понятное описание её деятельности.
• Формулировка главного отличия, подхода или миссии.
• Два направления деятельности либо два принципа работы.
• Один конкретный факт: год основания, число выполненных проектов, достижение, охват или опыт.
• Ссылка или кнопка «Подробнее» / «О компании».

Пример: студия Forma проектирует цифровые продукты, сочетает исследования и разработку; направления – интерфейсы и дизайн-системы; основана в 2018 году.

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

Дополнительно (по желанию): история основания, цитата основателя, фото команды, производства или рабочего пространства.

06. Компания в цифрах

Задача: показать масштаб и достижения компании с помощью показателей.

Обязательно:

• Название компании и короткий контекст её деятельности.
• Четыре числовых показателя с осмысленными подписями.
• Пояснение к наиболее важному показателю.
• Период измерения, если без него цифры теряют смысл.

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

Пример: сервис ParcelGo – 120 городов доставки, 23 000 клиентов, 98% отправлений в срок, 7 лет работы.

Дополнительно (по желанию): мини-график, сравнение двух периодов, карта географии деятельности, один рекорд, короткая история достижения, кнопка «Узнать больше».

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

07. Контакты и обратная связь

Задача: дать пользователю возможность отправить обращение и предложить альтернативные способы связи.

Обязательно:

• Заголовок и краткое приглашение к обращению.
• Форма с полями имя, email, сообщение.
• Кнопка отправки.
• Чекбокс согласия на обработку персональных данных со ссылкой на политику конфиденциальности.
• Не менее двух альтернативных способов связи.
• Время работы либо ориентировочный срок ответа.

Пример текста чекбокса: «Я согласен на обработку персональных данных» (со ссылкой на соответствующий документ).

Пример: студия дизайна: форма заявки, email, Telegram, время ответа – в течение рабочего дня.

Дополнительно (по желанию): карта, адрес офиса, фотографии, выбор темы обращения, контакты отдельных отделов.

08. Промоакция

Задача: привлечь внимание к предложению и объяснить выгоду и ограничения.

Обязательно:

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

Пример: годовая подписка Focus Pro со скидкой 20% по промокоду FOCUS20; предложение действует до 30 ноября для новых пользователей.

Дополнительно (по желанию): таймер, ограниченное количество предложений, подарок, карточки товаров, два взаимосвязанных предложения.

Часть 2. Сложные секции

Выберите одну тему. Для неё необходимо создать 3 различных композиционных варианта и один финальный дизайн.

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

01. Тарифы сервиса

Задача: помочь пользователю сравнить возможности подписки и выбрать подходящий тариф.

Обязательно:

• Три тарифных плана с названиями, ценами и описанием целевой аудитории.
• Не менее шести общих характеристик для сравнения всех трёх тарифов: лимиты, функции, объёмы, число участников и т. п. Для каждой характеристики укажите значение или доступность в каждом тарифе.
• Два режима оплаты: за месяц и за год. Достаточно визуально показать переключатель и соответствующие цены; реализовывать переключение не требуется.
• Один рекомендуемый тариф, визуально выделенный среди остальных.
• Кнопка выбора каждого тарифа.
• Важные условия подписки или оплаты.

Пример содержания: сервис задач NoteFlow, тарифы Free / Pro / Team; различаются количеством проектов, доступным местом, числом участников, экспортом данных, историей версий и правами доступа. Pro рекомендован для небольших команд.

Дополнительно (по желанию): блок «Как выбрать тариф», подробное сравнение возможностей, часто задаваемый вопрос об оплате или рекомендации для отдельных пользователей.

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

02. Как работает сервис

Задача: объяснить последовательность работы сервиса, включая альтернативные действия пользователя.

Обязательно:

• Краткое описание сервиса.
• Четыре основных этапа, каждый с названием и пояснением.
• Понятный результат каждого этапа.
• Одна развилка процесса: например, самовывоз или доставка курьером.
• Время выполнения отдельных действий либо суммарная продолжительность.
• Основная кнопка для начала работы.

Пример содержания: сервис проката оборудования. Пользователь выбирает оборудование → указывает даты → выбирает получение (пункт выдачи / доставка) → возвращает оборудование. На этапе получения меняются условия и стоимость.

Дополнительно (по желанию): схема процесса, изображения отдельных этапов, пример заказа, важные ограничения или советы.

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

03. Программа обучения

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

Выберите предметную область:

• Школа фотографии.
• Керамическая мастерская.
• Кулинарная школа.
• Ботаническая иллюстрация.
• Либо предложите собственную тематику аналогичного масштаба.

Обязательно:

• Название программы, краткое описание, продолжительность и формат.
• Четыре общих учебных модуля; для каждого – название, длительность, 2-3 темы и практический результат.
• Два направления специализации на выбор после четырёх общих модулей. Покажите, что ученик выбирает одно из них.
• Итоговая работа или результат обучения.
• Условия участия и кнопка записи.

Пример содержания: школа фотографии. Общие модули: основы камеры, композиция, свет, обработка. Далее выбор специализации: портретная или предметная съёмка. Итог – серия работ для портфолио.

Дополнительно (по желанию): преподаватели, требования к оборудованию, примеры работ выпускников, отображение сформированных навыков.

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

04. Интеграции с другими сервисами

Задача: показать не только поддерживаемые приложения, но и реальные связи между ними.

Обязательно:

• Название продукта и его назначение.
• Не менее шести интеграций, сгруппированных по смыслу.
• Названия и/или логотипы приложений.
• Три сценария автоматизации с понятными связями между сервисами.
• Краткое описание пользы интеграций.
• Кнопка просмотра или подключения интеграций.

Пример: платформа SyncHub: GitHub, Slack, Notion, Google Drive, Figma, Telegram. Сценарии: изменение репозитория → сообщение в Slack; новая заявка → задача в Notion; новый файл → сохранение в Drive и уведомление в Telegram.

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

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

05. Кейс клиента

Задача: рассказать о решённой проблеме и показать подтверждённые результатом изменения.

Обязательно:

• Название проекта и заказчик.
• Исходная проблема и цель работы.
• Три ключевых изменения в продукте, процессе или услуге.
• Одно сравнение «до/после» (интерфейс, путь пользователя, схема или показатель).
• Не менее трёх результатов с числами, процентами или другими измеримыми данными.
• Цитата, отзыв либо вывод заказчика.
• Ссылка на подробный кейс или остальные проекты.

Пример: редизайн регистрации на городской фестиваль. До изменений регистрация занимала 5 минут 20 секунд, после – 2 минуты 10 секунд; завершение формы выросло с 46% до 78%; обращения в поддержку снизились со 120 до 45 в неделю. Введены более понятные шаги, сокращена форма и улучшена мобильная версия. Данные учебные, вымышленные.

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

Композиционная задача: объединить историю, визуальные доказательства, показатели и цитаты в понятное повествование «проблема → решение → результат».

06. Сценарии использования продукта

Задача: объяснить, как один продукт решает разные задачи нескольких групп пользователей.

Обязательно:

• Название и назначение продукта.
• Три категории пользователей с разными потребностями.
• Для каждой категории: проблема или цель, не менее трёх действий и результат.
• Возможности, которыми пользуются несколько категорий.
• Основная кнопка действия.

Пример: городская платформа мероприятий.

• Посетитель: ищет событие → выбирает сеанс → получает билет.
• Организатор: публикует событие → настраивает регистрацию → отслеживает участников.
• Представитель площадки: проверяет билеты → контролирует заполненность → получает отчёт о посещаемости.

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

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

07. Расписание мероприятия

Задача: удобно представить программу, в которой события идут по времени и могут проходить параллельно.

Обязательно:

• Название, дата и место мероприятия.
• Два параллельных потока (зала, площадки или направления).
• Не менее шести содержательных событий суммарно в двух потоках, без учёта перерывов, с временем начала и окончания каждого события.
• Названия событий, спикеры и тип мероприятия.
• Общие перерывы и хотя бы один интервал с параллельными выступлениями.
• Кнопка регистрации или перехода к подробностям.

Пример: конференция о дизайне и технологиях с двумя залами. В 14:00 одновременно проходят мастер-класс по Auto Layout и лекция о дизайн-системах; в 15:00 – общий перерыв.

Дополнительно (по желанию): изображения спикеров, категории, уровень сложности мастер-класса, избранные события, визуальный переключатель залов.

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

08. Конфигуратор продукта или услуги

Задача: представить пользовательский выбор взаимосвязанных параметров и показать итог предложения.

Обязательно:

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

Пример: конфигуратор путешествия выходного дня. Параметры: направление, тип проживания, активности. Выбор некоторых активностей зависит от направления; итоговая стоимость меняется в зависимости от набора услуг.

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

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

Это самый трудоёмкий вариант из списка. Реальная работа переключателей, расчёт стоимости и интерактивный прототип не требуются: достаточно спроектировать один логически согласованный экран с выбранными параметрами.

Что должно быть в итоговом файле Figma

Оформите работу так, чтобы преподаватель мог последовательно увидеть весь процесс:

1. Простая тема: 3-5 полноценных вариантов секции, затем доработанная финальная версия одного из них.
2. Сложная тема: 3 полноценных варианта секции, затем доработанная финальная версия одного из них.
3. Обоснование: по 1-2 предложения о выборе итоговой композиции для каждой темы.
4. Дополнительные подварианты (если выполнялись): отдельные цветовые схемы, стили кнопок и другие визуальные эксперименты.

Все варианты должны содержать реалистичные тексты, нужные изображения и обязательные смысловые блоки выбранной темы. По ним должно быть видно, как сопоставимое содержание организовано разными способами. У двух финальных версий дополнительно проверьте детали оформления и корректность Auto Layout.

Что оценивается

• Самостоятельность и разнообразие композиционных решений.
• Организация информации: группировка, расстановка акцентов, ясность и удобство восприятия.
• Соответствие техническому заданию и сохранение обязательного содержания.
• Качество финального дизайна: типографика, пропорции, отступы, цвета и визуальная целостность.
• Корректное применение Auto Layout в финальных секциях.
• Работа с разным содержимым: читаемость и сохранение структуры при замене изображений, изменении длины заголовков, имён и текстов.

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