Фото товара, схема процесса или иллюстрация понятия добавляет информацию.
Графика должна заработать место
Изображение не обязано быть утилитарным, но у него должна быть ясная работа. Если элемент можно удалить без потери смысла, действия и нужного настроения, он кандидат на удаление.
Знакомая иконка помогает найти действие, особенно вместе с подписью.
Одна сильная визуальная идея поддерживает характер страницы, не перекрывая содержание.
Фильтр: функция -> понятность -> приоритет -> доступность. Не начинайте с вопроса «красиво ли?».
W3C делит изображения по назначению: информативные, декоративные, функциональные и сложные.1 USWDS советует дополнять неоднозначные иконки текстом и не использовать их для исправления слабой структуры.2
Один экран, разный шум
Текст и главное действие одинаковы. Отличается только количество визуальных приемов.
Вариант А: все просит внимания
Создавайте сайты с ИИ
Курс для уверенного старта без программирования.
Начать обучение✦Сбой: градиент, свечение, стекло, кольцо и звезда конкурируют с сообщением.
Вариант Б: одна идея
Создавайте сайты с ИИ
Курс для уверенного старта без программирования.
Начать обучение⌁
Система: одна спокойная метафора поддерживает тему и не мешает действию.
Выберите понятный контроль
Пользователь должен сохранить урок. Какой вариант лучше передает действие?
Мини-лаборатория
Учитывайте узнаваемость иконки, подпись и возможность понять действие без догадки.
Назовите точную правку
Первый экран лендинга использует сразу семь эффектов. Заголовок и кнопка перестали быть главными.
Что найдено
Градиенты3
Разные тени4
Размытия2
Декоративные формы6
Функциональные изображения1
Какая команда лучше?
Дайте задачу агенту
Попросите провести инвентаризацию графики и доказать функцию каждого элемента до редизайна.
Проведи аудит только по изображениям, иконкам и декоративным эффектам.
1. Перечисли каждый визуальный элемент на странице.
2. Назначь ему функцию: информирует, направляет, создает нужный тон или только украшает.
3. Найди элементы, которые конкурируют с заголовком и главным действием либо дублируют друг друга.
4. Для неоднозначных иконок предложи понятную подпись. Для важных изображений опиши нужный текстовый эквивалент.
5. Оставь одну главную визуальную идею и минимальный набор повторяемых эффектов.
6. Не меняй текст, структуру, типографику и палитру. После правки проверь порядок внимания.Урок освоен, если вы можете
Ваш преподаватель - агент
Попросите агента составить список визуальных элементов и мысленно удалить каждый по очереди. Если ничего важного не потеряно, потребуйте обоснование, зачем элемент возвращать.
Второй модуль завершен
Теперь вы умеете говорить об отступах, типографике, цвете и графике через роли, измеримые критерии и последствия для пользователя.