Из наброска в интерфейс

Сфотографируйте набросок, загрузите его и получите настоящий экран.

Шаги#

1. Сфотографируйте набросок строго спереди, при ровном свете, чтобы весь рисунок попал в кадр.
2. Загрузите его в поле промпта.
3. Добавьте контекст, которого рисунок передать не может: что за продукт, что означают прямоугольники, каково визуальное направление.

Набросок нашего экрана онбординга. Большой прямоугольник вверху слева — это видео, три прямоугольника друг под другом — шаги настройки с галочками. Современный SaaS-вид, фиолетовый акцент.

Чтобы наброски читались хорошо#

• Подписывайте прямоугольники. «герой», «навигация», «график» — написанные подписи читаются и используются.
• Рисуйте иерархию. Более крупные прямоугольники становятся более крупными элементами.
• Избегайте плотной штриховки. Линейные рисунки читаются надёжнее заштрихованных.
• Один экран на фото, если только вы намеренно не передаёте целый сценарий.

Из наброска сразу в вайрфрейм#

Если вы хотите остаться в низкой детализации — привести набросок в порядок, не выбирая пока визуальный стиль, — попросите вайрфрейм. См. Режим вайрфрейма.