Из референса в рабочий интерфейс
От структуры и типографики до работающего сценария. Учимся переводить визуальные решения в собственный интерфейс.
Пример: Jaxon Landing page · Открыть разбор →
Результат
Вы получите черновик собственного экрана: карту блоков, три правила визуального языка и один кликабельный сценарий. Референс здесь нужен не как объект для копирования, а как наблюдаемое доказательство решения: где стоит заголовок, как устроен ритм карточек, что меняется после нажатия. Не утверждайте, что восстановили исходный код, закрытый дизайн-файл или промпт автора: по готовой странице этого узнать нельзя.
Отделите факт от интерпретации. «Кнопка находится в первом экране» — наблюдение. «Автор хотел повысить конверсию» — гипотеза, которую нельзя объявлять фактом без первичного объяснения автора. Эта граница сохраняет урок честным и помогает перенести приём в другой контекст: личная библиотека не обязана решать задачи коммерческого лендинга.
Шаги
- Выберите один экран и один пользовательский сценарий: открыть материал, отфильтровать галерею или перейти к следующему уроку.
- Нарисуйте в заметке порядок областей: навигация, заголовок, главный блок, действие, вторичный контент. Подпишите, что пользователь должен понять в каждой области.
- Выпишите три наблюдаемых правила: например, максимальная ширина текста, повтор карточки, один акцентный цвет. Не переносите логотипы, иллюстрации и тексты из референса.
- Соберите собственный статичный вариант в существующих Blade-шаблонах и CSS. Сначала проверьте иерархию на узком экране.
- Добавьте одно действие и его видимый результат. Движение и декоративные эффекты оставьте на следующий проход.
Применимый prompt
Составь карту экрана для личной библиотеки: цель пользователя, порядок блоков, одно главное действие и три правила визуального ритма. Не копируй тексты и брендинг референса.
Критерий проверки
Без внешнего сайта можно объяснить назначение каждого блока, пройти выбранный сценарий и отличить свой контент от вдохновения референсом.
