1. асиметричні макети
2. Асиметричні розділові екрани
3. Асиметричні елементи дизайну
4. Інтенсивні колірні схеми
5. Hero - типографіка
6. Веб-сайти - бруталісти
7. пояснювальні ілюстрації
8. Фокусування на даних
9. довгі ськролли
10. цілеспрямована анімація
11. Інтерактивні та часткові фони
12. Органічні фігури (Blobs) і градієнти
13. Давайте створимо щось круте разом!

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

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

асиметричні макети

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

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

Асиметричні розділові екрани

Спліт-екрани і раніше були присутні в дизайні, але тепер вони ще й змішуються з асиметрією. У 2018 року ми входимо в світ асиметричних розділених екранів.

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

Асиметричні елементи дизайну

Ми можемо не тільки використовувати асиметрію в макетах на рівні сторінок, але і в невеликих елементах дизайну.

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

Інтенсивні колірні схеми

Інтенсивні і яскраві кольорові схеми стануть одним з найважливіших напрямків веб-дизайну в 2018 році. Те, що Pantone вибрала Ultra Violet для кольору року 2018 року навряд чи є випадковістю.

Редизайн банку Shawbrook - відмінний приклад того, як розумно використовувати сміливі фарби навіть на веб-сайті фінансової компанії, який традиційно асоціюється з «розумними», діловими квітами.

Hero - типографіка

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

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

Веб-сайти - бруталісти

Бруталістскіе сайти, ймовірно, є найкрутішою тенденцією, яку ми можемо очікувати в 2018 році. Але чи дійсно це те, що має на увазі їх назва? Згідно з визначенням Brutalist Websites - це досить міцні і безтурботні сайти, які виглядають комфортно і легко. Бурталізм можна розглядати як реакцію молодого покоління на легкість, оптимізм і легковажність сучасного веб-дизайну.

Хочете приклад? Відвідайте веб-сайт Designer That Reads. Як бачите - ніякої витонченості. Бруталістскіе сайти цілеспрямовано шокують і містять відразливу естетику, але саме цим і привертають увагу користувача, готуючи його до радикальних змін в веб-дизайні.

пояснювальні ілюстрації

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

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

Фокусування на даних

Розміщення даних на дисплеї тепер пропонує інше рішення для завоювання довіри веб-користувачів.

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

довгі ськролли

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

Наявність функції довгою прокрутки зазвичай позначається різними візуальними підказками. Приклад - новий веб-сайт Season fashion brand, на якому команда дизайнерів помістила значок зі стрілкою вниз з вертикальною міткою «Scroll» в лівому нижньому кутку. Цей крихітний, але видимий елемент готує глядачів до присутності даної функції і сприяє значно кращому UX.

цілеспрямована анімація

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

Bloom Inclusive Credit інтегрує анімацію на свій сайт неймовірно розумним чином. Тут так багато анімованих рухомих елементів, від яких створюється враження, що вся сторінка рухається. Дивно, але це відволікає від контенту не так сильно, як може здатися, оскільки кожна анімація має свою власну мету - допомогти користувачам зрозуміти, як використовувати продукцію.

Інтерактивні та часткові фони

Повноекранні відео файли були популярні останнім часом, і очікується, що вони залишаться такими і в 2018 році. Проте, в Інтернеті з'явилися дві нові фонові тенденції: інтерактивні та часткові фони.

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

Creative Wallonia - кращий приклад цієї тенденції. У наведеному нижче прикладі ви можете бачити рухомі барвисті частки в фоновому режимі. Хоча цей рух не контролюється глядачем, все ж воно додає дизайну інтерактивності.

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

Органічні фігури (Blobs) і градієнти

Органічні форми вже з'явилися в мережі, і ми можемо очікувати збільшення їх використання в 2018 році.

Blob служить для створення ілюзії руху і динамізму на веб-сторінці. Приблизно в 90% випадків Blob заповнюється градієнтом і знаходиться на нижньому шарі дизайну. Його стосунки з брендом або продукцією зазвичай неоднозначно, проте - це простий і не надто блоковий спосіб переходу між різними типами інформації.

Новий тренд використання Blob стає причиною використання градієнтів в веб-дизайні.

Відмінний приклад цієї тенденції - веб-сайт UnLeash 18 Conference.

І на закінчення ...

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

джерело

Давайте створимо щось круте разом!