Создание интерактивного прототипа
Начните со встроенного шаблона OpenDesign Landing, адаптируйте его под себя и проверьте готовую страницу перед передачей. Также можно создать новый Prototype (прототип) на основе брифа.
Шаг 1 — Откройте шаблон
Откройте Community (сообщество) и выберите OpenDesign Landing. Просмотрите Preview (предпросмотр), затем откройте More ways to Use и выберите Remix, чтобы создать из примера редактируемый проект. Команда Use запускает работу на основе примера промпта, а Remix копирует пример в проект, который можно редактировать.
Этот шаблон — пример дизайна. Все версии, количественные показатели, отзывы и ссылки в нём приведены в качестве примеров. Проверьте и замените их, прежде чем использовать шаблон для реального продукта.
Шаг 2 — Задайте странице чёткую цель
Откройте index.html в разделе Design Files (файлы дизайна). В режиме Preview отображается страница, а в режиме Code — её исходный код. Решите, что оставить из шаблона: редакционную типографику, тёплый бумажный фон, коллаж и ритм секций. Составьте список сведений о продукте, призывов к действию и адресов перехода, которые нужно заменить.
Адаптируй эту посадочную страницу для вымышленной независимой дизайн-студии. Сохрани тёплый бумажный фон, коралловые акценты, редакционную типографику и коллаж. Замени первый экран, услуги, избранные работы и контактный текст на явно вымышленный демонстрационный контент. Настрой навигацию так, чтобы она вела к нужным секциям; вместо реальных сценариев работы с аккаунтом или оплаты используй адреса-заглушки. Проверь отображение на компьютере и мобильном экране шириной 390px. Подготовь редактируемый HTML и ресурсы, на которые он ссылается.Это пример брифа, который можно адаптировать, а не утверждение о том, что скриншоты были созданы на его основе. Чтобы начать с пустого проекта, выберите Prototype на Home (главной странице), завершите настройку ИИ и отправьте свой бриф вместе с референсами.
Шаг 3 — Внесите небольшое изменение вручную
Выберите Edit (редактирование), выделите курсивное акцентное слово на первом экране и в поле Text замените taste, на craft,. Выберите Save (сохранить). Выйдите из режима редактирования и перезагрузите страницу: в заголовке по-прежнему должно отображаться craft,. В руководстве по редактированию на холсте описана работа с типографикой, цветом, размером, интервалами и отменой действий.
Шаг 4 — Проверьте другое окно просмотра
В меню Desktop над холстом выберите Mobile (390 × 844) или Tablet (820 × 1180). Проверьте переносы, навигацию, интервалы, кадрирование изображений и размеры областей касания. При этом изменяется размер предпросмотра, но дизайн не исправляется автоматически.
Шаг 5 — Запросите точечное изменение
Используйте Comment, чтобы прикрепить запрос к элементу, или Mark, чтобы отправить скриншот и примечание. Например: «Сделай это акцентное слово коралловым. Сохрани его курсивное начертание, размер и положение». Сохранение комментария не запускает агента. Проверьте выбранную обратную связь, прежде чем нажать Send to chat. Подробнее см. в разделе инструменты обратной связи.
Шаг 6 — Протестируйте и передайте результат
Перед проверкой навигации и кнопок выйдите из режимов Edit, Comment и Mark. Проверьте каждую ссылку на секцию и каждый адрес перехода, затем с помощью Export выберите PDF, изображение, ZIP или автономный HTML — в зависимости от доступных вариантов. Сохраните ресурсы, на которые есть ссылки, и откройте передаваемый результат вне клиента, прежде чем считать работу завершённой. В разделах Файлы и версии проекта и совместный доступ описаны другие способы передачи.
Если Preview пуст
Дождитесь загрузки предпросмотра, затем выберите Reload Preview. С помощью Code убедитесь, что файл содержит код. Если предпросмотр по-прежнему пуст, повторно откройте файл из Design Files или экспортируйте HTML и откройте его в браузере вместе со связанными ресурсами. Если файл работает вне клиента, но не внутри него, сообщите версию приложения, затронутый файл и текст ошибки.