- 1. Принцип «mobile-first»
- 2. Ілюстрації «від руки»
- 3. Анімація
- 4. Сміливі кольору
- 5. Незвичайний скролінг і паралакс
- 6. Асиметричні шаблони
- 7. Тіні
- 8. Великі і жирні шрифти
- 9. Ультрамінімалізм
- 10. Мікс горизонтального і вертикального тексту
- 11. «Модуляція»
- 12. Перекриття зображень текстом
- 13. двоколірні
- 14. «Геометричні» шрифти
- підводимо підсумки
З кожним роком зростає число сайтів, що дивують і захоплюють новими фішками в оформленні. Два роки тому ми розмістили перекладну статтю про тренди в веб-дизайні 2015. Що змінилося з тих пір? Як і раніше робиться акцент на якісній графіці і мінімалізмі, великих шрифтах і інтерактивних елементах (наприклад, приховане меню). Однак технології не стоять на місці, і веб-дизайнери експериментують з динамікою, анімацією, розташуванням об'єктів на екрані при цьому не на шкоду продуктивності сайту. Пропонуємо вашій увазі огляд трендів, які, за традицією, задають наші західні колеги.
1. Принцип «mobile-first»
Назва принципу говорить сама за себе: дизайн розробляється, насамперед, з урахуванням зручності перегляду на екранах мобільних пристроїв. Цей принцип не новий, але так як більше 60% користувачів виходять в інтернет саме зі смартфонів, він став визначальним у цьому році. Оскільки екрани мобільних пристроїв мають малі розміри, дизайнери передбачають максимально інформативне, але при цьому ефектне відображення контенту. Те ж саме стосується текстів - воді і порожнім фразам в концепції «mobile-first» немає місця.
2. Ілюстрації «від руки»
Це прекрасний спосіб оригінально передати ідею або настрій. Намальовані від руки ілюстрації унікальні, вносять різноманітність і нотки неформальності у взаємодію користувача з сайтом, роблять дизайн теплим і дружнім.
Приклад ілюстрації з сайту dropbox.com
Талановиті ілюстратори можуть створити зображення, які найкращим чином будуть відповідати бренду і фірмової стилістики, з їх допомогою можна добитися глибокої персоналізації.
3. Анімація
Дизайнери поступово відходять від використання тільки статичних зображень і шукають нові способи залучення аудиторії, щоб виділитися на тлі інших. Брендам потрібна персоналізація, і анімація, багато в чому завдяки розвитку HTML5, CSS і jQuery, грає тут не останню роль.
Анімація може бути реалізована по-різному: від незвичайної смуги стану завантаження, яка скрасить очікування, до зміни зовнішнього вигляду об'єкта при наведенні курсору. Також зустрічається повноекранна анімація, яка є центральним елементом, який фокусує увагу користувача.
Але анімацію треба використовувати виважено, щоб поглибити взаємодію користувача з сайтом, а не відлякати його. Адже ніхто не захоче чекати перегляду основного контенту, поки буде завантажуватися безглузда і даремна анімація - все повинно виглядати природно, доречно і не відволікати.
4. Сміливі кольору
До недавнього часу фахівці рекомендували використовувати в дизайні лише «веб-сумісні» кольору - ті, які не викликають роздратування і не дають навантаження на зір. Сьогодні все змінюється - при грамотному використанні сміливі кольору творять чудеса, перетворюючи звичайні сайти в яскраві, соковиті і запам'ятовуються.
Приклад використання сміливих квітів на spotify.com
Яскраві кольори - це спосіб персоналізації в умовах глобальної моди на мінімалізм в дизайні. Ймовірно, дизайнери будуть і далі експериментувати з палітрами, створюючи унікальні градієнти і сплески кольору.
5. Незвичайний скролінг і паралакс
У минулому дизайнери намагалися найважливішу інформацію розмістити в частині сторінки, яку користувач бачить відразу після переходу на сайт. Сьогодні ж складно визначити, яка частина сторінки буде «видимої», адже переходи здійснюються з пристроїв з різним дозволом дисплея. Тому потрібен інший підхід.
Скролінг, спочатку необхідний для переміщення по сторінці вниз і вгору, сьогодні креативно використовується дизайнерами. При вмілій реалізації він стає універсальним інструментом подачі контенту. Так, можна автоматично налаштувати показ і зупинку відео або анімації під час прокручування, поява тексту і зображень і т.п.
Наприклад, на сайті Apple.com широко застосовуються різні ефекти при скролінгу - годинник як би слідують в напрямку скролінгу, тим самим привертаючи до себе увагу користувача.
Ще один тренд - ефект паралакса, коли основний контент прокручується швидше, ніж фон. В результаті досягається цікавий 3D-ефект - немов сайт багатошаровий і має глибину. Ось кілька сайтів для прикладу: makeyourmoneymatter.org , cyclemon.com , madwell.com .
6. Асиметричні шаблони
2016 рік пройшов під впливом сітчастих шаблонів, а в 2017 році намітилася тенденція до використання асиметричних і «рваних» шаблонів. Незважаючи на те, що в переважній більшості бренди віддають перевагу традиційним і зрозумілі карткові UI-шаблони (адже вони логічні і прості для орієнтації), деякі все ж починають експериментувати для того, щоб виділитися і відбудуватися від конкурентів.
Приклад асиметричного дизайну ( isaidicanshout.com )
Асиметричний дизайн, створений умілими руками, відмінно підходить для залучення уваги до певних частин сторінки. Завдяки різним розмірам шрифтів і розташуванню елементів можна правильно розставляти акценти на сторінці і направляти користувачів в потрібне русло.
7. Тіні
Самі по собі тіні - це далеко не новина в веб-дизайні. У свій час вони були популярні, потім про них забули. У чому ж тоді тренд? У використанні величезних, часом навіть гіпертрофованих тіней, що відкидаються зображеннями при наведенні курсору.
Глибокі тіні при наведенні курсору на зображення ( abduzeedo.com )
Такий підхід дозволяє в плоскому шаблоні акцентувати увагу на активному елементі і залучити у взаємодію. При цьому створюється ефект глибини - з таким зображенням приємно просто водити курсором.
8. Великі і жирні шрифти
Типографіка - це ще один спосіб персоналізації. Поширення пристроїв з високою роздільною здатністю екранів робить шрифти читабельними і добре помітними, тому дизайнери все частіше експериментують з ними.
Приклад використання великого шрифту ( bigyouth.fr )
9. Ультрамінімалізм
Мінімалізм давно став визначальним трендом в веб-дизайні. Але деякі йдуть далі, забираючи з сайтів будь-які натяки на декор, залишаючи лише найважливіші для користувачів елементи.
Абсолютний мінімалізм ( mathieuboulet.com )
У наведеному прикладі є тільки вказівка «Scroll», посилання на розділ «Про Собі» і посилання на профілі в соцмережах. Далі при прокручуванні вже йде портфоліо дизайнера.
10. Мікс горизонтального і вертикального тексту
Зміна звичного горизонтального розташування тексту «освіжає» сайт і мотивує прочитати, що ж там написано.
Приклад незвичайного напрямку тексту ( takewhatyoucancarry.com )
Зверніть увагу, що мікс зроблений грамотно - тут немає зайвих збивають з пантелику елементів. Слово «take» написано вертикально - цього достатньо для фірмової подачі контенту.
11. «Модуляція»
Студія Waaark на своєму сайті зробила оригінальний ефект: при переміщенні курсору між блоками лінія починає тягнутися за ним, а потім вібрувати. Це нагадує графік модуляції в режимі реального часу.
Цілком можливо, веб-дизайнери візьмуть на озброєння подібне рішення.
12. Перекриття зображень текстом
Текст, злегка перекриває супутнє зображення, - ще один ефект, який може стати затребуваним в 2017 році. Ось приклад такого ефекту на сайті thibaultpailloux.com :
В цьому випадку текст повинен контрастувати з фоновими зображеннями, щоб вони не зливалися.
13. двоколірні
В основі дизайну сайту лежить 2 базових кольори. Виглядає це стильно і сучасно. Наприклад, сайт Australian Design Radio витриманий саме в такому стилі:
14. «Геометричні» шрифти
В цьому випадку шрифти поєднуються з різноманітними геометричними формами. Для цієї мети підходять шрифти начебто Futura, ITC Avant Garde і Proxima Nova.
Приклад використання «геометричних» шрифтів ( hugeinc.com )
Виразності, напористості і навіть якоїсь агресивності сайту можна надати, використовуючи дуже жирні шрифти зазначених вище сімейств.
підводимо підсумки
У 2017 році дизайнери будуть намагатися внести в звичний мінімалізм штрихи індивідуальності. Хтось буде робити це за допомогою кольору, хтось - за допомогою шрифтів, а хтось - за допомогою незвичайного розташування блоків.
При розробці та затвердженні дизайну не забувайте головне правило - він повинен бути зручний для користувача і мотивувати зробити цільове дію. Чи впевнені ви в продуктивності вашого ресурсу. Про це вам може розповісти звіт проведеного аудиту сайту в службі "Персональний менеджер" SeoPult. Крім аудиту дизайну і юзабіліті ви отримаєте розгорнутий аналіз технічної складової, семантики, позицій по відношенню до конкурентів і т. п. Все це допоможе вам поліпшити сайт і підвищити його ефективність як інструменту продажів.
2015. Що змінилося з тих пір?У чому ж тоді тренд?
