Основні тренди у веб-дизайні

Це стара версія документу!

Вебдизайн (англ. web design) — це процес створення візуального та функціонального оформлення вебсайтів, що поєднує графічний дизайн, UX/UI, анімацію та навіть базові знання програмування. Найчастіше виконання різних етапів процесу вебдизайну забезпечують відповідні спеціалісти (менеджер проєкту, дизайнер, вебпрограміст, вебмайстер тощо), хоча деякі вебдизайнери можуть виконувати усе самостійно. Термін вебдизайн зазвичай використовують для опису проєктування й реалізації клієнтської частини вебсайту, включаючи верстку.

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

Особисті веб-сторінки були звичайним явищем, що складалися в основному зі статичних сторінок, розміщених на веб-серверах провайдерів, або безкоштовних послуг веб-хостингу. У Web 1.0 реклама на веб-сайтах під час серфінгу в Інтернеті була заборонена. Крім того, у Web 1.0 Ofoto є онлайн-сайт цифрової фотографії, на якому користувачі могли зберігати, ділитися, переглядати та друкувати цифрові фотографії.

Коротко кажучи, Web 1.0 — це мережа доставки контенту (CDN), яка дозволяє демонструвати частину інформації на веб-сайтах, який також можна використовувати як персональний веб-сайт. Користувач має спеціальні каталоги, які дозволяють йому отримати певну інформацію. Епоха Web 1.0 тривала приблизно з 1991 по 2004 рік.

Статичні сторінки.
Вміст подається з файлової системи сервера.
Сторінки, створені за допомогою Server Side Includes або Common Gateway Interface (CGI).
Рамки та таблиці використовуються для розміщення та вирівнювання елементів на сторінці.

2004 рік, рік коли слово Web 2.0 здобуло широкого розголосу завдяки Першій конференції Web 2.0 (пізніше відомої як саміт Web 2.0), яку провели Тім О'Райлі та Дейл Догерті. Термін Web2.0 ввів Дарсі Дінуччі ще у далекому 1999 році. Web 2.0 стала концепцією, послідовником Web 1.0, яка стосується веб-сайтів по всьому світу та підкреслює створений користувачами вміст, зручність використання та взаємодію кінцевих користувачів. Web 2.0 також називають соціальною мережею участі. Це стосується не модифікації будь-якої технічної специфікації, а зміни способу розробки та використання самих веб-сторінок.

Перехід на веб-сторінку тепер приносить більше користі завдяки зворотному зв’язку. Основними відмінними рисами ери Web 2.0 є взаємодія та співпраця між користувачами мережі. Простір набуває первинного виду соціальної мережі, де користувач може виступати, як креатором контенту, так і простим учасником. Може залишати реакції або бути простим глядачем у такій собі віртуальній спільноті. Загалом, Web 2.0 — це вдосконалена версія Web 1.0.

Технології веб-браузера використовуються в розробці Web 2.0, включаючи фреймворки AJAX і JavaScript. Останнім часом фреймворки AJAX і JavaScript стали дуже популярними засобами створення веб-сайтів 2.0.

Web 3.0 — ера еволюції використання та взаємодії веб-сайтів, яка включає зміну веб-сайту в базу даних з інтеграцією DLT (прикладом є блокчейн технологія), і ці дані можуть допомогти створювати смарт-контракти відповідно до потреб людини. Це дає змогу модернізувати серверну частину Інтернету після тривалого часу зосередження на зовнішній частині (Web 2.0 в основному стосувався AJAX, додавання тегів та інших інновацій у інтерфейсі користувача).

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

Семантична павутина (3.0) обіцяє створити «світову інформацію» більш розумним способом, ніж Google. Це особливо вірно з точки зору машинної концепції на відміну від людського розуміння. Семантична павутина потребує використання декларативної онтологічної мови, як, наприклад OWL, для створення предметно-специфічних онтологій, які машини можуть використовувати, щоб аналізувати інформацію та робити висновки, а не просто зіставляти ключові слова.

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

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

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

UI (User Interface) — це користувацький інтерфейс. Цим терміном описують те, як продукт виглядає: кольори, дизайн, анімація, контент, форми (кнопки, мітки, поля для вводу) тощо.

UX (User Experience) — це користувацький досвід. Тут мають на увазі емоції, які користувач отримує від час користування інтерфейсом на десктопі чи мобілці. UX це рівень того, наскільки юзеру буде просто чи складно зробити те, за чим він прийшов на конкретний інтерфейс (здійснити покупку, прокласти маршрут, подивитися ціну, дізнатися погоду і т.і).

Основну різницю між UI та UX можна описати так: UI-дизайнер вирішує, як виглядає кермо автомобіля, а UX-дизайнер — як це кермо працюватиме. До UX-дизайну належить функціонал продукту, шлях користувача по інтерфейсу, його взаємодія з ним та ті емоції, які він викликає у користувачів. UI — це робота над графічним втіленням функцій інтерфейсу.

UX-дизайнери аналізують дії користувачів, створюють прототипи поведінки, проводять тестування — щоб користувачеві було легше отримати необхідний йому результат. UI-дизайнер робить все, щоб пояснити користувачеві, як користуватися продуктом.

UX-дизайн — виявлення та розв'язання проблем користувача. UI-дизайн — створення інтуїтивно зрозумілих, естетично приємних, інтерактивних інтерфейсів.

Сучасні дизайнери повертаються до джерел інтернету. В епоху дев'яностих і початку нульових на сайтах було безліч настирливих гіфок. Кислотні відтінки, наклейки, якими прийнято прикрашати обкладинки зошитів, та піксельні шрифти знову у моді. Також для Web 1.0 були характерні сторінки на кшталт Geocities. Подібне оформлення викликає ностальгію, але незручно користуватися сайтом. Тому здійснювати повноцінний відкат у минуле не варто. Головне – комфорт та доступність інформації: кнопки на зрозумілих місцях, поєднання кольорів приємні оку, стікери не перекривають текст.

Web 1.0

Поняття Web 1.0 можна розглядати як “Інтернет тільки для читання”. Іншими словами, раніше Інтернет дозволяв нам шукати інформацію і читати її.

Можна використовувати елементи, притаманні сімдесятим. Інтернет тоді був недоступний, проте процвітала друкована продукція. Вулиці міста прикрашали різноманітні афіші з вигнутими літерами та простенькими ілюстраціями. Естетика хіпі вам на допомогу: барвисті візерунки, вініл і нотка бунтарства.

Змішування візерунків та форм дозволяє досягти дивовижних результатів. Використовуйте різнокольорові трикутники, квадрати та сміливі зигзаги з розумом. Бажано знайти баланс між яскравими елементами та порожнім фоном. Тоді дизайн буде менш громіздким. Іноді геометрію комбінують із фотографіями. Нехай на чорно-білому портфоліо з'являться напівпрозорі рожеві круги. Всередині можна вказати важливі моменти або залишити надихаючі послання. Оскільки вони виділяються, їх важко ігнорувати.

Зустрічаються об'ємні сфери, пружини та інші 3D-моделі. Щоб не перевантажувати сторінку, розташовуйте їх на великій відстані один від одного і відмовтеся від тіней. Якщо хочеться динаміки, додайте анімацію та дозвольте відвідувачам взаємодіяти з нею.

На курсах веб-дизайну навчать створювати макети, красиві та зручні для користувача. Але індивідуальний стиль доведеться шукати самому. Іноді він суперечить естетичним нормам. На щастя, один із трендів 2022 року – порушення правил. Йому притаманні спірні колірні поєднання, асиметрія та велика кількість графічних об'єктів. Все так погано, що навіть добре. Необруталізм теж йде проти системи. Сайти виглядають примітивними, не готовими до кінця. Відвідувач бачить порожній фон, стандартні шрифти та сирі фотографії. Якщо все це здається диким, розбавте дизайн елементами мінімалізму. Використовуйте більш сучасні шрифти та опрацюйте фото в одному стилі. Сайт виглядатиме приємніше, а перфекціоністи зможуть відвідувати його без шкоди для здоров'я.

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

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

Також актуальними є анімовані ілюстрації. Можна намалювати ознайомлювальну інструкцію, динаміку розвитку бренду. Вони завантажуються, як відео або GIF.

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

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

Цей напрямок мистецтва виник на ґрунті соціальних потрясінь у 60-х роках минулого століття. Художники пояснювали, що вміщують у своїх роботах красу та потворність, яскраві форми та похмурі імпульси підсвідомості. Картини були схожі на галюцинацію, сон, якому не судилося збутися. Порівнювати події двох епох неправильно, проте не можна заперечувати, що пандемія позначилася всіх сферах нашого життя. Складно залишатися тим самим, коли світ довкола тебе миттєво змінюється. Можливо, повернення психоделіки не випадкове Таким ілюстраціям властиві тонкі лінії та багата палітра фарб. Малюйте інопланетні краєвиди, грибні галявини, літаючі тарілки – все, на що здатна фантазія. Сюди віднесемо абстрактні візерунки: хаотичні плями та орнаменти, які ви могли спостерігати у калейдоскопах.

Цей вид контенту є актуальним для всіх соціальних мереж, і веб-дизайнерам варто взяти його на замітку. Припустимо, ви робите сайт-портфоліо для фотографа. Потрібно додати інфографіку, що відображає навички володіння редакторами, цікаві факти з біографії та приклади робіт. Можна вставити звичайні слайдери або розташувати фото по порядку, покладаючись на те, що людина перегортає стрічку до кінця. Інший варіант – підготувати відеопрезентацію. Щоб вона була динамічною, розбавте слайди анімованою графікою, текстом і таємницями закадрових зйомок. Люди побачать, як фотограф спілкується з моделлю, шукає ракурси, жартує та посміхається. Це може вплинути на рішення про співпрацю.

Продюсерська компанія STURDY займається організацією виступів Дрейка, Кендріка Ламара та інших виконавців. Що, як не відео, може передати атмосферу концерту? Спецефекти дуже вражають.

Хвилясті літери, що танцюють, рухаючись вгору-вниз, виглядають стильно. Такий текст важко прочитати з першого разу без помилок, проте він стане окрасою сторінки. Важливо вибрати правильне дозування. Нехай назва компанії згинається під неймовірними кутами, а основний блок інформації «залишається на місці». Любителі мінімалізму вирішили поекспериментувати з ефектами. Типографіка сайтів доповнюється 3D-моделями або анімаціями. При переміщенні об'єктів може змінюватися колір або розмір шрифту.

Дизайнери змішують кислотний зелений, жовтий, рожевий та інші кольори. Чи не перебір? Дивлячись на результат, ми поринаємо в ностальгію за дев'яностими. Робимо висновок: при використанні неонових відтінків можна вбити двох зайців одним пострілом. Бракує тільки наклейок та милих гіфок.

На рівні з яскравими переходами також популярні менш яскраві, плавні градієнти. Вони можуть бути напівпрозорими, становити верхній шар зображення. Спокійний градієнт, у якому світлий відтінок перетікає у темний, підходить для виділення текстових блоків та основного фону.

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