Вдохновение в дизайне пользовательского интерфейса: вы думаете о своих текстурах?
Прошло немногим более десяти лет с тех пор, как «плоский дизайн» стал доминирующим стилем дизайна по умолчанию — и на это есть веские причины. После всех глянцевых поверхностей и теней «веб 2.0» нам всем нужны были элементы дизайна, которые оставались четкими и разборчивыми в наших новых адаптивных макетах.
Однако есть опасность, что весь этот плоский цветовой дизайн может начать выглядеть немного «одинаково». Но вместо того, чтобы добавлять новый цвет или шрифт, иногда смешивание дополнительной текстуры может придать вашему дизайну пользовательского интерфейса необходимый импульс. Давайте посмотрим на несколько убийственных примеров.
Добавление бумажного зерна
Однако есть опасность, что весь этот плоский цветовой дизайн может начать выглядеть немного «одинаково». Но вместо того, чтобы добавлять новый цвет или шрифт, иногда смешивание дополнительной текстуры может придать вашему дизайну пользовательского интерфейса необходимый импульс. Давайте посмотрим на несколько убийственных примеров.
Добавление бумажного зерна
В 2019 году Google выпустил крутой побочный проект под названием « Аризона ИИ », который был разработан для объяснения основных концепций искусственного интеллекта. Стиль современный и дружелюбный, с использованием широких цветных панелей, простых детских книжных иллюстраций и крупного выразительного шрифта с засечками.
Но посмотрите внимательно на плоские цветные области, и вы заметите бумажную зернистость. Небольшая область на изображении ниже, специально увеличена. Это настолько тонко, что я подозреваю, что большинство пользователей не замечают этого сознательно, но я думаю, что это прекрасно поддерживает несложный стиль детской книги.
Дизайнеры проекта Google AZ of AI придали этому практически плоскому дизайну теплую, тактильную нотку.
Так как же они добились такого эффекта?
Должен признаться, я провел некоторое время, просматривая
background-imageсвойства CSS всех больших областей плоской панели в поисках мозаичного изображения, но ничего не нашел . Это озадачивало.
Только на следующий день я получил небольшое откровение. Что, если вместо того, чтобы добавлять зернистость к каждой панели, они создали едва заметный «зернистый слой линз», который покрывал бы весь сайт? Думайте об этом как о фильтре Snapchat для зернистости.
Бинго! Я искал не в том месте.
Если вы просмотрите HTML, вы найдете
:afterпсевдоэлемент с прикрепленным CSS:
._3rV4LQ0BePEq9V1dxEjhEF::after {
background: url(/static/noise.jpg);
content: "";
height: 100%;
left: 0;
opacity: .05;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 201;
}
Псевдоэлемент: after создает почти прозрачный слой текстуры.
Этот слой использует зернистое изображение (
noise.jpg) в качестве мозаичного фона, и они расположили его так, чтобы он покрывал весь экран (
width:100%,
height: 100%,
top:0,
left:0и
z-index:201).
Как мы и подозревали, непрозрачность установлена
почти прозрачной (
почти прозрачной (
opacity: .05), поэтому все, что остается, — это намек на неравномерную зернистость. Единственная потенциальная проблема с покрытием экрана этим «линзовым слоем» (даже если он прозрачный) заключается в том, что он заблокирует доступ курсора ко всем ссылкам, вводам и другим взаимодействиям с пользователем под ним.
К счастью, это легко решается добавлением
pointer-events: none, что делает этот слой с линзой невидимым для курсора пользователя.
Я думаю, что это действительно полезная техника. Он обеспечивает визуальное воздействие на весь сайт, используя не более одной крошечной графики и дюжины строк CSS. Это отличная отдача.
Краски, карандаши и другие традиционные материалы
Компьютеры созданы для того, чтобы быть точными и чистыми, и, в отличие от большинства традиционных носителей, цифровые цвета не стираются, не размазываются, не растекаются и не размазываются. Это отлично подходит для поддержания вашего стола в чистоте, но это также означает, что настоящие, свободные, органические, естественные материалы, такие как краски и карандаши, действительно выделяются, когда вы можете найти для них правильную настройку.
Кампания «Больше из меньшего» для AirBNB China переносит китайскую акварель в цифровой мир.
Хотя срок действия приложения, показанного выше, уже истек, новозеландское агентство Resn предоставило нам прекрасный недавний пример, достоверно воспроизводящий традиционный китайский акварельный стиль для продвижения опыта AirBNB в сельской местности Китая.
Этот акварельный стиль пропитал каждый пиксель приложения, от анимационных последовательностей до полноэкранных фонов, что сделало его огромной задачей.
Увядшие воспоминания
Когда агентство Obys отдавало цифровую дань уважения асу Формулы-1 Ники Лауде, их подход к дизайну в значительной степени опирался на горы фантастических архивных фотографий и кадров из карьеры Ники.
Дань Obys Ники Лауде.
Фотографии с гравийно-красной сепией придают сайту теплый, слегка задумчивый вид. Может возникнуть соблазн слишком далеко следовать ретро-теме и, возможно, имитировать старую книгу или газету. К счастью, Obys избежала этого клише, имея возможность демонстрировать архивные изображения в виде динамического веб-макета, который просто невозможен в традиционной книге.
Цифровой ретро-взгляд
Ретро-вдохновение: «Трон» (1982), «Военные игры» (1983) и «Бегущий по лезвию» (1982).
Конечно, «ретро» никогда не является конкретным моментом времени, а скорее перспективой, как демонстрирует Hypebeast своим подходом к ретро-теме супер-80-х. Их вращающийся вихрь, двухцветные линии и светящиеся строки сканирования вызывали в воображении видения световых циклов Трона , командных центров WarGames и Бегущего по лезвию .
Hypebeast добавляет большую ложку 1982 года в свой микс музыки и уличной одежды.
Hypebeast использовали холст HTML5 для рендеринга своих анимаций «светящийся эффект телевизионной развертки»
Полутона и точки Бена Дэя
Если вы когда-нибудь внимательно рассматривали старые комиксы, газеты или журналы, вы, вероятно, замечали узор из точек, создающих тон на изображениях.
Технически в печати существует два типа точечных узоров. Полутоновые экраны используют пластиковую сетку крошечных линз, которые выжигают черные точки на фотопленке под ними. Больше света создает большие точки.
На первой панели рисунка ниже показан образец полутона фрески Энди Уорхола 1964 года .
Полутона и точки Бена Дэя в поп-арте Уорхола, рекламе в газетах и
комиксах.
комиксах.
Точки Бена Дэя немного отличаются. Комиксы — как пример с Суперменом, показанный выше — обычно берут черные линии и добавляют области плоских точек Бена Дэя одинакового размера, чтобы имитировать дополнительные цвета чернил. Сетка из мелких красных точек на белой бумажной основе — дешевый способ получить розовый.
Хотя шероховатый, пунктирный вид этих техник начинался как неизбежный побочный продукт процесса печати, в конечном итоге он стал самостоятельным художественным заявлением — и продолжает использоваться таким образом сегодня.
Небольшая японская деревня Мисато, Симанэ, дает нам мой любимый недавний пример этой техники. Их сайт представляет собой иллюстрированную карту, которая позволяет совершить виртуальную экскурсию по деревне. Иллюстрации забавные и в основном одноцветные, но с некоторыми замечательными полутоновыми расцветками, добавляющими глубину и текстуру.
Мисато, Шимане, использует короткие полутона, чтобы придать плоским цветным иллюстрациям глубину и выразительность.
Полутона своими руками
Существуют десятки фильтров Photoshop, которые имитируют полутоновый процесс на ваших изображениях. Они… хороши, но если мы собираемся удалить детали изображения из фотографии, преобразовав ее в полутон, имеет смысл преобразовать ее в векторную графику — в идеале в SVG. Для этого я с радостью могу порекомендовать HalftonePro .
HalftonePro позволяет относительно легко преобразовать любое растровое изображение в SVG.
HalftonePro позволяет загружать любые растровые изображения и применять множество настроек полутонов, в том числе:
- шкала сетки
- узор сетки (круг, квадрат, треугольник и т. д.)
- форма точки (круг, квадрат, треугольник и т. д.)
- контраст
- цветной вывод
Мои краткие советы по созданию хороших полутонов SVG:
- Не все изображения подходят для этого стиля. Жирные, высококонтрастные изображения, как правило, более удачны.
- Размеры файлов могут стать большими и непослушными, если вы выберете очень мелкую сетку. Примите шероховатость.
- Используйте пресеты для начала, чтобы понять, что работает.
- Используйте что-то вроде SVG Optimizer Джейка Арчибальда, чтобы сжать файл.
Четыре различных обработки полутонов применены к обложке The Velvet Underground Энди Уорхола.
Имейте в виду, что HalftonePro платный . В настоящее время это расходы в размере 15 долларов, но обратите внимание, что это единовременный платеж за пожизненное членство — в мире, полном месячных или годовых планов подписки. Я заплатил за это и до сих пор думаю, что это хорошая ценность.
Скрытое зерно
Возможно, самое скрытое использование текстуры, которое я видел в последнее время, демонстрируется в Гарвардском киноархиве . Открываешь сайт и думаешь: «Какая текстура? Этот сайт такой же плоский, как и все».
Harvard Film Archive применяет к изображениям зернистость анимационной пленки.
Однако обратите пристальное внимание на изображения, и вы начнете замечать на них гудящую энергию — что-то вроде мерцания целлулоида. Дизайнеры внешнего интерфейса добавили тонкую зернистость анимированной пленки на поверхность всех изображений. (Обратите внимание, однако, что этот эффект отсутствует в мобильном представлении на моем телефоне.) Я подозреваю, что очень немногие пользователи сознательно замечают это, но я бы сказал, что это определенно делает эти неподвижные фотографии похожими на кадры из пленки.
Как они это делают?
Крупный план эффекта зернистости пленки.
Для тех, кто интересуется техническими деталями, разработчики используют JavaScript для создания слоя холста HTML5 поверх каждого изображения. Каждый холст воспроизводит почти прозрачную анимацию случайного шума. Какой бы гениальной она ни была, сложность этой идеи только заставляет меня больше восхищаться простотой более ранней текстуры бумаги Google AI.
Создание собственных текстурных трендов
Как мы видели выше, текстура может иметь большое влияние на то, как люди воспринимают ваш дизайн. Быть в курсе текущих тенденций веб-дизайна необходимо для создания эффективного современного дизайна, но знание прошлых мод, которые существовали за пределами эфирной истории Интернета, поможет вам создать свой собственный стиль и оригинальные проекты.
В конечном счете, имидж, который пытаются создать ваши клиенты, и поставленные ими коммуникационные цели должны быть определяющими факторами в том, сколько и какие типы текстуры вы применяете.
Дизайн+3