принцип технологии и примеры параллакс сайтов
Параллакс(Parallax, греч. смена, чередование) – это изменение видимого положение объекта по отношению к удаленному фону в зависимости от нахождения наблюдателя. Первостепенно этот термин употреблялся для природных явлений, в астрономии и геодезии. Например, вот такое смещение солнца относительно столба при отражении в воде и есть параллакс в природе.
В веб-дизайне параллакс-эффект или параллакс-скроллинг – это специальная техника, когда фоновое изображение в перспективе двигается медленнее, чем элементы переднего плана. Эта технология применяется все чаще, так как выглядит действительно эффектно и круто.
Достигается такой эффект трехмерного пространства с помощью нескольких слоев, которые накладываются друг на друга и при прокручивании движутся с различной скоростью. С помощью такой технологии можно создать не только искусственный трехмерный эффект, можно применять ее к иконкам, изображениям и другим элементам страницы.
Недостатки параллакс-эффекта
Основной минус параллакса – это проблемы с производительностью сайта. Выглядит все красиво и стильно, но применение javascript/jQuery, с помощью которых и создается эффект параллакса, в значительной степени утяжеляет страницу и очень снижает скорость ее загрузки. Это происходит потому, что в его основе лежат сложные вычисления: javascript приходится контролировать положение каждого пикселя на экране. В некоторых случаях ситуация осложняется еще и проблемами с кроссбраузерностью и кроссплатформенностью. Многие разработчики рекомендуют использовать параллакс-эффект применительно к максимум двум элементам страницы.
Альтернативное решение
С появлением CSS3 задача немного упростилась. С его помощью можно создать очень похожий эффект, который будет намного экономичнее в плане ресурсозатрат. Суть в том, что контент сайта размещается на одной странице, а перемещение по подстраницам происходит методом CSS3-перехода.
Это тот же параллакс, но с некоторым отличием: дело в том, что достичь того, чтобы перемещение осуществлялось с различной скоростью, используя только CSS3, невозможно. Кроме того, данный стандарт поддерживается не всеми современными браузерами. Поэтому и здесь есть свои сложности.
Вывод
Эффект параллакса хоть и популярен, но далеко не все спешат его использовать при создании сайта по причине вышеозвученных проблем. Видимо, пока просто необходимо время, чтобы технологии смогли преодолеть возникшие трудности. А пока такой вариант можно использовать на сайтах-одностраничниках: так он точно запомнится и сумеет удержать пользователя.
Параллакс на javascript
- jQuery–эффект параллакс скроллинга – плагин, которые привязывает эффект параллакс к движению колесика мыши
- Scrolldeck – плагин для создания параллакс-эффекта
- jParallax – превращает элементы страницы в абсолютно позиционированные слои, движущиеся в соответствии с мышкой
Примеры сайтов с параллакс-эффектом
digitalhands.
net
grabandgo.pt
activatedrinks.com (сайт закрылся)
Вернуться назад
Параллакс: лучшие решения и ошибки
Параллакс — творческий инструмент, позволяющий дизайнерам создавать трехмерное пространство на двухмерном экране.
Указанный эффект добавляет интерфейсу глубины, благодаря чему пользователи получают захватывающий и уникальный опыт — именно этого стремится достичь каждый бренд!
Что такое параллакс?
Параллакс-скроллинг — техника в веб-дизайне, при которой пользователям кажется, что элементы на экране движутся с разной скоростью, создавая эффект 3D.
Ощущения подобны восприятию пространства за рулем автомобиля, когда близкие объекты быстро остаются позади, а те, которые располагаются на расстоянии, исчезают из поля зрения лишь через какое-то время.
Существует несколько видов параллакса — во всех случаях контент размещается на отдельных слоях для получения желаемого эффекта.
Устанавливая для каждого слоя свою скорость прокрутки, дизайнеры создают иллюзию движения объектов по экрану при скролле.
Краткая история параллакса
Параллакс появился еще в 1930-х годах как метод создания анимации для мультфильмов, таких как, например, “Белоснежка и семь гномов” от Disney. В начале 1980-х дизайнеры видеоигр использовали его, чтобы добавлять 3D-эффекты в 2D-игры, в частности Jump Bug в 1981 году.
Лишь в 2007 году параллакс впервые был реализован в веб-дизайне с помощью Javascript и CSS2 в Internet Explorer 6. С появлением в 2011 году HTML5 и CSS3 стало проще добавить такие эффекты в интерфейс, поэтому их популярность резко выросла.
Сейчас же технологии позволяют создавать невероятно сложные параллаксы, поэтому дизайнеры способны подарить пользователям по-настоящему захватывающий визуальный опыт.
Когда использовать параллакс
Хотя параллакс и является чрезвычайно эффективным инструментом для создания уникального опыта взаимодействия, дизайнеры должны учитывать недостатки такой прокрутки.
1. Скорость загрузки страницы
Параллакс можно назвать “убийцей” скорости загрузки страницы, особенно, когда речь идет о сайтах, размещенных на виртуальном хостинге (когда несколько сайтов находятся на 1 сервере). Согласно данным Google, 2 секунды — максимально допустимое время загрузки сайта электронной коммерции. Для большинства других сайтов среднее значение составляет 3-6 секунд.
Каковы ваши цели, если вы создаете сайт электронной коммерции? Впечатлить пользователя своими навыками в области дизайна или продать продукт? Если вы не можете оптимизировать скорость загрузки, не стоит добавлять параллакс-эффект на сайт электронной коммерции или другой сайт, где скорость имеет важное значение.
Читайте нашу статью о том, как повысить скорость загрузки страницы с параллаксом.
2. Как параллакс отразится на контенте?
Еще один вопрос, на который следует ответить, прежде чем добавить параллакс: как он отразится на контенте?
Например, на сайте Collage Crafting дизайнеры решили использовать этот эффект для отображения списка точек продаж.
Часть текста трудно прочитать, так как при прокрутке он обрезается сверху и снизу. Такой опыт взаимодействия нельзя назвать удобным, поскольку пользователи не могут нормально воспринимать весь контент.
Если вы хотите, чтобы посетители сайта прочитали текст, не усложняйте интерфейс! Есть и другие способы представить контент, сохраняя его читабельность.
3. Убедитесь, что параллакс не отвлекает и не раздражает пользователей
Иногда параллакс смотрится уместно. Например, креативное агентство действительно может произвести на потенциальных клиентов впечатление, продемонстрировав таким образом свои навыки.
Однако если я ищу, например, расценки на автострахование, мне не захочется тратить время, прокручивая страницы с причудливыми эффектами, чтобы добраться до них.
В высококонкурентных отраслях, где потребители стремятся быстро получать информацию, параллакс может отрицательно сказаться на проценте отказов и конверсии.
Всегда думайте о контенте, контексте и о том, каким образом сайт удовлетворяет потребности пользователей.
9 вдохновляющих примеров параллакса
Мы нашли 9 отличных примеров реализации параллакса. Во всех случаях дизайнеры применили этот эффект, чтобы рассказать пользователям историю.
Как вы увидите из этих примеров, параллакс может быть эффективным инструментом сторителлинга, однако его реализацию необходимо тщательно продумать.
1. NIIKA
NIIKA — креативное агентство из Австралии. Изображение на главной странице содержит композицию из фигур, которые еле заметно двигаются. При прокрутке абстрактные формы перемещаются по экрану, а большие динамические заголовки сообщают об услугах агентства.
Ниже можно увидеть еще один эффект параллакса: на фоне зафиксирована карта, поверх которой располагаются контактные данные агентства, перемещающиеся при прокрутке.
Призыв к действию “Поработайте с нами” перед футером также реализован с помощью параллакса.
Несмотря на то, что NIIKA несколько раз применяет эффект к тексту, пользователи с легкостью могут найти всю необходимую информацию.
2. CANN
CANN — американский производитель тонизирующих напитков на основе каннабиса. На сайте история бренда рассказана при помощи захватывающего, тщательно продуманного параллакса.
Разработчики проделали фантастическую работу по оптимизации сайта, чтобы реализовать такой сложный эффект.
Пользователям удобно знакомиться с контентом, а параллакс помогает рассказать историю компании, при этом летающие по экрану пузырьки вызывают ассоциации с шипучим напитком. Кроме того, 3 вкуса CANN эффектно представлены с помощью разных цветов.
Раздел магазина на сайте выглядит просто потрясающе: дизайнеры отказались от модных эффектов, чтобы оптимизировать интерфейс для повышения конверсии.
3. Toy Fight
Toy Fight — креативное агентство из Великобритании. На главной странице сайта реализован простой, но элегантный параллакс-эффект с заметным призывом к действию, который появляется в центре экрана.
Компания использует параллакс на каждой странице для перехода от первого экрана к контенту.
Это отличная идея, так как изображения выглядят забавными, а текст рассказывает об услугах компании и прошлых проектах — вы как будто заглядываете за занавес.
Сайт Toy Fight — фантастический пример того, как параллакс-скроллинг помогает рассказывать истории.
4. Garden
Garden — завоевавшая несколько наград дизайн-студия из Португалии. На сайте применен красивый параллакс-эффект: когда пользователь прокручивает страницу, солнце на главном изображении скрывается за горизонтом.
Ниже размещены линейные иллюстрации, которые появляются прямо на глазах по мере продвижения к концу страницы. Такие деликатные анимационные эффекты привлекают внимание потенциальных клиентов к важной информации об услугах студии и заголовкам.
5. Smart Move
Smart Move — это инициатива по привлечению и удержанию специалистов в Большом Эребру в Швеции. Главная страница сайта включает впечатляющий горизонтальный параллакс, который демонстрирует особенности и культуру Эребру со ссылками на страницы с более подробной информацией по каждой теме.
Интерфейс познакомит вас с разными сферами жизни шведов, включая заботу о природе, шоппинг, развлечения, семейную и ночную жизнь.
6. Bertani Wines
Bertani — итальянская винодельческая компания. Чтобы рассказать историю бренда, разработчики сайта добавили горизонтальный параллакс с изображениями, видео и текстом.
Здесь используется сочетание горизонтальной и вертикальной прокрутки, чтобы вы могли совершить путешествие по виноградникам и изучить разные вина. Дизайнеры нашли правильный баланс между сложными эффектами и захватывающим повествованием. Каждая деталь интерфейса имеет свое предназначение, а контент занимает центральное положение.
7. Quentin Goupille
Quentin Goupille — арт-директор, иллюстратор и кинопродюсер-фрилансер из Парижа. С помощью параллакса он рассказывает, какая история стоит за тем или иным проектом в его портфолио.
Каждая страница уникальна — Квентин отправляет пользователей в путешествие по своим фильмам. Результат впечатляет, мы сразу видим, что автор — креативный человек, обладающий талантом рассказчика.
Этот сайт является отличным примером того, как представители творческих профессий могут использовать параллакс, чтобы уникальным и увлекательным образом показать свои работы.
8. Crazy About Eggs
Crazy About Eggs — сайт яичной фермы в Нидерландах, создатели которой содержат кур на свободном выгуле и следят за тем, чтобы они жили в отличных условиях.
Эффекты параллакса на сайте применяются к небольшим элементам и подзаголовкам. В разделе с преимуществами продукта упаковка яиц фиксируется в одной точке, когда мы прокручиваем страницу, в то время как текст появляется то слева, то справа от нее.
Это чрезвычайно креативный способ обратить внимание пользователей на бренд и познакомить их с продуктом. В следующий раз, когда человек окажется в супермаркете, он, скорее всего, сразу же узнает упаковку Crazy About Eggs.
9. Kibana
Kibana — курорт во Франции, который включает жилые помещения, площадки для проведения мероприятий, сады, рынок и другие развлечения на свежем воздухе.
Поверх главного изображения размещается приветствие. Когда вы начинаете прокручивать страницу, то погружаетесь в один из прекрасных садов курорта, и у вас сразу же возникает сильное желание очутиться в этом месте!
Ниже деликатные анимации привлекают внимание пользователя к сообщениям о ключевых особенностях Kibana и красивым изображениям. Ближе к футеру дизайнер использует интересный параллакс-эффект, чтобы представить команду бренда.
Заключение
Параллакс — полезный инструмент, предназначение которого — рассказывать истории, а не просто добавлять бессмысленные анимации, чтобы произвести впечатление на пользователей. Если вы хотите применить его так же эффективно, как дизайнеры в приведенных выше примерах, необходимо много времени, совместной работы и планирования.
Всегда помните о потребностях клиентов и не используйте параллакс, если он негативно повлияет на опыт взаимодействия с интерфейсом.
Что такое эффект параллакса? Полное руководство · Эскиз
Промышленность
Узнайте, почему эта тенденция дизайна с эффектом плавной прокрутки стала отраслевым стандартом
Понимание
Некоторые тенденции веб-дизайна выдерживают испытание временем. Мы не говорим здесь о Comic Sans и анимации на основе Flash — они могут остаться в начале 2000-х. Но эффект параллакса сегодня так же актуален, как и в 2011 году, когда он стал популярным в Интернете.0003
В этом посте мы расскажем вам, что такое эффект параллакса, преимущества его использования и несколько примеров, чтобы вы лучше поняли, как его применять.
Что такое эффект параллакса?
Вы когда-нибудь прокручивали страницу, которая казалась динамичной? Как будто вы прокручиваете более одного представления одновременно? Это эффект параллакса, и он возникает, когда разные элементы страницы перемещаются с разной скоростью, создавая эффект трехмерной глубины.
Часто бывает так, что фоновое изображение остается на месте или медленно перемещается, в то время как изображения и текст на странице прокручиваются нормально.
Вы можете увидеть его в действии здесь:
Узнайте, как мы используем эффект параллакса, в нашем блоге — Sketch: в 2021 году и позже.
Знаете ли вы? Анимационные компании использовали эффект параллакса в 20 веке для имитации глубины в своих 2D-сценах. Отличным примером является использование компанией Disney многоплоскостных камер в фильме « Белоснежка и семь гномов 9».0030 .
Каковы преимущества использования эффекта параллакса?
Эффект параллакса — отличный способ обогатить сайт, продемонстрировать продукты и создать ощущение погружения. Теперь, когда у нас есть некоторое представление о том, что такое эффект прокрутки параллакса, давайте посмотрим на различные преимущества его использования.
- Глубина 3D: Разделяя слои и перемещая их с разной скоростью, вы обманываете разум пользователя, заставляя его воспринимать глубину 3D.
- Чувство масштаба: Наличие большего количества элементов на разных уровнях позволяет отличать их друг от друга и дает ощущение масштаба, которое обычно трудно передать с помощью статических 2D-изображений.
- Ориентация на пользователя: Если вы хотите, чтобы ваши пользователи смотрели на определенный элемент, эффекты прокрутки позволяют вам анимировать что-то или все остальное вокруг него, чтобы сохранить фокус.
- Разделяемый контент: B2B-сайтов часто используют эффекты параллакса для демонстрации важных предложений компании. На этих сайтах много информации, поэтому это хороший способ разбить контент.
- Современный дизайн: Изящный плавный дизайн является частью современной эстетики веб-приложений и мобильных приложений, которой следуют компании из всех отраслей. Максимально используйте эффекты прокрутки, чтобы ваши дизайны оставались актуальными.
Теперь, когда вы знаете о преимуществах эффектов параллакса, давайте посмотрим, как они реализуются, на нескольких примерах.
Примеры эффектов параллакса
Веб-сайты
Только в 2011 году и с введением кодирования HTML5 и CSS 3 этот метод стал популярным среди веб-дизайнеров.
Теперь их легко внедрить, и они сделают ваш сайт современным и стильным.
Мы показали собственный пример эффекта вертикальной прокрутки параллакса, но это не единственный вариант использования веб-сайта. Другие включают боковую прокрутку, параллакс 3D-слоя, прокрутку слоя и многое другое. Вам не нужно смотреть дальше страницы Apple M2 MacBook Air, чтобы увидеть эффекты прокрутки в действии.
Веб-страница Apple M2 MacBook Air, показывающая эффекты прокрутки параллакса в действии.
Этот пример Beercamp 2011 года представляет собой действительно творческое использование эффекта параллакса, напоминающего титры «Звездных войн». Хотя это может быть подавляющим вариантом для большего количества корпоративных бизнес-страниц, он творит чудеса для мероприятия, цель которого — запомниться и заинтересовать.
Этот пример из Beecamp 2011 идет по кроличьей норе с использованием эффекта прокрутки.
Мобильные приложения
Теперь стало намного проще создавать одинаковые дизайны для всех ваших платформ, поэтому с ростом популярности эффектов параллакса на веб-сайтах последовали и мобильные приложения.
Эффекты слоя и боковой прокрутки также очень популярны в мобильных приложениях наряду с эффектом вертикальной прокрутки. Однако цель та же — создать качественную плавную анимацию и эффекты для вашего продукта.
Вот отличное приложение эффекта параллакса мобильного приложения к альпинистскому приложению от Натали Струневской.
Хотите попробовать сами? Если на вашем телефоне есть Apple Maps, откройте режим просмотра улиц «Осмотреться» и найдите улицу с крупным планом, например автобусом или фургоном. Когда вы перемещаетесь, вы заметите небольшой эффект параллакса на близлежащих объектах, который помогает сделать неподвижное изображение более реальным.
Видеоигры
Эффект параллакса также был популярен в индустрии видеоигр на протяжении десятилетий. Игры как Super Mario Bros. в действии, чтобы увидеть, что мы имеем в виду.
В 2D-играх с боковой прокруткой этот метод прокручивает слои фона и переднего плана с разной скоростью, создавая яркие анимированные сцены.
Вот пример, показывающий различные слои в игре The Whispered World 9.0030 .
Каждый цвет представляет отдельный слой 2D-изображения, который игра комбинирует для создания эффекта параллакса прокрутки.
Объединив все эти слои вместе, мы получим полное изображение фона.
Вот как выглядит фон игры с точки зрения пользователя, когда все слои совмещены.
Добавьте разные скорости прокрутки к этим разным слоям, и вы получите мощный эффект глубины и плавную анимацию.
Эффекты параллакса в Sketch
Мы решили использовать тонкий эффект прокрутки параллакса на нескольких страницах нашего веб-сайта — взгляните на нашу страницу «Дизайн», чтобы увидеть его в действии. «Это был естественный шаг, — объясняет наш ведущий веб-дизайнер Аугусто Лопес. «Анимация параллакса может быть высокой наградой за небольшие усилия. Они просты в реализации и при правильном использовании могут принести много пользы вашему веб-сайту — просто не злоупотребляйте ими!»
Ричард Газдик, один из наших дизайнеров и разработчиков внешнего интерфейса, согласен.
«Движение кажется естественным и придает глубину статичным макетам», — говорит он.
Взгляните на наш собственный веб-сайт, и вы заметите несколько различных тонких эффектов прокрутки параллакса.
И с точки зрения разработки это тоже было просто — объясняет Ричард. «Мы используем очень маленький JS-фреймворк под названием Stimulus. Это позволяет нам создавать небольшие компоненты JavaScript, которые контролируются атрибутами данных HTML», — продолжает он. С помощью всего нескольких дополнительных параметров данных HTML команда могла контролировать горизонтальную и вертикальную скорость в зависимости от скорости прокрутки. «Поэтому более крупные объекты и элементы могут двигаться медленнее, а более мелкие — быстрее в виртуальном пространстве», — заключает Ричард.
Веб-дизайн и история искусства
Веб-дизайн и история искусства | Webflow Пещеры Ласко c 18 000 г. до н. э.0
Египет c 3 000 г. до н. э.1
Готика c 1100-1200-е гг. CE2
Ренессанс c 1300-1500-е гг.
s-1800s CE6
Дагерротип 1839 CE7
Дагерротип 1840 CE8
Дагерротип 1841 CE9
Раннее современное искусство c 1870–1930-х годов CE10
Раннее современное искусство 1870–1960-х годов CE11
Плоский дизайн c 2013 CE13
Скеоморфизм c 2013 CE14
Холст c 2013 CE15
Черный квадрат 1915 CE16
Материал (дизайн) 2014 CE17
Бруталистический веб-дизайн Что дальше c 2018–1CE19? c 2020– CE19
Прослеживая будущее веб-дизайна через историю искусства
Видя перед собой мир невыразимой красоты и сложности, мы стремимся воспроизвести его.
Формы примитивные, почти иероглифические, пронизанные какой-то магией.
По крайней мере, мы так себе представляем.
Вода просачивается из шва, разлома, в пещере.
Буйволы хлынули из пасти, и в танце огня наши тени охотятся на них.
Мы сами строим стены пещеры. Через них мы идем в бесконечность.
Фигура уменьшается, становится иероглифической — жест в сторону языка.
Изображения изображают сначала слово, потом слог — жест в сторону алфавита.
Египет (ок. 3000 г. до н.э.)
Молодой бог вырисовывается, а с ним и его святые.
Повествование доминирует над картинкой — главная героиня формирует пространство вокруг себя, как звезда. В центре сцены гигантская Мария, баюкающая на руках своего титанического младенца, а крошечные святые и ангелы толпятся позади нее.
Мы начинаем постигать превратности пребывания тела в космосе.
Проступают детали лица, глубоко вокруг глаз и на щеках проступают следы эмоций.
Фигура разворачивается из пещеры, больше, чем жизнь.
Чимабуэ, Санта-Тринита-Маэста (ок. 1280-129 гг.)0)
Мечта утончается в нашей мелкой моторике
Мы достигаем перспективы. Распределение предметов в пространстве сбрасывает метафоры. Центр сцены сужается, надо указывать тоньше.
Джотто, Плач (ок. 1305)
Изучаем падение света по каскадам ткани
И начинаем прослеживать его контуры.
Глубина удлиняется…
Мир в наших руках.
или хотя бы наши кисти.
Караваджо, Ужин в Эммаусе (1601)
В маленьких черных коробочках-обскурах возникает образ. Сама вещь, das Ding.
Вы можете стоять внутри этого маленького черного ящика и отбрасывать свою тень на мир.
Или, по крайней мере, наше представление об этом.
Но образ остается эфемерным, вечно мимолетным, как сами секунды.
Ударьте по палатке, и мы исчезнем.
Obs—
scura
Louis-Jacques-Mandé
19 августа 1839
Художник Луи-Жак-Манде Дагер созвал совместную сессию Академии наук и Академии изящных искусств — корифеев французского искусства и науки, собранных в одной комнате, — чтобы показать им кое-что поистине замечательный:
Зная своего зрителя, Дагер собрал сцену из натюрморта, изобилующего классическими предметами. Два пухлощеких лика херувимов, обрамленных крыльями, голова барана с закрученными рогами, лениво склонившийся фриз обнаженной женщины — здравствуй, мужской взгляд! — все плавают где-то в отполированных глубинах листа посеребренной меди, четыре угла которого закруглены, как окантовка твит-бокса.
Но примечательно в этом произведении, конечно, не то, что оно показывает, а совершенство собранных в нем предметов. Свет падает, как падает свет, косой и рассеянный в мерцающем серебристом полуденном свете. Тени ласкают изгибы херувимских щек так же, как и они.
Как будто мгновение было точно вырезано из бурного потока времени и остановило . Пойманный нашим вниманием, сделанный вечным. Все с точностью, настолько близкой к точности наших эфемерных глаз, что ее невозможно различить даже в этой ранней итерации технологии.
Как писал журналист Ипполит Гошро об изображении мертвого паука, сфотографированного через солнечный микроскоп:
«Вы можете изучать его анатомию с увеличительным стеклом или без него, как в природе; [нет] ни нити, ни протока, пусть даже тонкого, за которым нельзя было бы проследить и изучить».
Хотя мир не узнал бы об этом ни в тот день, ни спустя годы, само искусство преобразилось в тот день.
Камера выходит из собственной тени
Дагер выпускает свое устройство в мир, и он замирает. Он часами следит за тишиной только для того, чтобы эта тишина вернулась в «вечный» образ.
Эта старая нервирующая магия возвращается:
Почти волшебная способность фотографии воспроизводить жизнь вызывала страх и подозрения у многих людей. Стремясь развеять опасения по поводу средства массовой информации и завоевать доверие общественности, фотографы стремились сделать и показать портреты американской элиты. В эпоху, когда френологи предлагали прочесть характер человека по его физическим характеристикам, считалось, что портреты лидеров общества имеют назидательное и нравоучительное воздействие на зрителя.
«Первый взгляд Америки в камеру: дагерротипные портреты и пейзажи, 1839–1862», Библиотека Конгресса США
Однако более важным является вопрос о ценности изображения в постдагерротипном мире.
До того момента искусство прошло эволюционную дугу по направлению к реальности: мастерство художника измерялось правдоподобием его работы.
Чем больше картина отражает то, что видит глаз, тем «лучше» художник.
Итак… что теперь, когда изображение стало доступным для захвата? Чем становится искусство в эпоху, когда вы можете удалить изображение из безжалостного потока времени — когда вы можете его заморозить и сохранить?
Почему? Потому что теперь, когда с помощью механического устройства можно запечатлеть безупречный образ реальности, сама лакмусовая бумажка искусства перевернулась с ног на голову.
До сих пор о произведении художника судили в немалой степени по его правдоподобию: насколько художник воспроизвел то, что видел глаз. Целые карьеры были основаны на овладении той или иной гранью репрезентации: Вермеер, художник света. Да Винчи, мастер человеческой формы и выражения. Элементы живописной выразительности, конечно, допускались — драматически собранный свет Караваджо, свирепые искажения де Гойи — но выделялись как функция их отклонения от чистой репрезентации.
Такое отношение сохраняется и сегодня.
Просто посетите любой музей современных работ, и вы услышите, как минимум один, если не многие, пробормотал: «Мой пятилетний мог бы сделать это».
В холодном, остекленном взгляде дагерротипной камеры искусство теперь казалось невозможным. Исключено нововведением. Не имеющий отношения?
Материал изображения появляется
Мечта о правдоподобии исчезает, захваченная. Мы останавливаемся на коробках, на вещности холста, на затененной вещи.
Казимира Малевича,
Супрематическая картина (с черной трапецией и красным квадратом)
Марк Ротко,
Без названия 1953
Материализованная, сплющенная.
Нас занимает вещность размазанной, размазанной и окрашенной жидкости. Образ изображения визуализируется, атомизируется. Оказал обратно морилку, и стирку, и строгание.
ROTHKO
Мы молотим и брызгаем. Мы накладываем, накладываем и накладываем. Мы жестикулируем, и холст записывает это, становится картой нашего тела в движении, застывшего на время, навсегда.
Джексон Поллок,
1A
А пока давайте перейдем к тому, что вам, вероятно, интересно:
Какое отношение это имеет к веб-дизайну?
Изображение сглаживается,
становится холстом
Это образ моего голоса, который вы слышите в своем.
Это цвет нашей палитры, ее тембр. Мы воем в формах наших восклицаний.
Цвета дрожат, вибрируют, растворяются в крови. Арабески на цветовом поле №2.
Теперь мы вернулись к формам, но цвета двигаются.
Мы всегда имели дело с дополненной виртуальной реальностью. На скольких картинах вы изображаете тараканов? Какого цвета сумерки Сан-Франциско?
13
wwdc
тысяча
упростить
perfect
–Основное введение WWDC, 2013
На конференции Apple WWDC 2013 Тим Кук объявил о новом видении дизайна iOS. Это было видение, которое изменит мир почти так же сильно, как и само устройство.
«Мы рассматриваем iOS7 как определяющую важное новое направление и во многих отношениях начало».
— Джони Айвз, из основной презентации WWDC 2013
Ты прав, Джони. Это было началом.
Исчез блеск. Хром. Узкая кожа и богатый вельвет. Бусины света на стекле. На их месте? Ну, текст, в основном. буквенная форма Старка; блестящий, ровный цвет. Простые коробки. Чистота .
Чистые линии.
simple
Простое стилистическое изменение, но на самом деле кардинальное изменение.
Скевоморфизм
Видите ли, скевоморфизм — в основном академический термин до его популяризации в мире дизайна — выполняет действительно полезную функцию: облегчает переход людей в новую среду.
Вся эта сверхтекстурированная кожа и эффектно затененные перелистывания страниц служили нам помощниками, когда мы переходили от реальности к iOS, превращая то, что могло быть дико незнакомым и, следовательно, нервирующим, в домашнее пространство.
i
r
l
–3D
Таким образом, скевоморфизм – это доступность.
iOS7 ознаменовала отход от скевоморфизма. Теперь, когда мы лучше познакомились с цифровой средой, искусственная трехмерность уплощена, отступает от наших иконок в совершенно другую среду — например, при переключении с дома на экраны уведомлений.
i
O
S7
–квартира
Работа по представлению сделана
Как и с появлением камеры, работа по представлению была выполнена.
Теперь мы можем отказаться от погони за правдоподобием, сосредоточившись на пользовательском интерфейсе не таким, каким мог выглядеть , а таким, каким он был.
Растровое изображение и пиксель. Форма буквы и шестнадцатеричный код.
Поверхность с гладкой поверхностью
Постукивание и прокалывание
Прокалывание и защемление
Вечно плоская.
Холст.
S
q
u
a
r
e
Казимир Малевич
Ты смотришь на черное.
Черный квадрат — изображение черного квадрата.
Черный квадрат — это холст.
Черный квадрат представляет собой холст, натянутый на куски дерева, вырезанные из дерева и связанные в форме квадрата.
Черный квадрат представляет собой слой за слоем краски, называемой черной, на холсте, натянутом на деревянный квадрат.
Картина — не что иное, как оптическая иллюзия.
Картина — ничто.
Черный.
Черный.
«Лицо нового искусства… первый шаг чистого творчества»
— Каземир Малевич о картине «Черный квадрат 9»0003
Время не пожалело.
Малевич был прав.
Картина написана красками на холсте.
Это трещины.
Крэк-крэк.
Материал
Освобожденный от потребности изображать — заново представлять, снова делать момент доступным — художник отворачивается от вещи и обращается к восприятию (импрессионизм), затем к эмоциям (экспрессионизм), затем к состояниям ума ( Сюрреализм).
Наконец, не осталось ничего, кроме самих вещей: материала творения. Краска скользит по кисти, удар о холст, эта грубая растительная текстура, снова текстура дерева, натянутая рама.
Материал.
Материал.
«Умная» поверхность. Умеет реагировать на прикосновения. Чтобы вдавить с краном, рябь наружу и обратно. Деформировать, реформировать, переформировать.
Что-то вроде… бумаги.
Pixel-perfect
Каждые бит имеют значение. Мы делаем ваш опыт идеальным пикселем .
Подумайте об этом: совершенство теперь прямое.
Совершенство — это квадрат, рисуемый снова и снова, до бесконечности, в таком исчезающе маленьком размере, что он становится чем-то вроде атома.
Второй мир, в котором мы живем, где мы манипулируем цифровым материалом. Не ткань нашей собственной жизни — не календари, которые удваивают наши дни, числа, которые дают нам доступ к лицам, или фотографии, на которых эти лица остаются неподвижными, вневременными в пикселях, — а пиксели.
Черный квадрат Малевича, только теперь он доступен в любом из миллиардов цветов? Не холст, а материал , платонический таким образом. Типа идеал.
Подобно Малевичу и десяткам абстракционистов после него, мы теперь одержимы не столько изображением, сколько материалом изображения. Мы знаем, что погрузились в иллюзию, что мы живем там сейчас, что мы никогда не коснемся того, из чего оно сделано, но мы любим его в его бесконечной пластичности.
Мы разрабатываем, чтобы понимать, из чего состоит изображение перед нами. Мы упрощаем. Сосредоточьтесь на типе и цвете, на материальных метафорах тени, слоя, иерархии.
Это тоже пройдет.
Но… но что дальше?
БРУТАЛИЗМБРУТАЛИЗМБРУТАЛИЗМБРУТАЛИЗМ ализмБРУТАЛИЗМ
TALISMBRUTALISMBRUTALISMбрутализмBRUTALISM
BRUTALIBRUTALISMSMBRUTALISMBRUTALISMBRUTALISMBRUTALISMбрутализмBRUTALISM
BRUTALISMBRUTALISMBRUTALISMбрутализмBRUTALISM
Леннарт Холм. Коллега-архитектор Ганс Апслунд сделал «шутливый комментарий» по этому поводу, употребив термин nybrutalism (новый брутализм).
1950
(Что такое «старый брутализм» остается неясным.)
Архитекторы Элисон и Питер Смитсон проектируют дом на Колвилл-плейс в Лондоне. Сам Петр описал это как:
«[обладающий] балансом пространства, равновесием, воплощенным в больших и меньших объемах, восстанавливающим ощущение интимной жестокости в самый момент сопричастности окружающей природе… господствующей над турбулентностью обстановки»
1951
Критик Николаус Певзнер отвергает новоявленную эстетику, видя в ней «горячее избегание легкости, всего, что можно назвать элегантным, а также всего, что можно объяснить чисто рационально».
Для него брутализм представлял собой прямое неприятие/отрицание этики дизайна, сформулированной Мис ван дер Роэ и Вальтером Гропиусом, которая призывала к «простоте, честности и служению».
1966–7
Очень похоже на краткое определение UX-дизайна, не так ли? Дисциплина, в которой мы неустанно ищем самый простой, самый понятный, самый «ориентированный на пользователя» интерфейс для выполнения любой поставленной задачи.
Мы кропотливо удаляем ненужное, отбрасываем запутывания и двусмысленности, стремясь всегда и превыше всего служить нашим «пользователям».
Но вопрос вертится у нас на языке и в глубине души:
Может ли легкий опыт иметь смысл?
Разве самые важные моменты не бывают самыми трудными? Ведь смысл не в борьбе, не в конфликте?
Разве не должно быть места и времени, чтобы сказать и сделать не самым простым, ясным и легким, но самым сложным? Самый мучительный и трудный?
Разве мы, потратив более 40 часов в неделю на то, чтобы максимально облегчить жизнь другим, не хотим немного размять ноги и построить что-нибудь мы хотим посмотреть? Каким бы агрессивным, резким и витиеватым он ни был?
введите
бруталист
веб
дизайн
что дальше
?
Итак, мы увидели, как последние тенденции в веб-дизайне коррелируют с ключевыми моментами в эволюции истории западного искусства.
Но остается вопрос: что дальше? Погрузимся ли мы с головой в период поп-блеска в стиле Уорхола, критикуя все очень легко потребляемые объекты, которые мы создаем с метастатической потребляемостью?
Соскользнем ли мы в трансцендентные цветовые поля Ротко и абстрактных экспрессионистов, чтобы там вибрировать на необъяснимых частотах между потоком и яростью?
Или мы оттолкнемся от платонического материала пикселя и снова потребуем наши собственные тела, прижав их к экранам, чтобы проследить их форму и предложить некое призрачное прикосновение?
ПРЕДУПРЕЖДЕНИЕ.
