ПЕРЕЗВОНИТЕ МНЕ

Принцип цикады в веб-дизайне

2019-09-17 18:29:00 318
Прочитаешь за 20 минут
0 комментариев
#все#веб разработка#дизайн

Принципов веб-дизайна великое множество. Но есть один, который важен более остальных…

Кто бы мог подумать, что жизненный цикл одного рода насекомых может оказаться столь важным фактом познания, что повлечет другие открытия, и аж в веб-дизайне!

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

Через промежутки в 7, 11, 13 или 17 лет данные насекомые показывают себя миру, вылезая из-под земли, летают, совокупляются и отправляются на тот свет. Но почему именно такие временные промежутки жизненного цикла? Может быть, числа волшебные?

Ну не прям волшебные, но имеющие нечто общее: это простые числа, и их можно разделить на 1 и на самих себя. К ним относятся 1, 2, 3, 5, 7, 11, 13, 17, 19, 23 и пр. Но причем тут вообще это?

С помощью исследований установлено, что численность популяции живых организмов, в чей рацион входят цикады (а это осы, змеи, птицы, рыбы, пауки), отличается: цикл между высшей точкой и падением численности короче — от 2 до 6 лет. То есть, если бы цикады высовывались из нор каждый 12 год, то их поедающие твари со своим циклом в 2, 3, 4, 6 лет запросто синхронизировали биоциклы возрастания своей популяции с периодическим выходом цикад. И это был бы внутривидовой праздничный период пожирания цикад.

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

Алё, причем тут веб-дизайн?

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

Первым принцип цикад описал в 2011 году Алекс Уокер. Этот принцип позволяет создавать из нескольких простых изображений длинные уникальные фоны страниц.

Используя градиенты можно сэкономить еще больше пространства. Объем кода в CSS суммарно в несколько раз меньше веса PNG или JPG с фрагментами и не требует лишних серверных запросов. Код примеров выглядит так

В июне того же 2011 года Рэнди Меррил совместил линейные градиенты и принцип цикады. Тогда верному отображению градиентов мешала техническая отсталость браузеров – приходилось создавать массу одинакового кода с разными префиксами.

Принцип натуральной случайности с помощью CSS

Переходим к делу (давно пора). Создаем 3 квадратных пикчи в 29, 37 и 53 pixels, заливка в половину квадрата и полупрозрачна. Ну и ставим их в качестве фона в тестовой HTML-странице.

В результате получаем это.

Что мы видим на этих жалюзи? Квадраты ложатся друг на друга, появляются новые цветовые сочетания и оттенки! Здесь будет работать волшебство простых чисел, поэтому повторение паттерна не будет долгим: перемножим числа размеров квадратов (29 × 37 × 53) и получим… 56 869 pixels! Вы осознаете гениальность этого метода? Получается, что маленького размера файлы, общим объемом не более 7 кб, создают графическую архитектуру шириной в 57 000 pixels.

Как еще можно это применить?

Вот более натуралистичный пример, такую картину мы все видели – изображение завесы из театра. Есть вот такая пикча с хорошей графикой. Ее весьма удобно разделить на вертикальные блоки. Разделим изображение на эти «блоки сборки» (ruffle unit), они обладают большим значением, нежели размеры квадратов в пикселях.

Итак, вырезаем один из блоков размером 8 кб для генерации бесшовного фона. Получили вот такое изображение.

Блестящий пример бесшовного фона, с которого хейтим. Заметные границы блоков, механический характер и фальшивость театральной завесы заметит каждый. Неубедительно, в общем, выглядит.

На втором уровне применяем простое число 3. Вырезаем новый вертикальный блок и помещаем его внутри прозрачного PNG-блока, ширина которого будет 3 «блока сборки». Еще у этой картинки размываем правый и левый края, чтобы получилось плавное слияние с фоном. Размер этого блока – всего 15 кб.

Вот что получаем при слиянии фона с этим блоком. Результат уже более похож на реальность, изначальная неестественность разбавляется, но мозг все равно замечает механические повторяющиеся паттерны.

Переходим к третьему слою, где опять используем волшебное простое число, на этот раз – 7. Создаем прозрачный PNG-файл с шириной в 7 блоков, где на позициях «3» и «6» размещаем новые картинки. Также облегчаем интеграцию с общим фоном путем размывки границ – правых и левых сторон. Данный файл уже будет чуточку массивнее –  размером в 32 кб, но это приемлемо.

По итогу наложения этого файла на 2 предыдущих слоя получаем это. Неплохо, неправда ли? Почти идеально, хотя мозг может кривить бровь и пытаться скрупулезно отыскивать паттерны. Случайность в нижних слоях уже видна, поэтому глаз не натыкается на механические шаблоны.

Посмотрим на данный фон со стороны чисел, где каждый блок равен своему числу, и получим это: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3 … Закономерности здесь существуют, но их весьма сложно определить. А какой размер конечного файла имеем в результате? ВСЕГО 53 КБ. И можем еще более разнообразить данную комбинацию слоем в 11 блоков, но это уже на любителя.

Мы применяли простые числа на минимальных позициях – 1, 3 и 7. а могли взять и больше – 11, 13 и 17, и изображение бы вышло более визуально сложным. Но это все зависит от возможностей масштаба в зависимости от экранной ширины.

Цинь Шихуанди 2200 лет создал терракотовую армию в 8000 единиц для охраны своей могилы. Эти изделия – настоящее произведение искусства.

С помощью CSS и картинок можно собрать свою армию.

Так может выглядеть армия лего солдатов

В ней размещены следующие картинки: 2 изображения ног, 2 – рук, 2 – торса, 2- головы и фото для бэкграунда.

Проводя эксперименты  было выявлено несколько принципов , которые работают.

  • Порядок наложения текстур лучше, если организовать его в форме перевернутой пирамиды
  • Нижний слой можно сделать небольшим и повторяющимся, так как его закрывают верхние слои. Нижняя фактура видна не более чем на 20-40% процентов.
  • Верхний слой должен быть максимального размера, но наименее насыщенным по цветам. Делается это потому, что он не перекрывается другими слоями. Он должен быть схематичным и обобщенным – не надо использовать яркие, привлекающие внимание детали.

Поддержка браузеров

Применялась простая разметка, с  множествами бэкграундов. Поддерживается большинством браузеров –  Firefox 4, Chrome 10, IE9, Opera 11, Safari 5

В случае, если поставлена обратная совместимость – подходящим вариантом станет контейнер div и тайтлинг в html, body. Контейнер может не отражать семантику, что может весомо отразиться на сайте в целом. Примеры использования:

  1. Небо с облаками;
  2. Густые заросли джунглей;
  3. Ясное небо со звездами;
  4. Нескончаемый городской пейзаж;
  5. Уникальная текстура дерева.

Надеемся, вы сразу опробуете этот лайфхак. Ждите новых полезных поступлений в блоге!

Закажите крутой веб-дизайн для вашего бизнеса!

Читайте также:

Пожалуйста, оцените по 5 бальной шкале