10 трендів у веб-дизайні, які можуть зявитися в 2016

16

Від автора: у даній статті ми розглянемо 10 трендів у веб-дизайні, які можуть з’явитися в 2016 році. Тенденції в дизайні можуть не змінюватися кілька років (а в деяких випадках і десятиліття), однак веб-дизайн досить швидко змінюється індустрія, де тренди приходять і також швидко змінюються
.

Деякі з трендів ми досі використовуємо: адаптивний веб-дизайн, flat дизайн, продуктивність і швидкість, вдосконалення користувальницького досвіду. І все ж, які нові або вже видимі на горизонті тенденції можна очікувати в 2016 році? Розглянемо деякі тренди, які в цьому році будуть все частіше з’являтися на увазі. І насамперед…

Продовжуються експерименти з навігацією і меню

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

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

Скролити або не скролити

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

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

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

Проектуйте модулі і компоненти а не цілі сторінки

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

Ми зрозуміли, що елементи необхідно дублювати під різні екрани, і що ці елементи повинні бути спроектовані таким чином, щоб вони працювали незалежно один від одного, але не втрачали зв’язку з іншою частиною сайту. Ми піклуємося не тільки про зовнішній вигляд компонентів з точки зору дизайну, але і про індивідуальному функціоналі елементів. Модульне і компонентне проектування дозволяє зберегти той же функціонал і дає можливість копіювати елементи в будь-яку точку на сайті. Відмінний ресурс по даній тематиці — Brad Frost’s Atomic Web Design.

Дизайн стає все більш плоским

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

В якості прикладу візьмемо логотип Google. Компанія зробила свій логотип більш плоским (прибрали скоси букв) і змінила шрифт. Було встановлено, що більш чіткий шрифт без зарубок допоміг скоротити вага файлу логотипу більш ніж на половину. Google також з’ясували, що такий шрифт легше читається на маленьких пристроях.

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

Зліт Material Design

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

Material design фокусується не на тактильних відчуттях, а на динамічних елементів, які нагадують нам папір і чорнило. Реалістичні тіні, накладення елементів, все взаємодія обмежується конкретним шаром і не впливає на інші.

Схоже, що ми досягли піку в плоскому дизайні, дизайнери починають шукати щось нове, і Google дає їм Material design. Мені здається, у 2016 році буде все більше сайтів з матеріальним дизайном.

Замініть стокові елементи чимось більш цікавим

10 трендів у веб-дизайні, які можуть зявитися в 2016

Все більше і більше сайтів замінюють стокові елементи, такі як стокові фотографії та іконки, на щось більш пророблена, більш особисте.

Деякі веб-сайти воліють використовувати свої фотографії на домашніх сторінках постів у блогах, а не стокові зображення. Інші сайти замінюють стокові зображення на відео, інфографіку або навіть GIF анімацію, щоб правильно передати повідомлення. Приміром, Flatiron Health стали використовувати свої фотографії, щоб зробити сайт більш привабливим, особистим і менш корпоративним.

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

Форми і поля введення стають полноэкранными

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

Все більше сайтів і додатків, які відображають форми і поля введення на весь екран (реєстрація та форма входу), а не роблять їх маленькою частиною сайту. Клікніть на кнопку «увійти» або «зв’язатися», і замість переспрямування на нову сторінку перед вами відкриється повноекранний макет з формою. Відмінний приклад – форма зв’язку на сайті Eighty East. При натисканні на «contact», відкривається повноекранна форма.

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

Багата і витончена анімація

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

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

Інший приклад-це суперечлива заміна зірочки обраного в Twitter на іконку сердечка. Раніше при натисканні на стару іконку анімація не була настільки деталізована, як з новою іконою. Така тонка анімація додає інтерактивності дизайну.

Людям важливіше функціонал сайту а не його зовнішній вигляд

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

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

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

Дизайнери переходять до проектування в браузері

10 трендів у веб-дизайні, які можуть зявитися в 2016

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

Веб-дизайнери як мінімум вміють кодувати на front-end стороні (HTML/CSS/JS), так що проектування в браузері має сенс. Тенденція переходу з програм типу Photoshop, Illustrator і Sketch в браузер тільки посилюється, і я вважаю, що все більше веб-дизайнерів почнуть працювати з HTML і CSS. А як ви думаєте, які нові тенденції з’являться в 2016?