Телидченко Сергей (типографика, композиция и вот это вот всё)
8.08K subscribers
1.01K photos
71 videos
10 files
155 links
Я обожаю работать с типографикой, нестандартной версткой и создавать интересные дизайн-решения. Тут мои наработки, методы и приёмы в создании выразительного дизайна.

Мои работы на Беханс: behance.net/telidchenko
Личная телега: t.me/telidchenko
Download Telegram
А вот как работают метафоры через простые формы в реальных работах — серия плакатов отца швейцарского дизайна Йозефа Мюллера-Брокманна Musica Viva.

Тут взаимодействием форм (а где-то еще цветом и типографикой) показано музыкальное звучание. Эта метафора легла в основу серии плакатов для цикла концертов в Цюрихе.

Просто. Охуенно 🔥
🔥2610
Вчера задавал вопрос — кто догадался, в чём метафора моего сайта по швейцарке (swiss.telidchenko.art). Версии были — и довольно близкие. Кто-то говорил про конструктивизм, кто-то про Баухаус, ну и самый точный вариант: про использование швейцарского стиля в самом дизайне сайта и как он собирается в систему.

В целом — да, верно, я и правда в дизайне сайта использовал принципы швейцарской школы и хотел показать то, о чём будет интенсив, в действии и как это работает в современном вебе.

Но это первый слой метафоры, он преднамеренно на поверхности. А мне интереснее то, что глубже. Тут есть и второй слой:

Второй слой — это эпоха.

Эпоха, в которой развивался модернизм, и одним из знаковых его представителей стала как раз швейцарская школа дизайна. Знаковым — и по широте применения, и по числу последователей, и по влиянию на индустрию: мы до сих пор используем принципы швейцарки, как в графдизайне, так и в вебе и айдентике.

Эпоха, по которой проходит зритель от начала до конца сайта. Я разбил её на 3 части:

1. Начало — чёрный квадрат.

Это символ этой эпохи. Точка, с которой стартовал весь модернизм. Манифест Малевича об отказе от детализации и декоративности: чтобы выразить смысл, не обязательно изображать объект, как он выглядит в реальном мире — достаточно простой формы (этот принцип лёг в основу и швейцарской школы). Этот символ я и поставил в самом начале, он ненадолго появляется при загрузке сайта и пропадает (вернее, не пропадает, а переходит в плакаты швейцарских дизайнеров, а потом и к содержанию сайта, отсылая к следующей части, следующему этапу).

2. Основная часть — период швейцарской школы.

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

Это и есть та явная часть сайта, которую увидели многие. Тут без скрытых смыслов — это центр и сайта, и всего сюжета. И тема самого интенсива.

3. Концовка — слом.

Под конец чёткие правила, заданные выше, начинают нарушаться: где-то сбивается сетка (и это специально подчёркнуто линиями), где-то усиливается пластика, и форма оживает. Где-то текст растягивается непривычно сильно.

Это всё атрибуты постмодерна — периода, который пришёл за расцветом модернизма как реакция на швейцарскую строгость. Его амбассадором был Вайнгарт со своими экспериментами над типографикой.

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

Я закончил свой сайт этим периодом не потому, что модернизм на нём закончился — он жив, причём больше полувека спустя.

А потому, что хотел показать главное:

Ровными линиями и идеальными сетками всё не заканчивается. Правила можно нарушать, оставаясь внутри одной системы и одной идеи. Вайнгарт это и доказал: взял базу и сломал её, не выходя за её пределы.

Швейцарский стиль — не клетка. Это фундамент. И только уверенно встав на него, можно осознанно нарушать правила, а не просто разбрасывать элементы по макету.
1🔥268👍5🤯1😱1
Forwarded from spros
спрос Сергея Телидченко
Бангкок, Таиланд

• веб-дизайнер
• графический дизайнер

портфолио
dprofile
behance

медиа
↳ телеграм-канал Телидченко Сергей
↳ профиль в inst

spros _44_
25🔥15😎9
Который раз кайфую от навигационной разметки в метро Бангкока — организация людей в пространстве простыми формами 🤪 ну и в целом изящное ux-решение по избавлению от давки и толп в метрополитене (причем без участия человека).
33😎3🔥1
Когда я был маленький, меня повергло в ахуй 3 вещи: что у Пушкина и Тупака, вероятно, были общие родственники, что арбуз это ягода (а вот клубника — нет), и что сетка строится по задаче и материалу, а не просто по факту её наличия 😮😆

Первые два как-нибудь переживём, и вот с третьим давай разбираться.

Проблемы в работе с сетками возникают от того, что обучение этому навыку сводится вот к такому примитиву: вот тебе сеточка (если это сайт — обязательно 12-колоночная), с ней будет заебись, без неё всё развалится (это если сократить длинную басню про типичные лекции о модульных сетках). Ставишь своё всё по сеточке — и дизайн в принципе готов (а если не получается — глянь в референсы)))).

Дизайн, правда, получается шаблонный и слабый.

Прикол в том, что при таком подходе ты лишаешь себя возможности думать и решать конкретную поставленную задачу. А макет теряет индивидуальность и превращается в еще один стандартный лендинг из прямоугольничков с текстом внутри.

Как тогда быть с этой сеткой?

Сетка строится от материала и задачи. Не контент впихивается в сетку, а сетка получается из контента (ну и понимания, для чего делается проект и как он будет использоваться). Это как со стройкой дома: сначала план, схема каркаса, а уже потом стены, интерьер и всё остальное. Представь, если бы дома все строили по одному чертежу... скорее всего, мы все бы жили в одинаковых блочных хрущёвках...

Кстати, модульная сетка как прикладной инструмент пришла как раз из швейцарской школы — швейцарцам был важен порядок, тиражируемость, единство и экономия времени на производстве.

И сетки помогали решать все эти моменты.

На интенсиве разберём особенности, нюансы и принципы работы с сеткой в цифровом дизайне — с чего всё началось и к чему привело (это я сделал частью темы про пространство):

→ почему модульная сетка неудобна для некоторых типов сайтов
→ как строить сетку от задачи и материала и получать индивидуальные решения под проект (сайт, презентация, лукбук и т.д.)
→ как я сам работаю с сеткой при проектировании
→ как сетка адаптируется под разные форматы (мобила, планшет и т.д.)
→ как сетка помогает в работе, а как может мешать

Начинаем через неделю. Вся подробная инфа — на сайте swiss.telidchenko.art 😎

p.s. Сегодня утром цена места в общей группе стала 6000 рублей, и продержится такой до конца пятницы. Потом будет 7000, имей в виду 😉
🔥1911
Media is too big
VIEW IN TELEGRAM
Зацени, как выглядит швейцарский стиль в коммерческом проекте — сайт школы танцев на пилоне «Сорока»:

https://sorokadance.ru

Этот проект мы делали вместе с Майей (я побыл в роли арт-дира на клиентском проекте, и мне понравилось)).

Смотри, как тут использованы принципы швейцарского дизайна.

1. Графика. Начну с неё — на ней строится основная идея сайта. Это фото девушек из школы, в случайных позициях (хотел написать «позах», но это уже про другое)), которые меняются при скролле.

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

Это и есть танец, о котором сайт.

И тут ещё такой момент: позиции живые, естественные, непредсказуемые. Как и девушки в танце: у каждого движения свой характер, своя эмоция.

Поэтому такое решение ещё и вариантивно: таких форм может быть сколь угодно много (но между ними будет единство и узнаваемость). Это готовый элемент айдентики — решение можно использовать на плакате, в мерче, оформлении зала и т.д. Где допускается крупный размер формы (которую на контрасте можно дополнить текстом — контракты, призывы, заголовок и тд).

2. Пространство. Часть под текст (его ширина не случайна: эта зона встаёт в мобилу, и текст такого размера и ширины удобно читать). Другая часть — под графику, которая идёт сквозь весь сайт. Пространство, в котором происходит действие, чётко обозначено и отделено элементами. А центр держит та самая силовая линия — поэтому формы выглядят устойчивыми внутри, даже несмотря на кажущийся перевес и постоянную подвижность.

3. Типографика. Один размер для заголовка, один — для основного текста. Иерархия выстроена интервалами и смещениями, для подзаголовков добавлен верхниц регистр, без изменения кегля.

И тут метафора продолжается: у текста чёткая конструкция из вертикальных силовых линий, на которой он держится, но форма слегка подвижна и игрива. Та же логика, что и с фигурами на пилоне — чёткая конструкция, на ней живое движение.

4. Цвет. Используется чисто функционально — выделить главное, активный элемент, ховер. Цвет тут как функция, а не как красивость.

Вот и швейцарка в действии 🇨🇭

И конечно, заказчица не просила «швейцарский стиль», и мы не думали категориями «нужен швейцарский дизайн». Была задача — донести информацию так, чтобы зритель в итоге сделал целевое действие (звонок, заполнение формы). Для этого нужно выделить главное, сделать текст удобным для чтения, расставить акценты, выстроить порядок повествования. К этому добавилась идея с девушками — и дизайн собрался.

Ну то есть ты не «делаешь швейцарку», а решаешь задачу. А стиль получается следствием.

Это всё буду разбирать на интенсиве — детально и по частям (по целому дню отвожу на пространство, графику, типографику и цвет, а потом сведу всё в единую систему).

Начинаем 22 июня, программа и запись тут: swiss.telidchenko.art 😎
24🔥21🥰4🤩2