Телидченко Сергей (типографика, композиция и вот это вот всё)

В субботу сгонял тут в Бангкоке на мероприятие Site 2026 😎 Чё касается прям сайтов, то были несколько стендов японских CMS (на базе ИИ, кстати) и выступления на сцене (я тайский не оч понимаю, а многие там вещели на родном, но судя по слайдам, там чё-то про дизайн, технологии, робототехнику)). Интересная часть — стенды стартапов Thailand Startup League: это такая программа, по которой правительство Таиланда выделяет бабки на продвижение студенческих стартапов. Ну типа если есть классная идея, она показала жизнеспособность — держи монету и газу развивай. Стендов таких было ну порядка 50, прям нормально. А крутость в том, что будучи студентом, ты можешь замутить реальный проект и получить деньги на его создание и развитие. Если, конечно, он того стоит. Пару стендов — с роботами и тем, как можно с ними взаимодействовать. Будущее уже здесь, хуле 🤪 В целом прикольно, с кем-то даже получилось пообщаться 😆

Заканчиваю лекцию про отношения, какими они бывают и что получается в итоге. И меня аж подколбашивает — получилось собрать в одну структуру разрозненные знания, которые использовал в разных контекстах 🤪🤪🤪🤪 Основная мысль, которая проходит через всю лекцию: выразительность достигается не самими формами (они могут быть простые), а отношениями между ними. А к посту приложил некоторые примеры из книги маэстро точек и линий — Армина Хофманна.

Проектирование и дизайн фотоальбома и фотогалереи (общая и подробная страницы) для сайта фотографа (Nadav Kander) с большим количеством разделов и фото. Лакончично, динамично, удобно. И легко тиражируется 🔥🔥🔥 Работа Оли Каменской @ollifrance с интенсива по ритму (задача была пересобрать имеющийся сайт, а именно само отображение фотогалереи и подробных страниц: получить динамичную форму (при это не нарушая геометрической конструкции), простоту донесения информации и удобство тиражирования страниц. Исходный сайт (которому принадлежат все права и авторство на контент, используемый в дизайне) www.nadavkander.com p.s. а на интенсив по швейцарке залетело 119 человек 🔥 Ну это я так, к сведенью. Уже вовсю фигачим 😌🤘

Запись сегодняшнего эфира готова — разобрал дизайн и показал, как можно всё это исправить и усилить. https://youtube.com/live/DSNkelsvY3k Такого формата разборы я делаю обычно у себя на обучениях (не на 2 часа конечно, но там и работаем обычно и над процессом, поэтому часть неточностей отсекается на ранних этапах).

Зацени, как выглядит швейцарский стиль в коммерческом проекте — сайт школы танцев на пилоне «Сорока»: https://sorokadance.ru Этот проект мы делали вместе с Майей (я побыл в роли арт-дира на клиентском проекте, и мне понравилось)). Смотри, как тут использованы принципы швейцарского дизайна. 1. Графика. Начну с неё — на ней строится основная идея сайта. Это фото девушек из школы, в случайных позициях (хотел написать «позах», но это уже про другое)), которые меняются при скролле. По центру этой зоны проходит силовая линия — она символизирует пилон, вокруг которого эти формы вращаются. Физически линии нет, но в этом и прикол: без неё формы выглядят живыми, чуть неуравновешенными, подвижными. Но её «создают» элементы в шапке, абзацы отзывов, мелкий элемент внизу и сами фигуры. По скроллу позиции меняются, а линия остаётся на месте. И получается, что формы движутся вокруг одной оси. Это и есть танец, о котором сайт. И тут ещё такой момент: позиции живые, естественные, непредсказуемые. Как и девушки в танце: у каждого движения свой характер, своя эмоция. Поэтому такое решение ещё и вариантивно: таких форм может быть сколь угодно много (но между ними будет единство и узнаваемость). Это готовый элемент айдентики — решение можно использовать на плакате, в мерче, оформлении зала и т.д. Где допускается крупный размер формы (которую на контрасте можно дополнить текстом — контракты, призывы, заголовок и тд). 2. Пространство. Часть под текст (его ширина не случайна: эта зона встаёт в мобилу, и текст такого размера и ширины удобно читать). Другая часть — под графику, которая идёт сквозь весь сайт. Пространство, в котором происходит действие, чётко обозначено и отделено элементами. А центр держит та самая силовая линия — поэтому формы выглядят устойчивыми внутри, даже несмотря на кажущийся перевес и постоянную подвижность. 3. Типографика. Один размер для заголовка, один — для основного текста. Иерархия выстроена интервалами и смещениями, для подзаголовков добавлен верхниц регистр, без изменения кегля. И тут метафора продолжается: у текста чёткая конструкция из вертикальных силовых линий, на которой он держится, но форма слегка подвижна и игрива. Та же логика, что и с фигурами на пилоне — чёткая конструкция, на ней живое движение. 4. Цвет. Используется чисто функционально — выделить главное, активный элемент, ховер. Цвет тут как функция, а не как красивость. Вот и швейцарка в действии 🇨🇭 И конечно, заказчица не просила «швейцарский стиль», и мы не думали категориями «нужен швейцарский дизайн». Была задача — донести информацию так, чтобы зритель в итоге сделал целевое действие (звонок, заполнение формы). Для этого нужно выделить главное, сделать текст удобным для чтения, расставить акценты, выстроить порядок повествования. К этому добавилась идея с девушками — и дизайн собрался. Ну то есть ты не «делаешь швейцарку», а решаешь задачу. А стиль получается следствием. Это всё буду разбирать на интенсиве — детально и по частям (по целому дню отвожу на пространство, графику, типографику и цвет, а потом сведу всё в единую систему). Начинаем 22 июня, программа и запись тут: swiss.telidchenko.art 😎

Когда я был маленький, меня повергло в ахуй 3 вещи: что у Пушкина и Тупака, вероятно, были общие родственники, что арбуз это ягода (а вот клубника — нет), и что сетка строится по задаче и материалу, а не просто по факту её наличия 😮😆 Первые два как-нибудь переживём, и вот с третьим давай разбираться. Проблемы в работе с сетками возникают от того, что обучение этому навыку сводится вот к такому примитиву: вот тебе сеточка (если это сайт — обязательно 12-колоночная), с ней будет заебись, без неё всё развалится (это если сократить длинную басню про типичные лекции о модульных сетках). Ставишь своё всё по сеточке — и дизайн в принципе готов (а если не получается — глянь в референсы)))). Дизайн, правда, получается шаблонный и слабый. Прикол в том, что при таком подходе ты лишаешь себя возможности думать и решать конкретную поставленную задачу. А макет теряет индивидуальность и превращается в еще один стандартный лендинг из прямоугольничков с текстом внутри. Как тогда быть с этой сеткой? Сетка строится от материала и задачи. Не контент впихивается в сетку, а сетка получается из контента (ну и понимания, для чего делается проект и как он будет использоваться). Это как со стройкой дома: сначала план, схема каркаса, а уже потом стены, интерьер и всё остальное. Представь, если бы дома все строили по одному чертежу... скорее всего, мы все бы жили в одинаковых блочных хрущёвках... Кстати, модульная сетка как прикладной инструмент пришла как раз из швейцарской школы — швейцарцам был важен порядок, тиражируемость, единство и экономия времени на производстве. И сетки помогали решать все эти моменты. На интенсиве разберём особенности, нюансы и принципы работы с сеткой в цифровом дизайне — с чего всё началось и к чему привело (это я сделал частью темы про пространство): → почему модульная сетка неудобна для некоторых типов сайтов → как строить сетку от задачи и материала и получать индивидуальные решения под проект (сайт, презентация, лукбук и т.д.) → как я сам работаю с сеткой при проектировании → как сетка адаптируется под разные форматы (мобила, планшет и т.д.) → как сетка помогает в работе, а как может мешать Начинаем через неделю. Вся подробная инфа — на сайте swiss.telidchenko.art 😎 p.s. Сегодня утром цена места в общей группе стала 6000 рублей, и продержится такой до конца пятницы. Потом будет 7000, имей в виду 😉