А вот как работают метафоры через простые формы в реальных работах — серия плакатов отца швейцарского дизайна Йозефа Мюллера-Брокманна Musica Viva.
Тут взаимодействием форм (а где-то еще цветом и типографикой) показано музыкальное звучание. Эта метафора легла в основу серии плакатов для цикла концертов в Цюрихе.
Просто. Охуенно 🔥
Тут взаимодействием форм (а где-то еще цветом и типографикой) показано музыкальное звучание. Эта метафора легла в основу серии плакатов для цикла концертов в Цюрихе.
Просто. Охуенно 🔥
🔥26❤10
Вчера задавал вопрос — кто догадался, в чём метафора моего сайта по швейцарке (swiss.telidchenko.art). Версии были — и довольно близкие. Кто-то говорил про конструктивизм, кто-то про Баухаус, ну и самый точный вариант: про использование швейцарского стиля в самом дизайне сайта и как он собирается в систему.
В целом — да, верно, я и правда в дизайне сайта использовал принципы швейцарской школы и хотел показать то, о чём будет интенсив, в действии и как это работает в современном вебе.
Но это первый слой метафоры, он преднамеренно на поверхности. А мне интереснее то, что глубже. Тут есть и второй слой:
Второй слой — это эпоха.
Эпоха, в которой развивался модернизм, и одним из знаковых его представителей стала как раз швейцарская школа дизайна. Знаковым — и по широте применения, и по числу последователей, и по влиянию на индустрию: мы до сих пор используем принципы швейцарки, как в графдизайне, так и в вебе и айдентике.
Эпоха, по которой проходит зритель от начала до конца сайта. Я разбил её на 3 части:
1. Начало — чёрный квадрат.
Это символ этой эпохи. Точка, с которой стартовал весь модернизм. Манифест Малевича об отказе от детализации и декоративности: чтобы выразить смысл, не обязательно изображать объект, как он выглядит в реальном мире — достаточно простой формы (этот принцип лёг в основу и швейцарской школы). Этот символ я и поставил в самом начале, он ненадолго появляется при загрузке сайта и пропадает (вернее, не пропадает, а переходит в плакаты швейцарских дизайнеров, а потом и к содержанию сайта, отсылая к следующей части, следующему этапу).
2. Основная часть — период швейцарской школы.
Основную часть сайта я сделал по принципам швейцарского стиля: это период, когда модернистские идеи довели до системы — подчёркнутая сетка, нейтральный шрифт, минимум стилей, функционально использованный цвет. Принципы, на которых базировался швейцарский дизайн.
Это и есть та явная часть сайта, которую увидели многие. Тут без скрытых смыслов — это центр и сайта, и всего сюжета. И тема самого интенсива.
3. Концовка — слом.
Под конец чёткие правила, заданные выше, начинают нарушаться: где-то сбивается сетка (и это специально подчёркнуто линиями), где-то усиливается пластика, и форма оживает. Где-то текст растягивается непривычно сильно.
Это всё атрибуты постмодерна — периода, который пришёл за расцветом модернизма как реакция на швейцарскую строгость. Его амбассадором был Вайнгарт со своими экспериментами над типографикой.
Ему было тесно в «ровной» швейцарке, и он искал новое: ломал, сбивал, растягивал, разрывал нейтральный швейцарский строй. Но при этом всё подчинялось принципам — у всего был каркас, и композиция держалась, несмотря на динамику, экспрессию, а где-то даже странность. Вайнгарт сам был выходцем из швейцарской школы, где и впитал эту системность и дисциплину.
Я закончил свой сайт этим периодом не потому, что модернизм на нём закончился — он жив, причём больше полувека спустя.
А потому, что хотел показать главное:
Ровными линиями и идеальными сетками всё не заканчивается. Правила можно нарушать, оставаясь внутри одной системы и одной идеи. Вайнгарт это и доказал: взял базу и сломал её, не выходя за её пределы.
Швейцарский стиль — не клетка. Это фундамент. И только уверенно встав на него, можно осознанно нарушать правила, а не просто разбрасывать элементы по макету.
В целом — да, верно, я и правда в дизайне сайта использовал принципы швейцарской школы и хотел показать то, о чём будет интенсив, в действии и как это работает в современном вебе.
Но это первый слой метафоры, он преднамеренно на поверхности. А мне интереснее то, что глубже. Тут есть и второй слой:
Второй слой — это эпоха.
Эпоха, в которой развивался модернизм, и одним из знаковых его представителей стала как раз швейцарская школа дизайна. Знаковым — и по широте применения, и по числу последователей, и по влиянию на индустрию: мы до сих пор используем принципы швейцарки, как в графдизайне, так и в вебе и айдентике.
Эпоха, по которой проходит зритель от начала до конца сайта. Я разбил её на 3 части:
1. Начало — чёрный квадрат.
Это символ этой эпохи. Точка, с которой стартовал весь модернизм. Манифест Малевича об отказе от детализации и декоративности: чтобы выразить смысл, не обязательно изображать объект, как он выглядит в реальном мире — достаточно простой формы (этот принцип лёг в основу и швейцарской школы). Этот символ я и поставил в самом начале, он ненадолго появляется при загрузке сайта и пропадает (вернее, не пропадает, а переходит в плакаты швейцарских дизайнеров, а потом и к содержанию сайта, отсылая к следующей части, следующему этапу).
2. Основная часть — период швейцарской школы.
Основную часть сайта я сделал по принципам швейцарского стиля: это период, когда модернистские идеи довели до системы — подчёркнутая сетка, нейтральный шрифт, минимум стилей, функционально использованный цвет. Принципы, на которых базировался швейцарский дизайн.
Это и есть та явная часть сайта, которую увидели многие. Тут без скрытых смыслов — это центр и сайта, и всего сюжета. И тема самого интенсива.
3. Концовка — слом.
Под конец чёткие правила, заданные выше, начинают нарушаться: где-то сбивается сетка (и это специально подчёркнуто линиями), где-то усиливается пластика, и форма оживает. Где-то текст растягивается непривычно сильно.
Это всё атрибуты постмодерна — периода, который пришёл за расцветом модернизма как реакция на швейцарскую строгость. Его амбассадором был Вайнгарт со своими экспериментами над типографикой.
Ему было тесно в «ровной» швейцарке, и он искал новое: ломал, сбивал, растягивал, разрывал нейтральный швейцарский строй. Но при этом всё подчинялось принципам — у всего был каркас, и композиция держалась, несмотря на динамику, экспрессию, а где-то даже странность. Вайнгарт сам был выходцем из швейцарской школы, где и впитал эту системность и дисциплину.
Я закончил свой сайт этим периодом не потому, что модернизм на нём закончился — он жив, причём больше полувека спустя.
А потому, что хотел показать главное:
Ровными линиями и идеальными сетками всё не заканчивается. Правила можно нарушать, оставаясь внутри одной системы и одной идеи. Вайнгарт это и доказал: взял базу и сломал её, не выходя за её пределы.
Швейцарский стиль — не клетка. Это фундамент. И только уверенно встав на него, можно осознанно нарушать правила, а не просто разбрасывать элементы по макету.
1🔥26❤8👍5🤯1😱1
Forwarded from spros
спрос Сергея Телидченко
Бангкок, Таиланд
• веб-дизайнер
• графический дизайнер
портфолио
↳ dprofile
↳ behance
медиа
↳ телеграм-канал Телидченко Сергей
↳ профиль в inst
spros _44_
Бангкок, Таиланд
• веб-дизайнер
• графический дизайнер
портфолио
↳ dprofile
↳ behance
медиа
↳ телеграм-канал Телидченко Сергей
↳ профиль в inst
spros _44_
❤25🔥15😎9
Который раз кайфую от навигационной разметки в метро Бангкока — организация людей в пространстве простыми формами 🤪 ну и в целом изящное ux-решение по избавлению от давки и толп в метрополитене (причем без участия человека).
❤33😎3🔥1
Когда я был маленький, меня повергло в ахуй 3 вещи: что у Пушкина и Тупака, вероятно, были общие родственники, что арбуз это ягода (а вот клубника — нет), и что сетка строится по задаче и материалу, а не просто по факту её наличия 😮😆
Первые два как-нибудь переживём, и вот с третьим давай разбираться.
Проблемы в работе с сетками возникают от того, что обучение этому навыку сводится вот к такому примитиву: вот тебе сеточка (если это сайт — обязательно 12-колоночная), с ней будет заебись, без неё всё развалится (это если сократить длинную басню про типичные лекции о модульных сетках). Ставишь своё всё по сеточке — и дизайн в принципе готов (а если не получается — глянь в референсы)))).
Дизайн, правда, получается шаблонный и слабый.
Прикол в том, что при таком подходе ты лишаешь себя возможности думать и решать конкретную поставленную задачу. А макет теряет индивидуальность и превращается в еще один стандартный лендинг из прямоугольничков с текстом внутри.
Как тогда быть с этой сеткой?
Сетка строится от материала и задачи. Не контент впихивается в сетку, а сетка получается из контента (ну и понимания, для чего делается проект и как он будет использоваться). Это как со стройкой дома: сначала план, схема каркаса, а уже потом стены, интерьер и всё остальное. Представь, если бы дома все строили по одному чертежу... скорее всего, мы все бы жили в одинаковых блочных хрущёвках...
Кстати, модульная сетка как прикладной инструмент пришла как раз из швейцарской школы — швейцарцам был важен порядок, тиражируемость, единство и экономия времени на производстве.
И сетки помогали решать все эти моменты.
На интенсиве разберём особенности, нюансы и принципы работы с сеткой в цифровом дизайне — с чего всё началось и к чему привело (это я сделал частью темы про пространство):
→ почему модульная сетка неудобна для некоторых типов сайтов
→ как строить сетку от задачи и материала и получать индивидуальные решения под проект (сайт, презентация, лукбук и т.д.)
→ как я сам работаю с сеткой при проектировании
→ как сетка адаптируется под разные форматы (мобила, планшет и т.д.)
→ как сетка помогает в работе, а как может мешать
Начинаем через неделю. Вся подробная инфа — на сайте swiss.telidchenko.art 😎
p.s. Сегодня утром цена места в общей группе стала 6000 рублей, и продержится такой до конца пятницы. Потом будет 7000, имей в виду 😉
Первые два как-нибудь переживём, и вот с третьим давай разбираться.
Проблемы в работе с сетками возникают от того, что обучение этому навыку сводится вот к такому примитиву: вот тебе сеточка (если это сайт — обязательно 12-колоночная), с ней будет заебись, без неё всё развалится (это если сократить длинную басню про типичные лекции о модульных сетках). Ставишь своё всё по сеточке — и дизайн в принципе готов (а если не получается — глянь в референсы)))).
Дизайн, правда, получается шаблонный и слабый.
Прикол в том, что при таком подходе ты лишаешь себя возможности думать и решать конкретную поставленную задачу. А макет теряет индивидуальность и превращается в еще один стандартный лендинг из прямоугольничков с текстом внутри.
Как тогда быть с этой сеткой?
Сетка строится от материала и задачи. Не контент впихивается в сетку, а сетка получается из контента (ну и понимания, для чего делается проект и как он будет использоваться). Это как со стройкой дома: сначала план, схема каркаса, а уже потом стены, интерьер и всё остальное. Представь, если бы дома все строили по одному чертежу... скорее всего, мы все бы жили в одинаковых блочных хрущёвках...
Кстати, модульная сетка как прикладной инструмент пришла как раз из швейцарской школы — швейцарцам был важен порядок, тиражируемость, единство и экономия времени на производстве.
И сетки помогали решать все эти моменты.
На интенсиве разберём особенности, нюансы и принципы работы с сеткой в цифровом дизайне — с чего всё началось и к чему привело (это я сделал частью темы про пространство):
→ почему модульная сетка неудобна для некоторых типов сайтов
→ как строить сетку от задачи и материала и получать индивидуальные решения под проект (сайт, презентация, лукбук и т.д.)
→ как я сам работаю с сеткой при проектировании
→ как сетка адаптируется под разные форматы (мобила, планшет и т.д.)
→ как сетка помогает в работе, а как может мешать
Начинаем через неделю. Вся подробная инфа — на сайте swiss.telidchenko.art 😎
p.s. Сегодня утром цена места в общей группе стала 6000 рублей, и продержится такой до конца пятницы. Потом будет 7000, имей в виду 😉
🔥19❤11
Media is too big
VIEW IN TELEGRAM
Зацени, как выглядит швейцарский стиль в коммерческом проекте — сайт школы танцев на пилоне «Сорока»:
https://sorokadance.ru
Этот проект мы делали вместе с Майей (я побыл в роли арт-дира на клиентском проекте, и мне понравилось)).
Смотри, как тут использованы принципы швейцарского дизайна.
1. Графика. Начну с неё — на ней строится основная идея сайта. Это фото девушек из школы, в случайных позициях (хотел написать «позах», но это уже про другое)), которые меняются при скролле.
По центру этой зоны проходит силовая линия — она символизирует пилон, вокруг которого эти формы вращаются. Физически линии нет, но в этом и прикол: без неё формы выглядят живыми, чуть неуравновешенными, подвижными. Но её «создают» элементы в шапке, абзацы отзывов, мелкий элемент внизу и сами фигуры. По скроллу позиции меняются, а линия остаётся на месте. И получается, что формы движутся вокруг одной оси.
Это и есть танец, о котором сайт.
И тут ещё такой момент: позиции живые, естественные, непредсказуемые. Как и девушки в танце: у каждого движения свой характер, своя эмоция.
Поэтому такое решение ещё и вариантивно: таких форм может быть сколь угодно много (но между ними будет единство и узнаваемость). Это готовый элемент айдентики — решение можно использовать на плакате, в мерче, оформлении зала и т.д. Где допускается крупный размер формы (которую на контрасте можно дополнить текстом — контракты, призывы, заголовок и тд).
2. Пространство. Часть под текст (его ширина не случайна: эта зона встаёт в мобилу, и текст такого размера и ширины удобно читать). Другая часть — под графику, которая идёт сквозь весь сайт. Пространство, в котором происходит действие, чётко обозначено и отделено элементами. А центр держит та самая силовая линия — поэтому формы выглядят устойчивыми внутри, даже несмотря на кажущийся перевес и постоянную подвижность.
3. Типографика. Один размер для заголовка, один — для основного текста. Иерархия выстроена интервалами и смещениями, для подзаголовков добавлен верхниц регистр, без изменения кегля.
И тут метафора продолжается: у текста чёткая конструкция из вертикальных силовых линий, на которой он держится, но форма слегка подвижна и игрива. Та же логика, что и с фигурами на пилоне — чёткая конструкция, на ней живое движение.
4. Цвет. Используется чисто функционально — выделить главное, активный элемент, ховер. Цвет тут как функция, а не как красивость.
Вот и швейцарка в действии 🇨🇭
И конечно, заказчица не просила «швейцарский стиль», и мы не думали категориями «нужен швейцарский дизайн». Была задача — донести информацию так, чтобы зритель в итоге сделал целевое действие (звонок, заполнение формы). Для этого нужно выделить главное, сделать текст удобным для чтения, расставить акценты, выстроить порядок повествования. К этому добавилась идея с девушками — и дизайн собрался.
Ну то есть ты не «делаешь швейцарку», а решаешь задачу. А стиль получается следствием.
Это всё буду разбирать на интенсиве — детально и по частям (по целому дню отвожу на пространство, графику, типографику и цвет, а потом сведу всё в единую систему).
Начинаем 22 июня, программа и запись тут: swiss.telidchenko.art 😎
https://sorokadance.ru
Этот проект мы делали вместе с Майей (я побыл в роли арт-дира на клиентском проекте, и мне понравилось)).
Смотри, как тут использованы принципы швейцарского дизайна.
1. Графика. Начну с неё — на ней строится основная идея сайта. Это фото девушек из школы, в случайных позициях (хотел написать «позах», но это уже про другое)), которые меняются при скролле.
По центру этой зоны проходит силовая линия — она символизирует пилон, вокруг которого эти формы вращаются. Физически линии нет, но в этом и прикол: без неё формы выглядят живыми, чуть неуравновешенными, подвижными. Но её «создают» элементы в шапке, абзацы отзывов, мелкий элемент внизу и сами фигуры. По скроллу позиции меняются, а линия остаётся на месте. И получается, что формы движутся вокруг одной оси.
Это и есть танец, о котором сайт.
И тут ещё такой момент: позиции живые, естественные, непредсказуемые. Как и девушки в танце: у каждого движения свой характер, своя эмоция.
Поэтому такое решение ещё и вариантивно: таких форм может быть сколь угодно много (но между ними будет единство и узнаваемость). Это готовый элемент айдентики — решение можно использовать на плакате, в мерче, оформлении зала и т.д. Где допускается крупный размер формы (которую на контрасте можно дополнить текстом — контракты, призывы, заголовок и тд).
2. Пространство. Часть под текст (его ширина не случайна: эта зона встаёт в мобилу, и текст такого размера и ширины удобно читать). Другая часть — под графику, которая идёт сквозь весь сайт. Пространство, в котором происходит действие, чётко обозначено и отделено элементами. А центр держит та самая силовая линия — поэтому формы выглядят устойчивыми внутри, даже несмотря на кажущийся перевес и постоянную подвижность.
3. Типографика. Один размер для заголовка, один — для основного текста. Иерархия выстроена интервалами и смещениями, для подзаголовков добавлен верхниц регистр, без изменения кегля.
И тут метафора продолжается: у текста чёткая конструкция из вертикальных силовых линий, на которой он держится, но форма слегка подвижна и игрива. Та же логика, что и с фигурами на пилоне — чёткая конструкция, на ней живое движение.
4. Цвет. Используется чисто функционально — выделить главное, активный элемент, ховер. Цвет тут как функция, а не как красивость.
Вот и швейцарка в действии 🇨🇭
И конечно, заказчица не просила «швейцарский стиль», и мы не думали категориями «нужен швейцарский дизайн». Была задача — донести информацию так, чтобы зритель в итоге сделал целевое действие (звонок, заполнение формы). Для этого нужно выделить главное, сделать текст удобным для чтения, расставить акценты, выстроить порядок повествования. К этому добавилась идея с девушками — и дизайн собрался.
Ну то есть ты не «делаешь швейцарку», а решаешь задачу. А стиль получается следствием.
Это всё буду разбирать на интенсиве — детально и по частям (по целому дню отвожу на пространство, графику, типографику и цвет, а потом сведу всё в единую систему).
Начинаем 22 июня, программа и запись тут: swiss.telidchenko.art 😎
❤24🔥21🥰4🤩2