20 Зростання тенденцій веб-дизайну для спостереження у 2017 році
Минув ще рік, і дизайнери дивляться в майбутнє. Багато перспективні тенденції дизайну Минулого року я висвітлював перші тенденції дизайну 2016 року, і ми бачили багато змін Відтоді.
Так, для цього посту я вибрав 20 найкращих тенденцій що я помітив набирає сили в 2017 році. Ці тенденції дизайну може застосовуватися до будь-якого веб-сайту, так що тримайте свої очі на ці методики, коли ми рухаємося до 2017 року і далі.
1. “Увімкнено” значки
Стартапи, блоги, проекти SaaS і навіть малі підприємства тепер використовують “як показано в” значки на своїх веб-сайтах. Ці значки часто посилання на статті з основних блогів такі як HuffPo, Forbes, CNN, Fox та інші інформаційні відділення.
Мета полягає в тому, щоб перевірити сайт і будувати довіру з новими відвідувачами. Комусь легше довіряти веб-сайту, коли бачать, що це було згадується в авторитетних публікаціях.
Насправді багато топ-блогів оцінити експозицію, тому вона дійсно допомагає всім, хто бере участь. Ці великі сайти часто випустити свої логотипи онлайн але ви також можете знайти прозорі PNG-файли або SVG-файли лише за допомогою googling.
Також рекомендується вам посилання на оригінальну статтю згадуючи ваш сайт. Це доводить це вас справді згадували на сайті, і ви не просто складаєте претензії.
2. Сміливі всі посилання для навігації
Я бачив десятки елегантних навігаційних меню всі покладаються на цю ж конструкцію. Ці навігаційні посилання відрізняються шрифтом і розміром але вони зазвичай мають подібні особливості, як от:
- Всі ковпачки
- Жирний
- Рівномірно розташовані
- Вирівняно в правому куті
Домашня сторінка Zazzle є прекрасним прикладом. Але ви можете знайти це на багатьох стартап-сайтах тому що це a чистий спосіб обміну посиланнями які легко читаються та легко переглядаються.
В основному я асоціюю цю тенденцію з підприємствами та технологічними стартапами але вона також може поширюватися на блоги.
Зверніть увагу на наступний раз, коли ви побачите цю тенденцію, тому що вона всюди. І я сподіваюся, що він продовжуватиме розвиватися і до 2017 року.
3. Блоги журналів
Блоги були такою нішовою концепцією ще на початку 2000-х років. Якщо ви запустили блог в 2003 році, його вважали милим маленьким хобі. Тільки за десять років ця тенденція радикально змінилася. Тепер блоги можуть забезпечити повний робочий день, і вони починають виглядають набагато більше як цифрові журнали.
Поверніться до оригінального дизайну TechCrunch, коли він був запущений у 2006 році?
Тепер перегляньте поточну домашню сторінку Techcrunch у 2017 році:
Це не тільки виглядає як журнал, він також функції, як одна. TechCrunch публікує десятки (якщо не сотні) нових повідомлень щодня. Вони є вихідним джерелом # 1 для запуску новин.
Тенденції дизайну в стилі журналу мають велике значення. На домашній сторінці використовується a великий розділ історії, кожен пост має власну мініатюру, і сторінки статей навколо заголовка.
Коли ви думаєте про це, TechCrunch значно не змінився. Це все одно “просто блог”. Але він розроблений і керований як журнал, і це робить різницю.
4. Відеовідомості
Звук для автоматичного відтворення є, мабуть, найприкрішею тенденцією в Інтернеті. Але дивно, автоматичне відтворення відео (без звуку) є швидко зростаючою тенденцією. Ви можете помітити це на десятках ділових сайтів, де є відео-фон приймає весь екран.
Мені дуже подобається ця техніка, коли вона застосовується належним чином. До тих пір, поки відео відноситься до сайту і не перешкоджає вмісту, Я думаю, що це прохолодний ефект для використання в заголовку.
5. Кнопки привидів
Як мінімалізм живить далі у веб-дизайні з'являються багато нових тенденцій. Однією з таких тенденцій є підйом кнопок привидів які не мають внутрішнього наповнення, але мають зовнішню межу.
Велику частину часу ці кнопки контраст з іншими звернути увагу. Ви можете побачити це на домашній сторінці Instantmojo із зеленою кнопкою реєстрації розташований поруч кнопка-привид, що посилається на демо-версію.
Інші сайти прийняті стиль чисто-привидного дизайну до своїх кнопок по всьому світу. Чудовим прикладом є нова розкладка Bootstrap.
Я думаю, що кнопки-привиди працюють на сайтах до мінімалізму. Вони не можуть бути дуже придатними для кожного веб-сайту, але я бачу їхнє збільшення з кожним роком.
6. Модульне вікно opt-ins
Модальні вікна надзвичайно дратують, і я не можу уявити, що їх хотів би користувач. Однак доведено, що вони збільшують кількість реєстрацій, і маркетологи не можуть ігнорувати методи, які працюють.
Ось чому я вважаю, що модальні вікна будуть включені продовжуйте підніматися у 2017 році.
Вони не моя улюблена річ, і я ніколи не додаю їх до своїх веб-сайтів. Але якщо мета полягає в збільшенні реєстрації, то модальні вікна є надійним способом просування.
Навіть нові плагіни цільового виходу виходу котрий запускає модальний щоразу, коли користувач намагається залишити сайт. Інші модали з'являються через x секунд або встановлюються для відкриття, коли користувач прокручується вниз досить далеко.
Незалежно від того, як модальні механізми спрацьовують, як вони розроблені, або як ви ставитеся до них, я думаю, що вони будуть на довгому шляху.
7. Ілюстрація та векторне мистецтво
З новими програмами дизайну вектор, такими як Sketch і Affinity Designer, з'являється нова хвиля ілюстраторів, що проникають у Інтернет. Графічний дизайн та дизайн інтерфейсу постійно зливаються з більш багатопрофільними дизайнерами, як ніколи раніше.
Це означає, що ми побачимо набагато більше власних значків і ілюстрації на всю сторінку в недалекому майбутньому.
Багато ілюстраторів практикуються художниками, тому я думаю, що ми побачимо більше повних фонів сторінок зроблені з цифровим програмним забезпеченням живопису, надані в деталях, як концепт-арт.
8. Виправлені прокручування бічних панелей
Перша хвиля фіксованого дизайну зосереджено на панелях навігації. Все це дуже поширене, особливо в реагуючих конструкціях, де встановлено навігаційну панель повторює відчуття рідної мобільної програми.
Але в 2017 році я очікую побачити ще один липкий елемент-липку бічну панель.
Майже кожен великий блог використовує цей вид липкої бічної панелі. Це зберігає вміст постійно збільшує ймовірність того, що користувачі зроблять це взаємодіяти з вмістом бічної панелі.
Плюс десятки безкоштовних плагінів jQuery, які можуть повторити ефект липкої бічної панелі. Це легше, ніж будь-коли, щоб налаштувати це на будь-якому веб-сайті.
9. In-page зміст
Нещодавній приклад дослідження показав, що довгомірний вміст перевершує короткий як в рейтингах, так і в якості збереження користувачів. Зрозуміло, це не завжди так, оскільки на деякі запити можна швидко відповісти.
Але з набагато більш тривалим контентом в Інтернеті, це природно бачити більше статей додано до статей. Ви побачите це на довгих сайтах огляду або в статтях, які розбиваються на перелічені елементи.
Додавання змісту може покращити роботу користувачів і допомогти розбийте читання на дрібніші шматки. Зміст також може допомогти вашому сайту краще! Якщо Google знаходить вашу сторінку цінною, ви можете отримати посилання на перехід у результатах пошуку.
Це може бути правдою, що зараз ЦК є досить дефіцитними. Але я сподіваюся, що ця тенденція буде підриватись у 2017 році та через багато років.
10. Яскраві барвисті конструкції
Я не впевнений, що ця тенденція виникла з мінімалізму або як реакція на матеріальний дизайн Google. Але я натрапив на десятки веб-сайтів, які використовують яскраві пастельні тони змішані з іншими яскравими відтінками створити дуже химерний вигляд.
Домашня сторінка Rentberry - прекрасний приклад, який також використовується тонн градієнтів. І це навіть має вищезазначене “Увімкнено” значки, розташовані під ним! Дві тенденції на одному сайті.
Ви помітите, що кольори не пронизуйте всю сторінку, і вони приглушені з іншими відтінками білого та сірого.
Я бачив їх достатньо яскраві кольорові схеми вірити, що вони піднімаються.
11. Прокрутіть анімацію
Веб-дизайнери знають про прокручування і як це жахливо. Але це не те, що я мав на увазі з назвою “прокручування анімації”. Зараз я бачив багато сайтів анімація вмісту для перегляду під час прокручування певного розділу сторінки.
Ця тенденція в основному обмежується запуском домашніх сторінок і компаніями SaaS які хочуть деякі pizzazz в їх дизайн.
Я не можу сказати, чи є це особливо корисною тенденцією. Це звичайно не захоплює очі але я не думаю, що він пропонує набагато більше естетики. Тим не менш, це тенденція, яка, здається, швидко поширюється і коли використовуються економно вона може бути дійсно акуратною.
12. Односторінкові програми (SPA)
Програми для однієї сторінки - це веб-сайти побудований виключно з викликами Ajax. JavaScript витягує вміст з сервера і завантажує його динамічно, так що сторінка ніколи не оновлюється.
Типовими прикладами є такі сайти, як Gmail і Facebook. Але з більше технологій JS, Я зауважу, що більше і більше СПА розвивалися весь час. Чорт, навіть CodePen можна вважати SPA.
Завдяки потужним бібліотекам інтерфейсу, таким як React & Aurelia, створити СПА з нуля в 2017 році буде ще простіше.
13. Поворотні панелі пошуку
Раніше це було полями пошуку завжди були на увазі десь на веб-сторінці, або на бічній панелі, або на навігації. Але останнім часом я помітив набагато більше пошукових полів за замовчуванням приховано, і має бути перемкнувся на перегляд.
Звичайно зручна тенденція заощаджуйте місце на сторінці поки ще збереження доступності функції пошуку. Якщо ви не впевнені, де можна розмістити форму пошуку в новому дизайні, можна скористатися полем перемикання, пов’язаним із піктограмою збільшувального скла в навігації.
14. Блокування повідомлень
Не можна заперечувати того факту блокування оголошень зростає. Питання лише в тому, як видавці зроблять цю тенденцію. Деякі сайти ввічливо додавати повідомлення до рекламних місць як Time.com. На Hongkiat, ви помітите внутрішні оголошення для заповнення недійсними що посилаються далі на сайт.
Однією з серйозних тенденцій, яку я бачу, є збільшення блоки блоків вмісту. Це техніка “блокувати блокувальники оголошень”. Ця функція вже існує на багатьох великих сайтах, таких як Business Insider та Forbes. На жаль, це завдає шкоди як користувачеві, так і видавцю, і все це випливає з неякісних рекламних методів.
Зрештою, неважливо, хто ви звинувачуєте або де ви стоїте в дебатах, що блокують оголошення. Більше людей встановлюють плагіни adblock, і я очікую більше видавців, щоб відсунути.
15. Чисті іконки SVG
Графіка SVG вже просочилися в Інтернеті, але з кожним днем вони зростають. І у мене є відчуття, що 2017 рік буде величезний рік для SVG в Інтернеті.
Ви можете знайти тисячі безкоштовний набір іконок SVG на сайтах, таких як Flaticon, якщо ви знаєте, як шукати. Але ви також можете коду SVG в HTML, наприклад, використовуючи цей приклад у CodePen.
Отже, у дизайнерів є спосіб використання SVG, а розробники також мають можливість використовувати SVG. Сучасна підтримка браузера виглядає добре по всьому борту, так що проблем з сумісністю немає. Все, що потрібно, достатньо дизайнерів визнати силу SVG і почати їх використовувати!
16. Adobe XD
Adobe виганяє повна бета-версія Adobe XD у 2016 році, і з тих пір швидко зростає. В даний час підтримує як Mac, так і Windows, і це на етапі тестування перед тим, як повністю розгорнутий.
Ви можете знущатися над ідеєю будь-якої програми, що обганяє Sketch, але Adobe є головною програмною компанією творчої роботи з розуму. Плюс ескіз як і раніше Mac-тільки в той час як Adobe дивлячись на підтримку всіх.
Я твердо вірю, що ми будемо читати більше про Adobe XD у наступному році. Це може стати програмним забезпеченням для переходу проектування макетів інтерфейсу користувача-таким чином, ми, нарешті, можемо використовувати Photoshop як інструмент для маніпулювання фотографією.
З появою нового програмного забезпечення, приходить десятки Навчальні посібники та безкоштовні GUI набори так само. Ви можете знайти багато безкоштовних Adobe XD у Dribbble разом з два нових XD-орієнтованих freebie сайтів Designmine і XD Гуру.
17. Більше меню гамбургерів
Любіть його або ненавидять його гамбургер тут залишається. Існує багато досліджень зручності сперечатися проти меню, приховані від зору. Але з невеликим екраном і лише такою кількістю альтернатив на даний момент не існує кращої альтернативи.
Гамбургер іконки повільно стають впізнаваними символами для навігаційних меню. Так само, як це означає, що значок збільшувального скла “пошук”, значок гамбургера з трьома барами скоро буде синонімом “меню”.
Це вже вірно для більшості технічно підкованих людей. Але з кожним роком все більше людей отримують смартфони і починають переглядати мобільний веб. І вони навчаються пов'язати цей гамбургер з меню навігації без кінця.
18. Піктограми функцій продукту
Я писав про цю тенденцію на Treehouse, але недавно не згадав про це. І в 2017 році ця тенденція є буде величезний. Це, мабуть, найпоширеніший спосіб поділитися функціями продукту на домашній сторінці.
Ви починаєте складання списку функцій для вашого продукту. Продукт може бути що завгодно від програми SaaS до теми WordPress або навіть фізичного елемента.
Тоді ви можете дизайн користувача іконки або знайти набір іконок для представлення цих функцій. Найкраще уникнути загальних особливостей як от “надійний” або “швидко” тому що більшість людей очікують цього.
Замість цього перелічіть функції що насправді має значення. Якщо це тематика преміум-класу WP, можливо, список, що він реагує, скільки віджетів він постачає, або як працює меню.
Ці піктограми функцій працювати як візуальні ефекти допомагати продавати кожну функцію. Текст - це важко вживати але візуальні зображення набагато простіше зрозуміти з першого погляду.
19. Вище згоду CTA
Заклик до дій традиційно розміщувалися по всьому веб-сайту. Але з відвідувачами витрачати менше часу на веб-сайтах, дуже важливо мати сильний CTA прямо над згином.
Ці заклики до дій можуть бути кнопками, формами ввімкнення або іншими входами спонукати людей до певних дій наприклад, реєстрація або читання повідомлення в блозі.
Я не можу розповісти, як розробити CTA або як оптимізувати його для переходів. Але я можу сказати, що тенденція, здається, розміщує ці CTA над згином і в чистому вигляді для всіх відвідувачів.
20. Менші області вмісту
Монітори настільки великі, що більшість веб-сайтів повинні встановити максимальну ширину. Прочитати речення набагато важче, якщо вони 2000px у порівнянні з шириною лише 700px.
Менший вміст легше споживати, і в кінцевому рахунку створює кращий досвід роботи на веб-сайтах, що містять важливі матеріали.
Думаю, більше дизайнерів це усвідомлюють і будуть повільно зменшити розмір областей їхнього вмісту. Я вважаю за краще максимальну ширину 750px, але ви могли б піти як 600px або менше.
Коротші абзаци с менше пропозицій і менших областях вмісту буде завжди підвищити читабельність. Основні публікації, такі як Нью-Йорк Таймс, можуть відхилятися від власних структурних принципів. Але для простого блогу або бізнес-сайту ця тенденція рухається в напрямку довший вміст з меншими пунктами та областями вмісту.
Підведенню
Є багато інших тенденцій, які я не зміг покрити на цій посаді, але я думаю, що ці 20 найбільш цікаві. Коли ми рухаємося вперед у 2017 році, має бути очевидним, які тенденції вибухають, а які - ні.
І якщо у вас є інші ідеї або пропозиції для майбутніх тенденцій дизайну, не соромтеся залишити коментар нижче.
