Тренди веб-дизайну за червень 2016
Червень став революційним місяцем - в моду увійшло все те, що до недавнього часу було під забороною в веб-дизайні. Зокрема, Автовідтворення звуку, змішування реальних зображень з ілюстраціями, і нашарування логотипу на велику фотографію.
Познайомимося з тенденціями ближче?
1. Автоматичне відтворення звуку
Не так давно було прийнято не включати звук на сайті, якщо без нього можна обійтися. Але тепер звуки ллються звідусіль. Особливо якщо ви пройдетеся по закордонних сайтах - там звучить практично кожен другий. Звук використовується, зокрема, для веб-сайтів з медіа-контентом, пов`язаних з музикою, фільмами або новинами, а також для ігор або сюжетних конструкцій. Хитрість у використанні звуку - кнопка включення / виключення для користувачів, які хочуть взаємодіяти з веб-сайтом в тиші.
Також постарайтеся не шокувати користувачів раптово заграє музикою. Покажіть процес завантаження, як це зробив This Was Louise`s Phone. Об`єднайте це з перемикачем, щоб користувачі спочатку визначили - потрібен їм звук чи ні, перш ніж сайт завантажиться.
Ще одна хитрість, коли мова заходить про використання звуку - м`яко почати. Ви ж не хочете, щоб користувачі при завантаженні сторінки вискакували з крісел, тому що на всю закричить важкий метал? Нехай спочатку музика грає тихо, і поступово збільшуйте гучність.
Важливо, щоб звук (особливо, коли він грає автоматично) був життєво важливою частиною контенту, який вносить вклад в загальний користувальницький досвід. Не використовуйте звук тільки тому, що вам захотілося спробувати щось нове. Майте на увазі, що багато користувачів все одно будуть звертатися до контенту без нього. Тому підходите до дизайну з розумом.
2. Мікс фото і ілюстрацій
Грань між такими елементами, як фото та ілюстрації, здавалася нездоланною. Але сьогодні мікс реальних фотографій, і намальованих від руки елементів зустрічається все частіше. І слід зазначити, що ця примха дизайнерів виглядає цікаво і забавно.
Щоб застосувати такий хід і не прорахуватися, дотримуйтесь рекомендацій:
- Використовуйте ілюстрації для іконок і кнопок, а фотографії - для домінуючого візуального впливу.
- Створіть візуальний шаблон, що складається з ілюстрацій, і додайте в нього відео або зображення для акценту.
- Додайте ілюстровану анімацію поруч з фото, яка буде підштовхувати до дії.
- Створіть знак або логотип, який можна буде використовувати з фірмовими фотографіями або на упаковці.
- Використовуйте ілюстрації, щоб за допомогою фотографій розповісти користувачеві історію.
Відмінний приклад - Taylor Made. Сайт компанії, що займається фінансовим плануванням - не те місце, де очікуєш побачити цю техніку, але вона тут працює дуже ефективно.
Анімовані ікони на тлі фотографій, які виглядали б нудно в іншому випадку, викликають інтерес відвідувачів.
Анімована статистика при наведенні курсору приваблює користувачів і змушує скролл сторінку далі.
Ілюстрації в дизайні, в поєднанні з фотографією, все більше використовуються для того, щоб додати візуальний інтерес і заохотити користувача взаємодіяти з сайтом.
3. Значки на головному зображенні
Значки всюди. Від логотипів до хіпстерскіх ретро-стилів в типографике. Вони стали одним з основних елементів дизайну в стилі мінімалізму. Також часто вони відшкодовують елементи, яких не вистачає в головній фотографії.
Все більше дизайнерів використовують великі зображення з бейджом на головній сторінці або першому екрані. Найчастіше це одне фото (як правило, не слайдер), з білим або напівпрозорим значком по центру або вгорі. Значки часто центруються по горизонталі і по вертикалі, хоча розміщення може варіюватися.
Велике зображення привертає увагу користувачів. Бейдж служить в якості координаційного центру, роблячи посил фотографії сильніше. Це не означає, що зображення, які використовуються дизайні, погані - але композиція із позначкою більш виграшна.
Це еволюція того, що ми бачили раніше: великі фото з великим заголовком. Смілива типографіка - це повальне захоплення в минулому році. Те, як використовується значок і великий заголовок - дуже схожа техніка, так що зрушення очевидний:
- Обидва білі або світлі.
- Обидва доносять одну думку до користувачів.
- Обидва використовуються в проектах, де немає багато конкуруючих елементів.
- Обидва напівжирний і сміливі, тому що вони тільки пропонують користувачам одну точку входу.
- Обидва дуже добре працюють з фото.
- Обидва стилю - сміливе візуальне рішення, коли у вас немає багато варіантів фото.
- Обидва стилю легко можна анімувати, тим більше, що інших рухомих елементів на сайті зазвичай немає.
Ще одна причина популярності бейджів - значок може бути логотипом. Це відмінний варіант для сайтів малого бізнесу або портфоліо.
висновок
А ви досить хоробрі, щоб додати музику на сайт, або змішати реальні і ілюстровані образи? Обидва тренда - великий ризик. Якщо ви не зовсім готові до цих тенденцій, додайте хоча б значок. Це може працювати практично на будь-якому сайті.
