- 1. Сторінки з довгою прокруткою Важко не помітити, що сучасні сайти стають все довшими, а їх дизайн...
- 3. Відсутність фонових зображень в заголовку
- 4. Простота дизайну: ніяких зайвих елементів
- 5. Фіксована ширина сайту
- 6. Замовні професійні фотографії
- 7. Спливне або вислизає меню
- 8. Приховане головне меню
- 9. Величезний шрифт
- 10. Ефективність і швидкість
1. Сторінки з довгою прокруткою
Важко не помітити, що сучасні сайти стають все довшими, а їх дизайн передбачає прокрутку сторінок. Причина криється в зростанні популярності мобільних пристроїв. Саме тому на сайтах все частіше зустрічається прокрутка (а не перехід по посиланню) як засіб переміщення до наступної порції контенту. Ця тенденція особливо помітна на домашніх сторінках: користувачам простіше прокрутити сторінку, щоб дістатися до потрібної інформації, ніж постійно клікати на посилання.
Але нова тенденція торкнулася не тільки домашніх сторінок. З тих пір як сайти з довгою прокруткою придбали певну популярність (спасибі за це односторінковим сайтам), переваги прокрутки стали використовуватися, наприклад, для сторінок з інформацією про компанії і навіть для продуктових сторінок, адже таким чином можна витончено подати найрізноманітніший контент.
Показовим прикладом є сторінка iPhone 6 на сайті Apple. В даному випадку довга прокрутка дозволяє зручно переглядати опис продукту, інформацію про його характеристики та особливості. Візуальну зрозумілість і привабливість підтримує і елегантна анімація, використана на сторінці.
2. «Сторітеллінг» і взаємодія з користувачем
Неможливо уявити ефективний сайт без привабливого контенту. Саме тому вміння подати зміст сайту в формі історії - великий плюс. Ймовірно, в 2015 році веб-дизайн буде орієнтований на те, щоб залучити й утримати увагу користувача за допомогою таких історій.
Наприклад, на сайті Space Needle факти про компанії красиво подані у формі історій, доповнених незвичайним дизайном (крім того, в цей спосіб подачі контенту вдало вписується використання згаданої вище довгою прокрутки).
Сайт The Space Needle демонструє й інший тренд 2015 року - інтерактивна взаємодія з користувачем. Елементи веб-дизайну стають все більш інтерактивними, все ширше використовується анімація, щоб зробити подачу контенту максимально привабливою і незвичайною.
Анимированное взаємодія, якщо воно ретельно продумано і виконано зі смаком, може призвести дуже сильний ефект. Наприклад, веб-сайт компанії Impossible Bureau реагує на рухи курсора, на прокрутку сторінки і наведення курсору на різні елементи, а не тільки на натискання кнопки миші.
3. Відсутність фонових зображень в заголовку
Тенденцією останніх декількох років було використання великих зображень в заголовку сторінки, часто з розміщеним поверх таких зображень текстом. Це було перше, що бачили користувачі, заходячи на сайт. Як же виділитися з натовпу в очах користувача?
Деякі сайти відреагували на тиск цієї тенденції в такий спосіб: вони залишили великі заголовки, але прибрали фонові зображення. При цьому вони спробували не тільки піти наперекір тренду, але і позбутися від великих зображень, підвищуючи таким чином швидкість завантаження сайту і його ефективність (див. Пункт 10).
сайт The New Wave Company дуже наочно показує це. Відвідувачів зустрічає великий заголовок, набраний величезними літерами по центру сторінки. При цьому ніякого фонового зображення за заголовком немає. Це зроблено зі смаком і відразу запам'ятовується особливо на тлі тих сайтів, які слідуючи тренду розміщують «важку» фонову картинку.
4. Простота дизайну: ніяких зайвих елементів
Існує думка, що дизайн вважається завершеним тоді, коли в продукті немає жодного зайвого елемента. Швидше за все, в 2015 році ми побачимо повсюдне втілення цієї ідеї: веб-дизайнери будуть прагнути спростити дизайн своїх сайтів, позбавляючись від всіх несуттєвих елементів.
Дизайнери сайту компанії The New Wave Company надійшли саме так, коли відмовилися від великого фонового зображення в заголовку.
Ще один відмінний приклад реалізації цієї тенденції - простий і лаконічний сайт digital-агентства Rareview . Тут теж немає великих і «важких» фонових зображень в заголовку.
По суті, дизайнери проігнорували всі ті рішення, до яких часто вдаються сучасні сайти (колір фону, складні шаблони, велика кількість графіки). Замість цього компанія віддала перевагу чіткому мінімалістському дизайну. В результаті сайт помітно виділяється в порівнянні з іншими ресурсами, багатими зображеннями і які рясніють різними кольорами фону і шрифтів.
5. Фіксована ширина сайту
Останнім часом більшість сайтів застосовували параметр «width: 100%», щоб масштабувати розмір таких елементів дизайну, як зображення і блоки до ширини вікна браузера. Перш ніж цей тренд став популярним, більшість сайтів мали фіксовану ширину і були вирівняні відносно центру сторінки.
Схоже, що тенденція ставити фіксовану ширину сторінки повертається, але в модернізованому вигляді. Замість того щоб розтягувати контент на всю ширину екрану, деякі сайти воліють здавати значення властивості max-width, щоб визначати максимальну ширину елементів контенту.
Цю тенденцію демонструє сайт Michele Mazzucco . Якщо переглядати його у вікні, ширина якого перевищує 1350 пікселів, можна побачити, де знаходиться права і ліва межі контенту сайту (а також фонових кольорів відповідних блоків сайту). Таким чином веб-дизайнеру вдається сфокусувати увагу користувача на контенті сайту, а заодно витончено поставити підніжку параметру «width: 100%».
6. Замовні професійні фотографії
Зображення з фотобанків як і раніше використовуються в дизайні, але все частіше стокові зображення поступаються місцем професійним високоякісним фотографій, виконаних на замовлення спеціально для конкретного сайту.
Використання унікальних знімків дозволяє зробити ще один крок в оформленні сайту і вигідно виділяє вас на тлі тих, хто продовжує користуватися фотобанками. Адже створені саме для вашого сайту унікальні фотографії не зможе використовувати ніхто, крім вас.
сайт Grain and Mortar дуже добре відображає цей тренд. Виконана на замовлення фотографія використана в шапці сайту, і це справляє позитивний ефект, оскільки на фотографії зображені реальні люди, насправді працюють в Grain and Mortar.
Сторінка з інформацією про компанії рясніє професійними фотознімками високої якості, що показують співробітників і офіси компанії. Ніяких стічних зображень з безликими офісами.
7. Спливне або вислизає меню
Адаптивний веб-дизайн існує вже не перший день. До недавнього часу дизайнери дбали в першу чергу про те, щоб привабливо виглядала основна версія сайту, яку можна оглянути за допомогою комп'ютера, мобільні ж версії залишалися в тіні. Тенденція, задана адаптивним дизайном, вимагає, щоб сайт виглядав цікаво при поводженні з будь-якого пристрою.
З ростом популярності цього підходу ми все частіше спостерігаємо, як елементи дизайну, розраховані на перегляд з мобільного пристрою, переносяться на всі версії сайту.
Наприклад, сайти 24ways і Rawnet ілюструють тенденцію застосування адаптивного дизайну не тільки для мобільної версії сайту, але і для його деськтопной версії.
Обидва ці сайту вибрали бічне меню з лівого або правого боку сторінки (замість звичного горизонтального меню у верхній частині сторінки), яке насправді більше нагадує вислизає меню. Цей прийом був запозичений з веб-додатків і арсеналу інструментів адаптивного дизайну, розрахованих на перегляд за допомогою мобільного пристрою з екраном невеликого розміру.
8. Приховане головне меню
Я припускаю, що крім сайтів з вислизає меню, згаданим вище, скоро ми побачимо велику кількість сайтів, які спочатку взагалі приховують меню від відвідувачів. Такі приховані меню будуть відображатися тільки в тому випадку, коли користувач сам захоче звернутися до навігації по сайту і натисне на відповідний значок.
Це також один із прийомів адаптивного дизайну, який все частіше переноситься на дизайн сайту в цілому, а не тільки на його мобільну версію.
Дуже хороший приклад - сайт Brian Hoff Design . У правому верхньому кутку знаходиться іконка-гамбургер - саме там ховається вся навігація по сайту до тих пір, поки відвідувач не клацне на значок. Іконка-гамбургер набуває все більшого поширення в останні кілька років; це пов'язано з тим, що вона стала дуже популярною і звичної для користувачів смартфонів і планшетів, оскільки часто використовується в мобільних додатках і в мобільних версіях сайтів.
На сайті Brian Hoff Design іконка-гамбургер зустрічається у всіх версіях сайту, незалежно від використовуваного пристрою й обсягу вікна, завдяки цьому дизайн сайту залишається простим і функціональним.
9. Величезний шрифт
У 2014 році шрифтове оформлення виявилося дуже важливим аспектом дизайну багатьох сайтів, і найближчим часом я не передбачаю змін в цьому напрямку. Однак, на мій погляд, в 2015 році великі заголовки стануть ще більшими.
Приклад використання шрифтів гігантського розміру на домашній сторінці - сайт компанії Tiny Giant . Дуже важко не помітити текст, набраний шрифтом такого розміру.
Ймовірно, в 2015 році використання великого розміру шрифту буде ключовим способом позначити візуальну ієрархію елементів сторінки. Відвідувачі сайту насамперед читають те, що набрано найбільшим шрифтом, тому що саме він в першу чергу привертає увагу. Tiny Giant чудово використовує цей ефект.
10. Ефективність і швидкість
Деякі тренди веб-дизайну обумовлені потребою прискорити завантаження сайту і знизити використання каналу зв'язку. Більшість трендів, згаданих у цій статті, швидше за все, і були викликані необхідністю зменшити розмір сайту і знайти рішення, що дозволяють швидко завантажувати сторінки, особливо на мобільних пристроях начебто смартфонів і планшетів, а також при низькій швидкості підключення.
Веб-дизайнери і розробники сайтів в наші дні змушені враховувати вагу сайту і то, як з ним взаємодіють користувачі. Ці питання вийшли на поверхню завдяки збільшилася ролі адаптивного веб-дизайну. Такі аспекти, як низька швидкість роботи мережі (наприклад, в мережах мобільного зв'язку) і тип використовуваного пристрою змусили веб-дизайнерів і розробників звернути пильну увагу на розмір використовуваних файлів і сторінок, на швидкість завантаження сайту в різних мережах і на такі обмеження як тарифний план користувача. Все це також вкрай важливо при просування сайту в пошукових системах.
Тому немає сумнівів, що швидке завантаження сайту і його якісне, бездоганне функціонування стануть одним з визначальних чинників для багатьох сайтів, які з'являться в 2015 році.
З оригінальному текстом статті Ембер Лі Тернер "10 Webdesigntrendsyoucanexpecttoseein 2015» можна ознайомитися в блозі The Next Web.
Як же виділитися з натовпу в очах користувача?