Як перестати створювати квадратні макети і навчитися мислити нестандартно

33

Від автора: в основі будь-якого веб-сайту лежить простий прямокутник. Така форма була обрана неспроста. Як і глиняні таблички, папірус і книги, сайти в основному складаються з рядків з буквами, словами і реченнями. Подібно книг наші камери роблять прямокутні знімки. Всі ми розуміємо, що з прямокутних цеглинок, як правило, складаються прямокутні стіни.

Більшість блоків, з яких складається сайт, прямокутні за замовчуванням. Це зроблено для розробників. Ми говоримо про тегах div, article, sections і т. д.

До появи CSS3 для того, щоб вставити на сторінку елемент непрямокутної форми, нам доводилося вдаватися до зображень. Нинішні ж веб-стандарти (наприклад, підтримка SVG) дають нам більше гнучкості в цьому відношенні.

Давайте розберемо кілька сайтів, які використовували сучасні веб-стандарти для створення макетів нестандартних форм. Ще більш важливо для нас зрозуміти, як такі сайти вплинули на користувачів.

Easee: простий приклад SVG

SVG розшифровується як Scalable Vector Graphic або масштабована векторна графіка. Сучасний і досить зрілий формат файлів, які можна масштабувати в обидві сторони без втрати якості. SVG відрізняється від стандартної сітки пікселів» (PNG, JPG і т. д.) і більше схожий на «рецепт до зображення». Це як приготувати пиріг в два рази більшого розміру, просто додавши в нього в два рази більше інгредієнтів.

Останнім часом сучасні браузери підтягнули підтримку SVG, що не може не радувати, так як SVG дозволяє створювати предмети унікальної форми і не впливає на швидкість завантаження сторінки. Давайте ближче познайомимося з першим прикладом.

Якщо поглянути на футер Easee, відразу помітний хвилястий фон. Фон адаптується під будь-який розмір екрану миттєво, так як це инлайновый SVG, а розмір файлу зовсім невеликий, менше 1Кб. Растрове зображення важило в 4 або 5 разів більше. Нижче я представив вам весь SVG код, в тому числі і легку тінь, яку ви могли й не помітити.

SVG фон не просто пропонує щось «інше», що відрізняється від стандартних рішень, він додає в дизайн дружелюбності, радості і персоналізації. Зі стандартним квадратом такого ефекту не було. Я говорив, що SVG зображення легко анімувати? Оновіть сторінку та придивіться!

Aardvark Brigade: стандартний приклад на растрових зображеннях

Розглянемо ще один приклад, який має той же ефект на користувача, але за допомогою растрових зображень. За допомогою панелі розробника в Google Chrome я проінспектував верхнє фонове зображення (під меню). Виявилося, що воно важить цілих 197Кб.

SVG файлів – це набір геометричних фігур. В SVG вкрай складно створити текстуру. Так як растрові зображення не вміють зростати без втрат якості, то зображення в цьому прикладі дуже широке (2300px). Це зроблено для того, щоб воно могло підлаштуватися під будь-який розмір екрану – ще одна причина великої ваги.

Чи варто воно того?

Щось говорило мені, що ні. Однак проведені мною тести сказали так.

Я перевірив сайт через tools.pingdom.com і виявилося, що сторінка завантажується за неймовірні 1.26 секунди. У дизайні повно текстур з растрових зображень, і я очікував більшого часу завантаження. Але тест показав, що сайт був сильно оптимізовано. Цей приклад підтверджує, що растрові зображення можуть послужити хорошу службу, якщо заздалегідь підійти до питань продуктивності та оптимізації (і знайти досить потужні сервери).

Зверніть увагу: в SVG можна вставити растрове зображення. Вийде якийсь гібрид, який буде добре підходити в окремих випадках.

Built By Buffalo: приклад CSS трансформацій

Досі наші приклади були досить складні. Для більш простих форм (шестикутник, трикутник або ромб) можна використовувати прості HTML і CSS.

Для створення шестикутників Built By Buffalo використовує кілька повернених трикутників. Сучасні веб-стандарти підтримують трансформації типу обертання, спотворення і масштабування, що дозволяє взагалі не використовувати зображення. Створені фігури можна стилізувати і анімувати за допомогою рідного коду.

Сайт Джойс Верк – мій самий улюблений приклад. Її стиль роботи з простими фігурами – це більше ніж просто візуальний стиль, це невід’ємна частина її бренду.

Джойс також використовувала сучасні веб-стандарти для спотворення звичайних блочних елементів. Якщо ви давно шукали легкий спосіб створення таких форм у веб-дизайні з хорошою підтримкою в сучасних браузерах, то цей спосіб для вас. Єдиний мінус у тому, що можна створювати тільки прості фігури.

Похилі секції стали дуже популярні у веб-дизайні. Якщо ви все думали, як зробити щось подібне, тепер ви знаєте.

Якщо прокрутити сайт Джойс вниз, ви помітите, що вона використала не тільки різні підходи до створення цих форм, але й ті, що ми вже згадали в статті. Це приводить нас до думки, що немає правильного чи неправильного способу. Все залежить від ситуації.

CSS маска

За допомогою властивості clip-path ми можемо створити маску на об’єкті. Однак підтримка даного властивості досі залишає бажати кращого. З цієї причини ви не знайдете багато прикладів використання даного методу в мережі. На CodePen є декілька прикладів, які можуть показати нам принцип роботи маски.

Як видно з прикладу Карен Менезес, ідея в тому, щоб створити форму і використовувати її в якості трафарету, після чого просто обрізати краю. В CSS є стандартні фігури, але за бажанням можна використовувати і свої власні на SVG. Поглянемо на щось складніше.

Я закохався в цей чудовий приклад, як тільки побачив його. Анімована gif’ка всередині SVG фігури. Хто міг подумати, що таке можливо? Зак Сосье навіть використовував тут новомодний трюк з режимами накладення. Саме тому трикутник з анімацією має блакитний відтінок. Режими накладення мають погану підтримку.

У масок безліч способів застосування. По-перше, з масками більше не потрібно створювати прості фігури, щоб потім скласти їх у більш складні. По-друге, маски роблять формат SVG більш корисним.

Маски дозволяють створювати повністю унікальні фігури (так як ми можемо підключити SVG) із звичайних квадратів без наслідків. Маски – самий нативний спосіб. Браузери прагнуть як можна швидше збільшити його підтримку, так як тоді фігури можна буде налаштовувати через код.

Ви можете резонно задуматися: «Ці нові властивості погано підтримуються. Навіщо мені взагалі витрачати на них час?».
Основна проблема полягає в тому, що з новими властивостями не буває так, що в одну мить вони знаходять хорошу підтримку. Як було з SVG, процес підтримки буде поступовим протягом декількох років. Якщо ви все будете чекати ідеального моменту, ви упустите можливість. Якщо коротко – не втрачайте можливості.

Висновок

Як і з усіма трендами, є велика різниця між використанням методу на високому емоційному підйомі і просто проходженням тенденції.

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

Вибраний вами методу буде залежати від складності фігури. А ви використовували прості форми у веб-дизайні? Що, по-вашому, було найскладнішим, і коштувало воно того?