Telegram-канал f_s_c_p - FSCP: Неотсортированное

FSCP

18 апреля 2025 20:46

Дизайнер прислал ужасный макет (как в примере), а вы не арт-директор и не можете сказать, что конкретно в нем не так? В новом ChatGPT o4 серьезно прокачали vision — способность понимать, что изображено на картинках. Поэтому грузим макет, пишем промт из серии:

Представь, что ты арт-директор. Критически прокомментируй этот макет. Дай профессиональные рекомендации, как его улучшить.

Получаем детальный разбор (разверните цитату):

1. Композиция и иерархия
Перегруженность визуальных центров. Сейчас «пластиковые ОКНА», «БЫСТРО И ДОСТУПНО» и номер телефона конкурируют за внимание одновременно.

Рекомендация: выбрать один‑единственный силовой элемент (например, «ОКНА») и остальные блоки выстроить в пределах подчинённой иерархии.

2. Типографика
Слишком много гарнитур и стилей. Используется минимум три разных шрифта (узкий, полужирный, курсивный), плюс вариативные размеры и регистры – глаз «теряется».

Рекомендация: ограничиться двумя семействами шрифтов (один — для заголовков, другой — для текста), унифицировать вес (например, заголовки — Bold, подзаголовки — Regular) и убрать курсив, заменив его подчёркиванием или другим цветом.

3. Цветовая палитра
Непродуманная градиентная заливка. Переход со светло‑жёлтого в светло‑зелёный фоновый цвет выглядит пестро и отвлекает.

Рекомендация: оставить однотонный или очень мягкий фон (например, светло‑серый), а акцентные цвета (красный, тёмно‑синий) использовать дозированно, чтобы не «резали» глаз.

4. Выравнивание и сетка
Смещение блоков. Линии текста выглядят «плавающими»: номер телефона выступает за границы, надписи «двери⋆лоджии⋆перегородки» не выровнены.

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

5. Пространство и «дыхание»
Слишком плотно. Между заголовками, иллюстрацией окна и контактами почти нет пустого пространства.

Рекомендация: увеличить внутренние поля (padding) вокруг каждого смыслового блока, добавить «воздуха» между строками (line‑height ≈ 1.3–1.5 от размера шрифта).

6. Иллюстрация окна
Мелковата и теряется. Сейчас иллюстрация не поддерживает текстовую иерархию и выглядит «прилепленной».

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

7. Контраст и читаемость
Красный по светлому градиенту. «БЫСТРО И ДОСТУПНО» в красном читается тяжело из‑за бликов фона.

Рекомендация: либо сделать тон фона более ровным, либо заменить красный на более тёмный, сохраняя при этом акцент.

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

По мимо поджопника, я бы дал дизайнеру + - такие же комментарии. А еще мы можем попросить новую визуальную модель сгенерировать по этим комментариям новый макет 🥂. Сверстает плохо, сделает с ошибками, но можно будет использовать как референс.

_______
Источник | #strangedalle