Нові тренди веб-дизайну в 2017 році: Flexbox, CSS Grid, персоналізація

Які фактори стали очевидними взимку 2017 року, і вже впливають на веб-дизайн? Відповідь на це питання – у нашій свіжій статі 😉

Flexbox

Якщо ви ще нічого не знаєте про Flexbox, вас чекає дуже цікаве знайомство. Це відносно новий CSS-модуль для розмітки, який не тільки дає масу можливостей стосовно адаптивності, але і неймовірно допомагає дизайнерам в управлінні елементами на холсті при роботі, наприклад, в Sketch або Illustrator.

Оскільки всі сучасні браузери (ні, ми не беремо до уваги IE11) підтримують Flexbox, ви просто зобов’язані зануритися в його дивовижний світ (це не стосується тих, у кого основна частина аудиторії – користувачі IE).

Звичайно, для звикання до Flexbox може знадобитися деякий час, якщо вам дуже комфортно працювати з іншими, абсолютно несхожими модулями розмітки. Якщо вам потрібно допомогти розібратися з “гнучкими блоками”, спробуйте пограти з ними в Flexbox Game.

Складна розмітка CSS Grid

Якщо продовжувати розмову про нові цікаві модулі розмітки, то потрібно сказати про CSS Grid Layout. Наприклад, Кріс Хаус пише у своєму дуже крутому керівництві “A Complete Guide to Grid” наступне:

“Grid – це перший CSS-модуль, створений спеціально для вирішення проблем з розміткою, які постійно зустрічаються в розробці веб-сайтів і змушують кожного з нас придумувати обхідні шляхи”.

Flexbox допомагає вирішити такі серйозні і всім обридлі проблеми в веб-дизайні, як вертикальне центрування, хоча спочатку він не був призначений для розмітки цілих сторінок (хоча його можна для цього використовувати). Grid, навпаки, був створений для цілих сторінок. І він, як і Flexbox, дозволяє легко змінювати порядок елементів в залежності від типу і розміру пристрою.

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

Якщо ви хочете погратися з CSS Grid прямо зараз, зробіть наступне:

  • У браузері Chrome перейдіть на chrome://flags і включіть “Експериментальні функції веб-платформи” (“Experimental web platform features”)
  • У браузері Opera перейдіть на opera://flags і включіть “Experimental Web Platform features”
  • У браузері Firefox активуйте layout.css.grid.enabled (або встановіть Firefox Nightly)

Дизайн як спосіб показати контент користувачеві, задовольнити його потреби і отримати профіт

Зараз контенту приділяється особлива увага, і дизайн розглядається як спосіб найбільш ефективного оформлення контенту. Не дивно, що за цих умов потрібен індивідуальний підхід – надання інформації певній людині в певний час. Звичайно, все це робиться для того, щоб підштовхнути користувача до вчинення потрібних нам дій.

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

Демографія: Хто він, наш користувач? (Професійні і особисті якості) Звідки він прийшов?
Поведінка: Що користувач зараз робить? Що він робив на цьому сайті раніше?
Ситуація: Який пристрій і який браузер використовує користувач? Яким чином він зайшов на сайт? Користувач залогинений чи ні?

Ми вже бачили цікаві експерименти із застосуванням персоналізації на деяких сайтах. Більшість з них – це або ручне налаштування рекомендацій для користувачів, які рекомендації “також читайте”, або складні алгоритмічні рішення, схожі на ті, які випускає Facebook.

Простий приклад ручної персоналізації – Fubiz і його “Творчий пошуковик”, який пропонує креативний контент виходячи з налаштованих користувачем фільтрів про себе, своє місцезнаходження і про те, що він шукає. Звичайно, такий інструмент складно назвати “високотехнологічним”, але він пропонує функцію, якої немає в більшості “бібліотек креативу”.

Ще один приклад – новий блог Redshift від Autodesk.

Він пропонує вибір призначених для користувача налаштувань для відображуваного контенту, наприклад:

  • підписка на певні теми або авторів публікацій
  • настроювана стрічка статей
  • можливість миттєво відправити коментар чи поділитися в соціальних мережах
  • додавання в закладки

Звичайно, більшість з цих речей кмітливий читач зможе зробити самостійно, але Redshift значно спрощує ці функції. А ще така турбота про користувачів змушує дивитися на блог серйозніше – як на солідний освітній видання.

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

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

Позначки:

One Comment

  1. Влад

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.