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

21

Від автора: пам’ятайте 2015 рік? Apple Watch, новий iPhone 6S, новий парк юрського періоду. Все це було ніби вчора. 2015 рік залишив свій відбиток у всьому, в тому числі і на веб-дизайні. Які ж тренди веб-дизайну в 2105 році були основними?

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

1. Мінімалізм

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

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

Як написано в статті Тренди веб-дизайну 2015 & 2016, мінімалізм це ще одне візуальне перевагу, що просуває інші напрями, наприклад HD фон.

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

Поради

Економте місце з допомогою выдвигающегося або випадаючого меню

Незвичайна симетрія сайту зробить його більш привабливим, особливо асиметрія

Безкоштовні ресурси

Галерея односторінкових мінімалістичних сайтів – сайт-агрегатор односторінкових сайтів

Кращі мінімалістичні теми WordPress – зручний майданчик для розміщення мінімалістичних шаблонів, хоча не всі там безкоштовно.

Тренди дизайну: Витонченість і Мінімалізм – набір корисних уроків з мінімалістичним технік з 28 прикладами кращих дизайнів цього року.

2. Довга прокручування

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

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

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

Поради

Користувач не загубиться на вашому сайті, якщо на ньому буде прилипающее меню або меню з перепрыгиванием на обраний пункт. Такий тип меню обов’язковий на сайтах з прокруткою.

Розбавте процес прокрутки паралакс ефектами і анімацією.

Не слідуйте радам з цих статей Moz article і Quicksprout article, вони негативно впливають на SEO оптимізацію.

Безкоштовні ресурси

One Page Love – галерея кращих односторінкових сайтів, оновлюється регулярно.

Apple повертає колесо прокрутки – стаття з сайту TechCrunch аналізує, як Apple Watch можуть вдихнути нове життя в сайти з прокруткою.

Як створити сайт з паралакс ефектом – урок з двох частин з основ паралакс дизайну, включаючи кпрограммирование.

3. Новий Flat Дизайн

Сьогоднішній flat дизайн є еволюцією веб-дизайну і протилежний ідеї скеоморфизма. Новий, більш витончений виток розвитку flat дизайну — Ryan Allen назвав його Flat Design 2.0 – приділяє більше уваги до деталей:

Світлові відблиски і підкреслення

Градієнти та/або тіні

Більша увага до деталей

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

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

Поради

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

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

Безкоштовні ресурси

Тренди дизайну: Еволюція Flat Дизайну – безкоштовний набір уроків, містить 18 прикладів кращих дизайнів цього року.

25 макетів Flat дизайну для різних пристроїв: Шаблони flat дизайну під різні пристрої.

50 Flat іконок: набір з 50 безкоштовних flat іконок з сайту Digital Synopsis.

4. Потужна анімація

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

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

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

Вылетающее меню, прототип з сайту UXPin, з візуальним редактором ідеально. Принаймні, анімація надає життя нудним дій. Якщо навести вказівник миші на елемент меню, можна помітити, що пункт меню при натисканні не просто змінює свій колір.

Поради

У веб та звичайної анімації можна скористатися класичними правилами 12 анімації Disney.

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

Анімація під час завантаження допомагає користувачеві розрахувати час, а також допомагає розважити користувача, поки він чекає.

Легка фонова анімація, якщо вона ненав’язлива і не відволікає увагу, може додати енергійності застоявшемуся дизайну.

Безкоштовні ресурси

CSS3 Animation Cheat Sheet – Корисна колекція готової plug-and-play анімації дозволить з допомогою спеціальних класів застосувати анімацію до будь-якого елементу.

Web Animation – Постійно оновлюється гід по синхронізації та обчислення часу анімації на веб-сторінках та в API.

Interaction Design & Animations – Безкоштовний 80-ти сторінковий гід по методам інтерактивного дизайну, заснований на 47 прикладах кращих дизайнів за рік.

5. Яскраві кольори

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

У статті Тренди веб-дизайну 2015 & 2016 говориться, що цей рік буквально спалахнув у фарбах. Яскраві кольори відмінно поєднуються з flat дизайном. Крім всього іншого ці кольори також поєднуються і з іншими напрямками веб-дизайну.

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

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

Поради

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

Перед використанням колірної схеми, розберіться, як колір впливає на дизайн.

Безкоштовні ресурси

ColourLovers – Велике співтовариство, постійно діляться своїми колірними палітрами і обговорюють теоретичні аспекти впливу кольору на дизайн.

Tint UI – підбирач кольору, копіює hex коди кольорів. Є можливість вибору кольорової палітри певних платформ (Material Design, iOS і т. д.), брендів (Twitter, Firefox) або найбільш популярних кольорів.

Тренди дизайну: Живі кольори – Безкоштовний набір уроків по технікам кольору, містить 22 прикладу кращих дизайнів за поточний рік.

6. HD фон

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

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

HD дозволом вважається будь-дозвіл з щільністю точок на дюйм понад 200ppi (dpi). Звичайна роздільна здатність становить 72ppi. Зображення із звичайною щільністю на екранах HD виглядає розмито, починають з’являтися квадратики. HD ж зображення виглядають відмінно на моніторах з низьким дозволом. Це означає, що користувачі зі стандартним дисплеєм не помітять різниці, а користувачі з HD помітять.

Поради

Зазвичай співвідношення сторін пристроїв не збігається зі сторонами камери 1:1.5, так що доведеться обрізати зображення. Інакше ви не будете впевненим, яка частина зображення буде обрізана, а яка буде відображатися.

В SVG зображення масштабуються по лініях і точкам; а растрові формати (.jpg, .png .gif) масштабують попіксельно. Використовуйте SVG для абстрактної графіки, а растровий формат для реальних зображень і відео, так як у них фіксоване число пікселів – ось чому важливо спочатку працювати з HD файлами.

Безкоштовні ресурси

Покращуємо якість зображень на Retina дисплеях – поради з сайту Tuts+ по роботі з HD дисплеями, в тому числі і медіа запити.

Browser Shots – онлайн тести на роздільна здатність вашого екрана і можливостей браузера.

20 наборів розмитих HD фонів – колекція безкоштовних розмитих HD фонів.

7. Виразні фотографії

Завдяки розвитку HD екранів у веб-дизайні почали використовувати фотографії високої якості.

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

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

Поради

Поєднуйте стокові фотографії з замовними так, щоб перші виглядали, як замовні – наприклад, поєднання елементів теми і ваших елементів дизайну.

Безкоштовні сервіси стічних фото Unsplash, Pixabay, Pexels.

Поекспериментуйте з накладенням колірних фільтрів на зображення. Наприклад, жовтий відтінок додасть сірому фото оптимістичності.

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

Безкоштовні ресурси

10 помилок при використанні стічних фотографій — стаття з сайту Design Shack розповідає про 10 найпоширеніших помилок при використанні стічних фотографій.

TinEye Reverse Image Search – Інструмент, за допомогою якого можна дізнатися, з якого сайту взято фото.

The Ultimate Guide to Beautiful DIY Photography – гід для початківців по створенню веб-фотографій.

8. Динамічна типографіка

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

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

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

Поради

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

Пам’ятайте основне завдання шрифтів – чіткість і розбірливість тексту. Якщо шрифт нечитаний, то абсолютно не важливо наскільки він незвичайний.

Динамічна типографіка може зробити з тексту цукерку. Часто можна зустріти сторінки з гарним текстом поверх великого центрального зображення.

Безкоштовні ресурси

Тренди в дизайні: Драматичні шрифти – безкоштовний гід по техніці шрифтів, містить 21 приклад кращих дизайнів за цей рік.

Awwwards Typography in Web Design Gallery – топ сайтів з кращої типографікою, постійно оновлюється.

Топ 41 кращих шрифтів за 2015 — Elegant Theme позбавив вас від пошуку з тисячі шрифтів і склав список кращих за рік.

9. Цілковите взаємодія

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

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

Елементи, за якими можна клікнути, або провести пальцем

Push повідомлення

Використання персональних даних (геолокація)

Контроль відображення вмісту

Навігація на основі прокручування сторінки

Плавні переходи і циклічні функції

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

10. Картковий макет

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

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

Поради

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

Відстань між карток, «канавки» повинні бути чітко визначені. Не змушуйте користувача гадати.

Безкоштовні ресурси

Як створити картковий інтерфейс з допомогою Sketch App 3 – урок по створенню простого карткового макету за допомогою Sketch (перспективне дизайнерське додаток).

10 прикладів Material Design карток за допомогою CSS і HTML – ресурс з готовими Material Design картками.

Техніки дизайну: Картки і мінімалізм – безкоштовний гід по картковому інтерфейсу і мінімалістичним методів, 43 способу застосування.

Висновок

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

Якщо у вас є бажання більш детально вивчити основні напрямки веб-дизайну, прочитайте безкоштовний гід на 185 сторінок Web Design Trends 2015 & 2016. У ньому представлені всі 10 технік, описані в сьогоднішній статті. Крім того, в гіді містяться ще маса інших кращих практик і понад 100 безкоштовних ресурсів.

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

Прочитайте про те, як користуватися цими трендами. У книзі представлено понад 160 прикладів з такими сайтами, як Google, Apple, Dropbox, Spotify, BMW, Versace, Reebok, Adidas і т. д.