На самой высокой вершине Королевства дизайна стояла башня мудрого мага света и тени по имени Контрастинус. Он был мастером выделения главного, а его заклинания помогали дизайнерам делать так, чтобы самые важные элементы сияли ярче всего.
Однажды к нему пришёл молодой дизайнер:
— О, Контрастинус, я создал свой сайт, но кажется, что посетители не видят главного. Что мне делать?
Маг улыбнулся и сказал: — Контраст — это ключ к твоей проблеме. Позволь мне показать, как свет и тень могут выделить главное и направить взгляд пользователя.
Яркость и фон
Контрастинус взмахнул своей палочкой, и текст на экране стал чётче виден.
— Первое правило контраста — убедись, что текст читаем, — сказал он. — Тёмный текст на светлом фоне или светлый текст на тёмном фоне — это основа магии.
Пример:
- Чёрный текст на белом фоне — классика, которая всегда работает.
- Белый текст на тёмно-синем фоне — элегантное решение для современных дизайнов.
Контрастинус добавил: — Чтобы проверить контраст, используй инструмент Contrast Checker (ссылка).
Выделение главного
Затем он указал на кнопку на сайте, которая терялась среди других элементов.
— Главное должно быть ярким и заметным. Если это кнопка, сделай её более насыщенного цвета. Если это заголовок, увеличь его размер.
Пример:
- Кнопка “Купить сейчас” должна быть красной или оранжевой, если остальная палитра сайта нейтральная.
- Заголовок крупного шрифта привлекает внимание сразу.
Маг добавил заклинание: — «Выдели ярким — важное станет главным». Используй это правило, чтобы магия всегда работала.
Использование теней и света
Контрастинус создал мягкую тень вокруг изображения.
— Тени помогают добавить глубину. Они делают элементы более объёмными и заметными.
Пример:
- Используй тени для кнопок, чтобы они выглядели интерактивными.
- Добавь световой акцент на главный элемент страницы.
Маг шепнул: — «Свет покажет путь, а тени добавят загадку». Это заклинание сделает твой дизайн уникальным.
Проверка на всех устройствах
Маг достал зеркало, которое отражало сайт на разных экранах.
— Контраст должен работать везде: на больших мониторах, планшетах и телефонах. Проверь, чтобы все элементы оставались читаемыми.
Пример:
- Убедись, что текст и кнопки не теряются на экранах меньшего размера.
Контрастинус добавил: — «Тот, кто видит, тот нажимает и взаимодействует с магией сайта». Это правило заставит пользователей взаимодействовать с твоим сайтом.
Плагины и инструменты контраста
— А теперь, юный волшебник, я открою тебе секретный свиток инструментов:
- Contrast Checker — проверяет контраст текста и фона (ссылка).
- Stark — плагин для Figma и Sketch, помогающий улучшить доступность (ссылка).
- Color Contrast Analyzer — проверяет соответствие стандартам WCAG (ссылка).
Используй эти инструменты, чтобы твои проекты сияли магией и были удобны для всех.
Фраза заклинание
Тот, кто владеет светом и тенью, управляет вниманием!
Советы Контрастинуса
- Делай текст читаемым: Используй правильный контраст между текстом и фоном.
- Выделяй главное: Пусть ключевые элементы бросаются в глаза.
- Добавляй тени: Это делает дизайн объёмным.
- Тестируй контраст: Проверяй его на всех устройствах.
- Используй инструменты: Плагины и онлайн-сервисы облегчат твою работу.
Молодой дизайнер следовал всем советам Контрастинуса. Его сайт стал не только красивым, но и понятным для пользователей. Теперь каждый мог легко найти самое важное, а дизайн сиял магией света и тени.
Вперед✨ Погрузись в мир магии дизайна! ✨
📌Читайте все сказки, а также скачивайте нужные чек-листы.📋
