Мини-брендбук, основанный на визуальном языке мастер-класса «Начни видеть свет». Цвет, типографика, композиция и правила оформления.
Визуальный стиль строится на контрасте тёмного пространства, светлой типографики и одного яркого акцента. Дизайн не конкурирует с фотографией, а помогает ей говорить.
Ничего лишнего. Каждый элемент должен помогать восприятию, а не просто заполнять пространство.
Почти чёрный фон, мягкий белый текст и лаймовый цвет, который направляет внимание.
Крупные поля, свободные композиции и расстояния между смысловыми блоками.
Снимки остаются главным визуальным содержанием. Интерфейс только организует пространство вокруг них.
Основу составляют пять базовых цветов и один дополнительный цвет для наведения курсора. Нажми на HEX-код или кнопку, чтобы скопировать значение.
Правило акцента. Лаймовый цвет используется дозированно. Он должен выделять главное, а не превращать всю страницу в яркое пятно. Основная площадь остаётся тёмной.
В исходной презентации используется системный шрифт, а не подключённый коммерческий шрифт. Это делает дизайн лёгким, быстрым и нативным для macOS, iOS и большинства современных браузеров.
Фотография начинается не с нажатия на кнопку. Она начинается с того, что ты замечаешь.
Body / Основной текстСвет, композиция и момент помогают передать настроение. Важно не просто зафиксировать сцену, а выбрать, что именно ты хочешь показать зрителю.
Caption / ПодписьВажно. Системный шрифт может немного отличаться на разных устройствах. Если потребуется абсолютное единообразие на всех платформах, можно отдельно выбрать и подключить веб-шрифт. В исходном дизайне такой шрифт не задан.
У каждого уровня текста своя задача. Не нужно выделять всё одновременно: крупный заголовок, контрастный акцент и спокойный основной текст уже создают достаточную иерархию.
Начни видеть.
Фотография начинается с внимания.
Выбирай точку съёмки, обращай внимание на направление света и убирай из кадра детали, которые отвлекают от главного.
04 / ПРАКТИКА · МОБИЛЬНАЯ ФОТОГРАФИЯ
Эти компоненты можно использовать на сайте, в презентациях, в информационных материалах и на страницах мастер-классов.
Фон #191919, скругление 12 px, тонкая граница.
Обрати внимание на направление света, контраст и настроение.
Полупрозрачный лаймовый фон и полоса слева.
Главный вопрос: что ты хочешь показать?
Соотношение сторон 16:9, скругление 10 px, тёмная подложка и ненавязчивая рамка.
Главная кнопка выделяется акцентным цветом. Вторичная остаётся нейтральной.
Скруглённые контурные метки для тем, категорий и коротких обозначений.
Лаймовые номера для шагов, разделов и последовательностей.
Воздух вокруг текста и фотографий - часть визуального стиля. Лучше оставить немного свободного пространства, чем пытаться уместить на экране всё сразу.
Принцип сетки. Для широких экранов используй контейнер с максимальной шириной около 1160 px и боковые поля 7%. Для мобильных устройств уменьши боковые поля примерно до 22 px.
Визуальная система не должна спорить со снимками. Она создаёт спокойную среду, в которой фотография получает достаточно места и внимания.
Для демонстрационных фотоблоков используй 16:9. Для портретов и отдельных работ выбирай формат под содержание фотографии.
Отдавай предпочтение кадрам с выразительным светом, ясным композиционным центром и интересным настроением.
Не добавляй декоративные эффекты только ради стиля. Важнее сохранить характер изображения и естественную выразительность света.
В оригинальной презентации используется едва заметное лаймовое свечение на тёмном фоне. Оно создаёт глубину, не превращая дизайн в неоновый.
Рекомендация. Используй градиент на обложках и крупных финальных блоках. Не нужно добавлять свечение на каждую карточку: оно потеряет выразительность.
Это базовые CSS-переменные исходной визуальной системы. Их можно использовать при создании новых страниц, презентаций и компонентов сайта.
/* Shatrov visual system */ :root { /* Backgrounds */ --bg: #101010; --panel: #191919; /* Typography */ --text: #f5f5f2; --body: #c8c8c8; --muted: #969696; /* Accent */ --accent: #d5f36a; --accent-hover: #e4ff91; /* Borders */ --line: rgba(255,255,255,.13); /* Typography */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Geometry */ --radius: 12px; --radius-small: 8px; --radius-pill: 30px; }
Примечание: это базовые дизайн-токены, а не весь CSS презентации. Классы и стили компонентов можно переносить отдельно, адаптируя их под конкретную страницу.
Визуальный стиль Владимира Шатрова строится на ясности, внимании к деталям и уважении к фотографии. Тёмный фон создаёт пространство, типографика организует смысл, а лаймовый акцент помогает увидеть главное.