15 Висхідних трендів веб-дизайну в 2017 році
Про те, які тренди будуть панувати в цьому році, була написана вже не одна стаття. Однак, по закінченні перших місяців 2017 року, можна робити висновки щодо того, які тренди з`являться і навіть наберуть популярність.
Для цього поста ми вибрали 20 кращих тенденцій, які, однозначно, наберуть обертів в 2017 році. Ці тенденції дизайну можуть ставитися до будь-якого веб-сайту, тому варто витратити трохи свого часу, щоб простежити за ними.
1. Значки «Про нас говорять»
Стартапи, блоги, проекти SaaS і навіть малий бізнес в даний час використовують значки «Про нас говорять» на своїх сайтах. Ці значки часто посилаються на статті в популярних блогах, онлайн-журналах та інших ЗМІ.
Мета полягає в тому, щоб затвердити сайт і завоювати довіру нових відвідувачів. Деяким людям простіше почати довіряти веб-сайту, коли вони бачать, що він був згаданий в авторитетних виданнях.
Насправді багато топові блоги надають особливу цінність таким експозиціям, так що це дійсно допомагає всім. Такі великі сайти часто випускають свої логотипи для Інтернету, але ви також можете знайти прозорі файли PNG або SVG, просто погуглити.
Також рекомендується вставляти посилання на оригінал статті із згадкою вашого сайту. Це доведе, що ви були дійсно згадані на сайті, і ви не просто стверджуєте це.
2. Навігаційні посилання з жирними великими літерами
Ви напевно бачили десятки гладких навігаційних меню, які все спираються на один і той же дизайн. Такі навігаційні посилання розрізняються за шрифтом і розміром, але у них зазвичай є схожі характеристики, такі як:
- Всі букви заголовні
- жирні
- рівномірно розташовані
- Вирівняні по правому кутку
Домашня сторінка Zazzle - яскравий приклад. Але ви можете знайти це на багатьох веб-сайтах стартапів, тому що це відмінний спосіб поділитися посиланнями, які легко прочитати і розглянути.
В основному ця тенденція зустрічається на сайтах, пов`язаних з бізнесом і технічними стартапами, але також може бути поширеною і в блогах.
3. Блог в стилі журналу
Блогінг зародився, як концепція ще на початку 2000-х років. Якщо ви запустили блог в 2003 році, то, швидше за все, він був чимось на зразок милого маленького хобі. Однак за період трохи більше десяти років ця тенденція радикально змінилася. Тепер блоги можуть забезпечити безперервний дохід, і вони починають виглядати більше схожими на цифрові журнали.
Подивіться на оригінальний дизайн TechCrunch, коли він вперше був запущений в 2006 році. Виглядає як стандартний блог на WordPress, правда?
Тепер подивимося на поточну домашню сторінку TechCrunch в 2017:
Він не тільки схожий на журнал, але і функціонує як журнал. TechCrunch публікує десятки (якщо не сотні) нових постів кожен день. Це першокласний джерело новин для стартапів.
Тенденції дизайну в стилі журналу мають велике значення. На головній сторінці використовується розділ з великою зображеної історією, а кожен пост має свій власний ескіз. Коли ви думаєте про це, то можна сказати, що TechCrunch не сильно змінився. Це все ще просто блог, але він розроблений і управляється як журнал, і це має значення.
4. Фонове відео
Авто відтворений звук - це, мабуть, самий дратівливий тренд в інтернеті. Але на подив, авто відтворюється відео (без звуку) - це швидко зростаюча тенденція. Ви можете побачити це на десятках бізнес-сайтів, де фонове відео займає весь екран.
Це дійсно хороша техніка, коли вона застосовується правильно. Поки відео має відношення до сайту і не перешкоджає перегляду контенту - фонове відео залишається відмінним ефектом для використання в вашому хедері.
5. Примарні кнопки
У міру того, як мінімалізм поступово просувається в веб-дизайні, з`являється багато нових тенденцій. Однією з таких тенденцій є поява примарних кнопок, які не мають внутрішньої заливки, але мають зовнішній кордон.
Велику частину часу ці кнопки контрастують з іншими, щоб привернути увагу. Ви можете побачити це на головній сторінці Instantmojo: зелена кнопка реєстрації знаходиться прямо поруч з примарною кнопкою - посиланням на демо.
Інші сайти зупинили свій вибір тільки на примарних кнопках для свого сайту. Прекрасним прикладом є новий макет на Вootstrap.
По суті, примарні кнопки найкраще працюють на сайтах, які схиляються до мінімалізму. Вони не підходять для кожного сайту, але їх використання зростає з кожним роком.
6. Модальне вікно
Модальні вікна дуже дратують, і складно уявити користувача, якому вони сподобалися. Однак вони, як доведено, збільшують реєстрації, а маркетологи не можуть ігнорувати методи, які працюють.
Виходячи з цього, можна з легкістю сказати, що використання модальних вікон буде продовжувати рости в 2017 році.
Це далеко не найулюбленіша річ серед дизайнерів, і більшість з них ніколи не додає модальні вікна на свої сайти. Але якщо метою є збільшення числа передплатників, то модальні вікна - вірний спосіб домогтися успіху.
Нові плагіни можуть призначатися для навмисного виходу модального вікна, яке з`являється щоразу, коли користувач намагається покинути сайт. Інші модальні вікна з`являються після кількох секунд або налаштовуються так, щоб відкриватися, коли користувач прокручує сторінку вниз досить далеко. Незалежно від того, як модальні механізми запускаються або як ви до них ставитеся, припускаємо, що вони будуть використовуватися протягом ще довгого часу.
7. Ілюстрації та векторне мистецтво
З новими програмами векторного дизайну, такими як Sketch і Affinity Designer, в Інтернеті з`явилася нова хвиля ілюстраторів. Графічний дизайн і дизайн інтерфейсу все більше об`єднуються в розробці сайтів, і сьогодні це відбувається більше, ніж будь-коли раніше.
Це означає, що ми будемо бачити набагато більше призначених для користувача іконок і Повносторінкове ілюстрації в найближчому майбутньому.
Багато ілюстратори є практикуючими художниками, тому, напевно, ми побачимо Повносторінкове фони, зроблені за допомогою цифрового програмного забезпечення для малювання, і представлені як концептуальне мистецтво.
8. Фіксовані прокручуваний сайдбарі
Перша хвиля фіксованого дизайну була орієнтована на навігаційні панелі. Все це дуже типове, особливо в гнучких конструкціях, де фіксовані панелі, відтворюють відчуття нативного мобільного додатка.
Але в 2017 році, ми побачимо ще один липкий елемент - липку бічну панель.
Майже кожен великий блог використовує цей вид липкою бічній панелі. Вона зберігає зміст в поле зору в будь-якому випадку і збільшує ймовірність, що користувачі будуть взаємодіяти з контентом бічній панелі.
Так чи інакше, за допомогою десятків безкоштовних плагінів jQuery, які можуть відтворити ефект липкого сайдбара, стало простіше ніж будь-коли встановити його на будь-якому веб-сайті.
9. Змісту
Нещодавно проведене тематичне дослідження показало, що контент в довгому форматі виграє у скороченого в обох рейтингах, а також за якістю утримання користувачів. Однак надавати такий контент не завжди правильно, тому як на деякі запити можна відповісти коротко.
Знову ж таки, при наявності довгого контенту, це природно побачити велику кількість змістів, доданих в статті. Ви можете бачити подібне на об`ємних оглядових сайтах або в статтях, які розбиваються на перераховані параграфи.
Розбивка статей на параграфи і додавання змістів може поліпшити користувальницький досвід і допомогти розділити читання на невеликі шматки. Змісту також можуть допомогти краще ранжувати ваш сайт! Якщо Google вважатиме вашу сторінку цінною, то ви можете отримати посилання переходу в результатах пошуку.
Відео: Тренди веб дизайну та UX 2016 року | Як збільшити конверсію сайту [DISH voice]
10. Яскраві барвисті дизайни
Ми не впевнені, що ця тенденція виникла з мінімалізму або як реакція на матеріальний дизайн Google. Але в Інтернеті можна наштовхнутися на десяток сайтів, які використовують світлі пастельні кольори, в поєднанні з іншими яскравими відтінками, створюючи дуже химерний вигляд.
Головна сторінка Rentberry - відмінний приклад, де також використовується купа градієнтів. Крім цього дизайн має вищезгадані значки «Про нас говорять», розташовані внизу! Дві тенденції на одному сайті.
11. Анимированная прокрутка
Веб-дизайнери знають про «scrolljacking» і як це жахливо. Однак це не те, що ми маємо на увазі, кажучи про "анимированной прокручуванні". Сьогодні можна побачити багато сайтів, які анімуйте контент при перегляді, коли користувач прокручує певну частину сторінки.
Дана тенденція зводиться в основному до домашніх сторінок стартапів і SaaS-компаніям, які хочуть додати трохи стилю в свій дизайн.
Не можна сказати, якщо це дійсно корисна тенденція. Звичайно ж, вона привертає увагу, але навряд чи може запропонувати більше естетики в дизайні. Проте, це тенденція, яка, здається, швидко поширюється, і якщо її використовувати з обережністю, то вона може бути дуже витонченою.
12. Односторінкові додатки (SPA)
Односторінкові додатки - це веб-сайти, створені виключно з AJAX. javascript витягує контент з сервера і завантажує його динамічно, щоб сторінка не перезавантажувалася.
Типовими прикладами є такі сайти, як Gmail і Facebook. Але з розвитком технологій javascript, розробляються все більше SPA. Навіть сайт СodeРen може розглядатися в якості SPA.
За допомогою потужних фронтенд-бібліотек, таких як React Aurelia, це буде навіть простіше створити SPA з нуля в 2017 році.
13. Перемикна панель пошуку
Раніше вважалося, що пошукові поля повинні бути видні десь на веб-сторінці, або в бічному меню, або в навігації. Але останнім часом можна помітити все більше полів пошуку, які приховано за замовчуванням і повинні бути переключені для перегляду.
Звичайно, зручна тенденція для економії місця на сторінці, зберігаючи при цьому функцію пошуку доступною. Якщо ви не знаєте, де помістити форму пошуку в новому дизайні, то можна використовувати перемикач поля пов`язаний із позначкою збільшувального скла в навігації.
14. Більше гамбургер-меню
Любіть його або ненавидите, але гамбургер-меню тут, щоб залишитися. Існує багато досліджень юзабіліті, які наводять аргументи проти прихованих від перегляду меню. Однак з невеликими екранами не так багато альтернатив, і на сьогоднішній день кращої альтернативи просто немає.
Іконки «гамбургер» поступово стають впізнаваним символам меню навігації. Так само як значок збільшувального скла на увазі "пошук", значок гамбургера з трьома барами скоро стане синонімічний з "меню".
Це вже актуально для більшості технічно підкованих людей. Але з кожним роком все більше людей починають виходити в Інтернет за допомогою смартфонів, і для них цей значок асоціюється безпосередньо з меню навігації.
15. Значки характеристик продукту
Відео: ТРЕНДИ ВЕБ-ДИЗАЙНУ З 90Х - Суворий веб # 123
Ця тенденція як ніколи набере обертів в 2017 році. Мабуть, це найпоширеніший спосіб поділитися характеристиками продукту на домашній сторінці.
Почніть зі складання списку функцій для вашого продукту. Продукт може бути чим завгодно, від SaaS-програми до теми WordPress, або навіть фізичного елемента.
Потім ви можете або самостійно створювати власні іконки або знайти набір значків для представлення цих об`єктів. Найкраще уникати універсальних характеристик, таких як "надійний" або "швидко", тому що більшість людей чекають цього.
Навпаки, відобразіть список елементів, які насправді важливі. Якщо це преміум тема для WP, то можна перерахувати, що він чуйний, скільки віджетів містить або як працює меню.
Ці іконки працюють як наочні посібники, щоб допомогти продати кожен продукт. Один тільки текст досить складно сприймати, в той час як візуальні ефекти набагато легше зрозуміти з першого погляду.
висновок
Існують і інші цікаві тенденції, які ймовірно завоюють популярність в цьому році і, можливо, визначать нові тренди вже на 2018 рік. Але поки про це складно судити. Залишається лише чекати і уважно стежити за тим, як буде розвиватися веб-дизайн в 2017.
