Проект: три брифа — три стиля на одной странице

Урок 13.5 · Интерфейсы и сайты с нуля · Модуль 13. Один макет, разные стили · По подписке

Цель урока: Собрать три варианта одного блока по трём разным описаниям стиля и удержать их различимыми.

Нужно знать заранее: Уроки 13.1–13.4

Объяснение

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

Как это работает: Три брифа в задании написаны так, как их пишут заказчики, — но переведены в числа: 1. «Строгий корпоративный блок для отчёта» — акцент тёмно-синий, прямые углы, тонкая граница, плотный текст. 2. «Дорогая студия, ощущение паузы» — прямые углы, много воздуха, тень вместо границы, крупный текст. 3. «Детский кружок, чтобы записался родитель» — крупный кегль, большое скругление, толстая тёплая обводка, крупная кнопка. Различия должны быть видны по трём параметрам сразу. Если отличаются только цвета, человек скажет «это одно и то же, просто перекрашено» — и будет прав. И второе: все три варианта обязаны проходить базовые проверки. Кегль не ниже 15 px, кнопка не меньше 44 px, контраст текста в норме. Стиль никогда не отменяет читаемость — он над ней, а не вместо неё.

Уроки модуля 13

• 13.1 Стиль — это восемь настроек, а не «красиво» (бесплатно)
• 13.2 Деловой и премиальный: разница в воздухе, а не в цвете (по подписке)
• 13.3 Молодёжный, детский, школьный: кому какой кегль (по подписке)
• 13.4 Праздничный слой: декор меняется, структура нет (по подписке)
• 13.5 Проект: три брифа — три стиля на одной странице — вы здесь (по подписке)