Веб створювали з ідеєю апаратного агностицизму — філософією програмних продуктів, які є сумісними з будь-якою платформою.
Серед підходів, який допомагає забезпечувати такий доступ — це чутливий дизайн. До нього прийшли крізь випробовування методик, які відповідали на технічні обмеження браузерів. Одним з них був адаптивний дизайн сайтів.
Раптом у вас закралася думка, чи є взагалі між обома різниця, ви не одні. Досі існує плутанина між чутливим дизайном та адаптивним дизайном. Розберімося, хто є хто.
Аdaptive vs responsive web design: у чому відмінність
Адаптивний та чутливий дизайн або responsive web design — це два підходи до створення вебсайтів, пристосованих до різних розмірів екранів та пристроїв. На практиці адаптивний та чутливий дизайн часто поєднуються, тому чітка роздільна лінія між обома також стирається. Щоб зрозуміти, як відрізняється один підхід від іншого, варто заглянути в недалеке минуле.
Спочатку був adaptive web design
Приблизно у 2006 році більшість браузерів почали підтримувати технологію медіазапитів у CSS – мові стилів вебсайту. Це дало розробникам можливість створювати сайти, що підлаштовані одразу під декілька розмірів екранів. Ідея полягала в тому, щоб вебсайт використовував різні макети для різних розмірів екранів. У коді сайту розробники виставляють контрольні точки ширини екрана (breakpoints), на яких макет змінюється. Пізніше такий підхід отримав назву «адаптивний дизайн».
Суть адаптивного дизайну — поєднання макетів, які автоматично перемикаються залежно від ширини екрана. Такий метод дозволяє краще контролювати вигляд та відображення контенту на різних пристроях. Однак, щоб досягнути цієї адаптивності, потрібно створити багато макетів, але часто результат виглядає неідеально між заданими розмірами.
Приклад адаптивного дизайну
При розтягуванні вебсторінки в адаптивному дизайні розташування та розміри контенту змінюються, коли досягають контрольних точок. Зміна розміру вікна браузера змушує дизайн стрибати між різними макетами.
У гру входить responsive web design
Адаптивним вебсайтам все ще бракувало гнучкості між контрольними точками, а кількість пристроїв з різними розмірами екранів лише зростала. Тому постало запитання — а що як замість того, щоб адаптувати окремі дизайни під різні девайси, подивитися на них, як на частини одного досвіду? Відповіддю на питання став перехід до чутливого вебдизайну. Сам термін «responsive web design» запропонував Ітан Маркотт у 2010 році.
Ідея підходу полягає в поєднанні гнучких (fluid) макетів, що не обмежуються лише зміною одного дизайну на інший. «Гнучкий» означає використання відсотків або інших відносних величин для розробки макета. У такий спосіб дизайн перебудовується плавно й пропорційно розміру екрана.
Щоб розібратися, що ж таке чутливий вебсайт, достатньо почати плавно змінювати ширину вікна браузера. Сайт буде поступово стискатися або розширюватися, змінювати розташування елементів та макету, коли досягає певної ширини екрана.
Чутливий вебдизайн сайту — vovavindar.com
Як забезпечити чутливий вебдизайн
Переважно в сучасному вебдизайні потрібно проєктувати щонайменше дві версії сайту: для настільних комп’ютерів і для мобільних пристроїв. При розробці дизайну для настільних комп’ютерів у вас є велике полотно для експериментів і реалізації найкреативніших ідей. Проте, коли справа доходить до розробки мобільної версії сайту, виникає низка викликів, пов’язаних з меншими розмірами екранів та часто повільним підключенням до інтернету.
Вебсайт, який дружить з мобільними девайсами
Дизайн мобільної версії інтерфейсу потребує ретельнішої уваги. Адже тут ви працюєте з обмеженим простором для розташування елементів і при цьому маєте ще пам’ятати про зручну взаємодію користувачів із сайтом. Найголовніше — проста навігація. З нею ви забезпечуєте очевидний спосіб переходу між екранами та пошуку необхідних елементів протягом всього користувацького досвіду.
Бургер-меню є популярним вибором для мобільних версій сайтів, бо воно просте та компактне. Завдяки йому можна забезпечити чистий та збалансований дизайн та уникнути перенасиченості інформацією. Бургер-меню можете зустріти практично на будь-якому вебсайті:
1. phantom.app
2. www.gv.com
Досягти пальцем верхнього кута на сучасних великих екранах може бути ще тим завданням. Як дизайнери працюють з таким викликом? Іноді вони розташовують основні навігаційні елементи в нижній частині екрана:
Якщо навігаційне меню містить малу кількість посилань і кожне є пріоритетним, їх можна не приховувати:
1. holi.social
2. pi.ai
А ще Land-book є корисним джерелом натхнення для чутливого мобільного вебдизайну.
Зображення також мають бути відповідного розміру. Якщо не підготувати менші версії зображень для мобільних девайсів, вигляд сайту залишиться незмінним, але це буде недоцільним використанням трафіку користувачів. Зображення розміру для настільних комп’ютерів споживають у 2-4 рази більше трафіку, ніж необхідно. Це є критичним аспектом для мобільних користувачів, які часто підключені до мобільного інтернету. Підготувати декілька версій зображень можуть як дизайнери, так і розробники. Для ефективної координації важливо визначити одразу, хто цим займатиметься.
Ефективні розширення файлів
Зображення шкодять вебсайтам. Вони споживають найбільше інтернет-трафіку та суттєво погіршують загальну швидкість завантаження та відображення сторінок. Хоча веб був би швидшим з меншою кількістю зображень, такий підхід серйозно обмежує користувачів. Візуальна складова відіграє ключову роль у вебекосистемі, тому не варто жертвувати якістю контенту виключно для швидкості завантаження.
Оптимізація зображень — компроміс між якістю та продуктивністю. Ефективні розширення та розміри зображень покращують швидкість завантаження сторінок і впливають на SEO-рейтинг у пошукових системах. Формати зображень, відео та шрифтів, які допоможуть вам проєктувати кращі сайти:
- WebP є чудовою альтернативою JPEG, PNG та GIF і підтримується усіма браузерами. Зображення у форматі WebP зазвичай мають розмір файлу менше на 25-35%.
- AVIF є навіть новішим за WebP, підтримується в браузерах Chrome й Opera з 2020 року, у Firefox з 2021 року та у Safari з 2022 року. Як і у випадку з WebP, AVIF працює на вирішення усіх можливих сценаріїв використання растрових зображень в інтернеті: від анімації подібної до GIF, до прозорості схожої на PNG, а також високої якості при розмірах файлів, менших за JPEG або WebP.
- WebM — це відеоформат, від Google, який є ефективнішою альтернативою MP4 для вебу.
- WOFF2 є останнім форматом шрифтів, який підтримується всіма браузерами та має компактний розмір у порівнянні з TTF та OTF. Для шрифтів у вебі використовуйте WOFF2 та забудьте про всі інші формати.
Без тестування — нікуди
Тестувати результат потрібно і дизайнерам, і розробникам. Перший краще розуміє потреби користувачів і може виявити місця, де треба внести покращення, а останній занурюється у технічні аспекти проблем. Тестування чутливого вебсайту слід проводити на якомога більшій кількості різних пристроїв та сценаріїв, використовуючи Device Mode та Rendering в DevTools браузера. Це допоможе виявити технічні, дизайнерські та інші помилки.
Для кращої ефективності вам, як дизайнеру також варто ознайомитися з основами використання DevTools. Корисним застосунком для проведення тестування вебсайтів є спеціальний браузер Polypane.
Device Mode в Chrome DevTools
В ідеалі, ви маєте слідкувати за процесом розробки з початкових етапів. Адже виявлення та розв’язання проблем на ранніх стадіях девелопменту дозволяє в майбутньому уникнути негараздів і зекономити час та ресурси на виправлення помилок.
Що ще робити дизайнеру-перфекціоністу
Значна частина успіху вашого сайту безпосередньо залежить від розробника. Отже, нам, дизайнерам, важливо спілкуватися з цим спеціалістом, аби конкретизувати, що саме потрібно задизайнити для найкращого результату. Однак ваші можливості не обмежуються лише цим. Є кілька кроків, які важливо зробити, щоб сайти були максимально доступні та відповідали принципам чутливого вебдизайну й сучасним стандартам загалом. Кожен з них має свою унікальну цінність та обмеження.
Забезпечуйте доступний дизайн
Доступний дизайн (accessible design) робить цифрові продукти зручними для використання людьми з різним спектром можливостей. Коли мислите широко й передбачаєте багатоманітні людські досвіди та обмеження, ви дієте на випередження. Адже створюєте міцний фундамент продукту, який мінімізує потребу в майбутньому вкладати час і кошти, щоб переробити дизайн. Ось на що варто звертати увагу:
Контраст між кольорами. З високим контрастом кольорів зберігається виразність елементів. Елементи з низьким контрастом може бути важко розрізнити при яскравому або слабкому освітленні. Наприклад, коли людина переглядає сайт у сонячний день чи вночі, чи у неї погіршений зір, чи в її екрану погане кольоропередавання. Існує чимало інструментів для обчислення контрасту кольорів, включно з плагінами у Figma.
Усі вони використовують коефіцієнти контрастності. Останні показують, наскільки один колір відрізняється від іншого й записуються у вигляді співвідношень, наприклад 1:1 або 21:1. Чим більша різниця між двома числами в такому співвідношенні, тим більша відмінність в яскравості кольорів. Консорціум Всесвітнього павутиння (W3C) рекомендує такі співвідношення контрастності для тексту — великий текст повинен мати мінімальне співвідношення 3:1, а малий текст — 4,5:1.
Коєфіцієнт контрастності — Material Design
Розмір кнопок. Людина має без проблем потрапляти курсором чи пальцем по кнопках. У популярному дослідженні розміру кнопок та відстані між ними визначили стандарт, що підходить більшості користувачів, включно з людьми похилого віку. Згідно з ним, таким стандартом є розмір кнопок від 42 до 72 пікселів.
Це означає, що 42 пікселі — мінімальний, а 72 пікселі — максимальний розмір кнопки, оптимальний для користувачів. Якщо кнопка замала, по ній складно влучити курсором або пальцем на мобільних пристроях. А занадто великі кнопки можуть викликати враження візуального дисбалансу й відвертати увагу користувача від інших елементів.
Розмір шрифту та читабельність. Хоча немає офіційно встановленого мінімального розміру шрифту, загалом вважається, що 16 пікселів для основного тексту є гарною початковою точкою. Деякий текст може бути меншим, а заголовки більшими. Але основний текст, як той, що читаєте зараз, зазвичай має бути за розміром від 16 пікселів.
Додавайте скелетні екрани та лоадери
У сучасному цифровому світі користувачі мають високі очікування від веб- та мобільних застосунків, вимагаючи безперервний і якісний досвід взаємодії. Але розробники часто зіштовхуються із ситуаціями, коли доводиться працювати з важкими, ресурсомісткими компонентами або API, яким потрібен час, щоб завантажитися.
Саме тут на допомогу приходять індикатори завантаження, також відомі як лоадери. Вони допомагають керувати очікуваннями користувачів і надавати візуальну підказку того, що застосунок чи сайт активно працює над завданням.
За тим самим принципом діють скелетні екрани (skeleton screens), які підсилюють досвід користувачів. Вони спрямовують увагу людей на процес завантаження, а не на очікування. Суть скелетних екранів криється у самій назві — вони є візуальним каркасом або відображенням контенту, який згодом з’явиться на екрані. Зазвичай їх використовують під час завантаження додатка або при лінивому завантаженні (lazy loading) контенту. Скелетні екрани створюють враження коротшого часу очікування, у порівнянні з порожнім екраном і навіть лоадером.
Скелетний екран LinkedIn
Чутливий вебдизайн майбутнього
Нові технології розширюють можливості дизайнерів та розробників, щоб створювати захопливі, функціональні та пристосовані до потреб користувачів інтерфейси. Тому, якщо ви вже опанували базу вебдизайну, важливо нашаровувати на цей фундамент нові знання. Щоб бути в курсі трендів у сфері чутливого дизайну, існує безліч ресурсів, які можна використовувати. Головне, робити це системно. Наприклад:
- блоги про вебдизайн та розробку: читайте статті про останні тенденції в чутливому дизайні. Серед популярних ресурсів є Smashing Magazine, Webdesigner Depot, A List Apart та CSS-Tricks;
- дизайнерські конференції та події: слухайте лекції та виступи експертів на AwwwardsConf, An Event Apart, Google I/O, щоб дізнаватися про нові тенденції та технології;
- роботи топових дизайнерів: вивчайте дизайни спеціалістів, які вам імпонують. Це дозволить мати уявлення про сучасні підходи до чутливого дизайну та як їх застосовувати у власних проєктах.
І насамкінець
Чутливий дизайн сьогодні — не просто вимога часу, а підхід, який вже став стандартом. Адже так ви створюєте новий рівень користувацького досвіду, який справді орієнтований на людей. Це процес, в якому гармонійна співпраця між дизайнерами та розробниками, увага до потреб користувачів, новітні технології та розв’язання проблем на ранніх етапах розробки поєднуються в інтерфейси, варті любові аудиторії.