Октябрь (запуск медиа)Сайт:4 разбора:
— «Как Frostpunk 2 заставляет интерфейс выглядеть больным вместе с городом».
— «Навбар Whitney как часть визуального языка сайта».
— «Крупноформатная имиджевая фотоподача Broskiy Tattoo как путь к премиальности».
— «Почему Figma так удобна: сила маленьких решений».Telegram-канал:
— 1 приветственный пост и 1 анонс запуска сайта.
— 4 визуальные заметки по материалам сайта.
— 3 самостоятельные визуальные заметки: фотографическая серия «Отделения» Кати Муккхи, фотоподача Filippo Sorcinelli, главная страница Typographic Posters.
— 1 сохраняемая шпаргалка по визуальной иерархии.
— 2 референса вне профессии: фигуры Хладни и нефтяные разводы.

Ноябрь (визуальные системы и композиция)Сайт:— 4 разбора объектов дизайна с акцентом на типографику, композицию, визуальную идентичность и работу с изображениями.Telegram-канал:— 4 визуальные заметки по материалам сайта.
— 2 самостоятельные визуальные заметки.
— 2 сохраняемых материала: чек-лист анализа референса и шпаргалка по композиции.
— 2 референса вне профессии.
— 2 поста рубрики «Контрасты»: сравнение полярных визуальных решений и их влияния на восприятие.

Декабрь (дизайн и впечатления)Сайт:— 3 разбора.
— Новогодний специальный выпуск.Telegram-канал:— 3 визуальные заметки по материалам сайта.
— 1 самостоятельная визуальная заметка.
— 2 сохраняемых материала.
— 1 референс вне профессии.
— 1 пост рубрики «Контрасты».
— Анонс специального выпуска.

Январь (типографика и редакционный дизайн)Сайт— 4 разбора книг, журналов, плакатов и типографических решений. Фокус — визуальная иерархия, ритм, работа с текстом и композицией.Telegram-канал:— 4 визуальные заметки по материалам сайта.
— 2 самостоятельные заметки о типографике и композиции.
— 2 шпаргалки для работы с текстом и визуальной иерархией.
— 2 референса вне профессии.
— 1 пост рубрики «Контрасты».

Февраль (интерфейс и взаимодействие)Сайт:4 разбора сайтов и цифровых продуктов с акцентом на навигацию, микровзаимодействия, обратную связь и небольшие решения, влияющие на удобство.Telegram-канал
— 4 визуальные заметки по материалам сайта.
— 2 самостоятельных разбора интерфейсных решений.
— 2 сохраняемых материала: чек-лист удобного интерфейса и шпаргалка по навигации.
— 2 референса вне профессии.
— 2 поста рубрики «Контрасты».

Март (дизайн за пределами экрана)Сайт:4 разбора упаковки, выставочных систем, архитектуры, предметного дизайна или других объектов визуальной культуры. Главный фокус на поиске принципов, которые можно перенести в цифровой и графический дизайн.Telegram-канал:
— 4 визуальные заметки по материалам сайта.
— 2 самостоятельные заметки о неожиданных источниках вдохновения.
— 2 сохраняемых материала о поиске и применении референсов.
— 2 референса вне профессии.
— 2 поста рубрики «Контрасты».

Все рассматриваемые для публикации кейсы подробно мной изучены, поэтому несмотря на использование ИИ контент обладает смыслом и достоверностью.Часть текстов сгенерирована в бесплатной версии ChatGPT. Их исходное качество сильно отличалось. Некоторые тексты изменялись минимально, другие сильно переписывались мною.Кроме ускорения процесса производства медиаконтента, использовании ИИ помогло сохранить нужный тон голоса медиа, так как сам я пишу сложно и витиевато.

Пример разбора на сайте:

Примеры постов в telegram-канале рубрики Визуальная заметка

Пост 1Навбар как часть визуального языка сайта на примере WhitneyНавигация — тот элемент сайта, который легко сделать слишком нейтральным. Но в Whitney она работает на узнаваемость бренда, сохранняя функциональность и удобство.В открытом состоянии навигация поддерживает общую айдентику Whitney. При закрытии — ключевой приём, чаще всего применяемый на физических носителях. Когда анимация проиграла, навигация собирается в компактную шапку. Меню перестаёт занимать внимание, а на первый план возвращается функция.Это хороший пример того, как даже короткое взаимодействие может поддержать айдентику сайта. Что особенно важно для культурных институций и творческих брендов: система навигации должна оставаться понятной, но при этом не выпадать из общего визуального языка.В следующий раз продумывая навбар, рассмотрите микроанимацию или микровзаимодействую. Главное чётко понимать для чего вы это делаете. Whitney демонстрирует ключевой приём своей айдентики прямо на входе, понимая, как сайт выглядит до, во время и после взаимодействия.

Пост 2Как фотографии превращают обычную тату-студию в концептуальный брендНа сайте Broskiy Tattoo фотографии занимают почти всё внимание. Крупные планы, выразительные формы, чёрный цвет и приглушённая цветовая гамма создают ощущение, что ты смотришь не обычное портфолио, а подборку авторских работ.Важно, что фотографии воспринимаются как единая серия. Их объединяет не только цвет, но и характер самих татуировок. Взгляд постепенно привыкает к этой эстетике, и становится понятнее, что студия предлагает не просто услугу, а определённое художественное направление.Здесь фотоподача формирует позиционирование. Когда изображения достаточно выразительны и согласованы между собой, сайту не приходится постоянно объяснять, в чём особенность бренда. Её можно почувствовать через сам визуальный ряд.Хороший пример того, как сильная фотоподача может показать то, что не способна и тысяча символов. Если в начале у пользователя может возникнуть сомнение в истинности лозунга «Первая студия концептуальной чёрной татуировки в России», то в конце пути сомнения в точности этой формулировки почти нет.

Пост 3Почему Figma так удобна: сила маленьких решенийОбратите внимание на голубую звёздочку с нейроинструментами, которая появляется рядом с выбранным объектом. Она открывает доступ к дополнительным действиям прямо в контексте работы. Не нужно искать новую функцию по разным меню: инструмент появляется там, где он может пригодиться.Но интереснее другое. Контекстная кнопка должна быть доступной, когда нужна, и исчезать, когда мешает. В Figma она скрывается, если увести курсор в сторону. При этом, когда курсор движется к самой звёздочке, область её появления учитывает траекторию движения. Кнопка пропадает не после выхода из прямоугольной области. Это область имеет искривлённую фигуру в основе, учитывающую естественное движение к кнопке.Именно проработка таких мелочей делают интерфейс естественным. Он учитывает действия человека в процессе и не заставляет его бороться с собственным поведением.Это хороший пример того, почему стоит проектировать не только экраны, но и переходы между состояниями. Иногда качество интерфейса определяется не тем, что появляется на экране, а тем, насколько естественно с этим взаимодействовать.

Пост 4Как сделать серию фотографий цельнойВ серии «Отделения» Кати Муккхи сочетается предсказуемость и неожиданность. Большинство фотографий построено похожим образом: фасад показан почти прямо с примерно одинакового расстояния. Ты быстро привыкаешь к этому способу съёмки и уже представляешь, как будет выглядеть следующий кадр.Однако предсказать локацию невозможно. Почтовое отделение может оказаться в деревянном доме, современном здании или внутри жилой застройки. Одна и та же функция каждый раз встраивается в разный контекст. Из чего рождается интерес. Хочется увидеть, каким окажется следующий вариант.Схожая композиция становится рамкой для разнообразия. Она помогает зрителю сравнивать локации отделений Почты России. Разный метод съёмки мог бы помешать именно этой цели.

Пост 5От вау-эффекта к выбору: главная Typographic PostersОткройте главную Typographic Posters. Первое, что замечаешь, — множество плакатов. Они собираются в большую визуальную коллекцию и сразу создают ощущение: здесь действительно есть что посмотреть. Ещё до того, как ты начал изучать отдельные работы, уже понятно, зачем ты сюда пришёл. Вместо обещания интересного контента сайт демонстрирует его прямо на входе.Дать человеку почувствовать ценность продукта ещё до того, как он начал им пользоваться, сильный приём для продукта

Пост 6Как выделить главное: будильник Braun DN40У будильника Braun DN40 корпус почти перестаёт конкурировать с информацией. В белом варианте изделия тёмное окно дисплея выделяется на светлой оболочке, внутри чёрного дисплея светятся зелёные цифры. Получается два последовательных контраста. Сначала взгляд находит экран на корпусе, затем считывает время внутри экрана.Цвет и геометрия работают здесь вместе. Тёмная панель отделена от светлой оболочки, поэтому воспринимается как самостоятельная область. А яркие цифры выделяются уже на тёмном фоне.Это хороший пример визуальной иерархии в предметном дизайне. Если у объекта есть одна главная задача, можно выстроить несколько уровней контраста, которые последовательно направляют внимание к нужной информации. Тут также работает принцип Дитера Рамса «хороший дизайн — это как можно меньше дизайна». По сути, дизайнер не сделал ничего, чтобы акцентировать время, но дизайн изделия работает так, что акцент сам падает на цифры.

Примеры постов в telegram-канале рубрики Референс вне профессии

Пост 7Референс вне профессии: фигуры ХладниКак визуально представить звук, если у него нет привычной формы? Один из ответов — фигуры Хладни. Когда металлическая пластина вибрирует, песчинки собираются вдоль линий, где движение почти отсутствует. При изменении частоты меняется и рисунок. Так невидимые колебания оставляют видимый след.В этом кейсе фигуры Хладни становятся вдохновением для визуальной метафоры. Такие решения интересны тем, что связывают два разных уровня: абстрактную идею и конкретную форму. Зритель видит графический образ, но за ним стоит явление со своими правилами.В этом заключается разница между референсом и готовым решением. Референс можно скопировать внешне, но гораздо интереснее разобраться, за счёт чего он работает, и перенести этот принцип в другой контекст. Для этого полезно изучать не только внешний вид объекта, но и что стоит за ним.При поиске визуальной метафору полезная практика — посмотреть объекты и явления природы, старые произведение промысла или искусства. Иногда незаезжанная и интересная идея может прийти из совершенно далёкой от дизайна среды.

Пример поста в telegram-канале рубрики Шпаргалка

Пост 8Референс вне профессии: нефтяные разводыКарта-фрагмент лонгрида о ситуционизме и дрейфе отсылает к нефти.Нефтяные пятна на лужах про иррациональную красоту, болезненную, ядовитую, но завораживающую. Особенно по сравнению с серым асфальтом, лужами и будничной средой города она выглядит ярко и вызывающи.Кроме визуального потенциала, нефтяные разводы обладают важными физическими качествами. Нефтепродукты медленно и хаотично растекаются, заполняя доступное пространство, подобно тому, как капитализм проникает во все области города, отравляя некогда чистый ландшафт.Также, нефть легковоспламеняема. Город существует в вечном социально-экономическом напряжении из-за неравенства и расслоения общества при капитализме. В любой момент улицу могут воспламенится протестом.Наконец, нефть часто выступает символом капитализма, ключевого сырья. В этом случае можно трактовать как «кровь спектакля» — важнейшей движущей силой современной капиталистической экономики, без которого невозможно представить городскую жизньВ этом примере интересно то, как привычное и понятное явление может глубоко и интересно раскрыться при длительной работой с ним. Обращение к подобным вещам может помочь придумать идею или визуальный образ, способный чисто на зрительном уровне передать определённые смыслы.

Пост 9Шпаргалка по визуальной иерархииВизуальная иерархия — это порядок, в котором человек замечает элементы на экране. Она помогает задать главное и второстепенное, куда смотреть сейчас или дальше.Пять способов управлять вниманием:1. Размер. Крупный элемент обычно заметнее мелкого. Подходит, когда нужно выделить заголовок или главный объект.
2. Контраст. Элемент, который сильнее отличается от окружения, быстрее привлекает внимание.
3. Положение. Расположение элементов влияет на порядок их восприятия. То, что стоит в начале страницы или обособлено от остальных элементов, скорее всего получит больше внимания.
4. Свободное пространство. Если вокруг элемента меньше визуального шума, он становится заметнее. Иногда вместо акцентирования целевого объекта можно сделать окружение менее акцентным или более воздушным
5. Группировка. Близко расположенные элементы воспринимаются как связанные. Так можно показать, какой текст относится к изображению, а какие подписи составляют одну группу.На каждом этапе работы дизайнеру полезно понимать визуальную иерархию. Может ли ли зритель мгновенно извлечь основную функцию или послание дизайна? Легко ли ему ориентироваться по дизайну? Может ли он догадаться, что должно быть дальше или куда идти дальше?