Актуальні тенденції веб-дизайну та їх застосування в блозі | Дизайн блогу 2015

1. 1. Ширина сторінки сайту дорівнює ширині екрана браузера
2. Застосування в блозі
3. 2. Адаптивна верстка
4. Застосування в блозі
5. 3. Великі фонові зображення, слайдер, відео
6. Застосування в блозі
7. 4. Оригінальні і великі шрифти
8. Застосування в блозі
9. 5. Мінімалізм
10. Застосування в блозі
11. 6. Цікаві ефекти або «мікровзаімодействіе»
12. Застосування в блозі
13. 7. Parallax scrolling
14. Застосування в блозі
15. 8. Довгі статті
16. Застосування в блозі
17. 9. Блочний дизайн
18. Застосування в блозі
19. 10. Бічне або меню, що випадає
20. Застосування в блозі
21. 11. Завантажувач сайту
22. Застосування в блозі

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

Для мене досі залишається загадкою, чому ТАК БАГАТО блогів зроблені по самому стандартному найдавнішого шаблоном з абсолютно обридлими всім користувачам інтернету елементами? Чому про красивому зовнішньому вигляді сайту замислюються тільки компанії націлені на продажу продукту і більш-менш великі бренди ???

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

У цій статті багато gif зображень для наочності. Тому дуже прошу почекати завантаження і не нервувати))) Поїхали!

1. Ширина сторінки сайту дорівнює ширині екрана браузера

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

Для прикладу давайте порівняємо сайт «Вконтакте» і «Фейсбук». «Вконтакте» створений дев'ять років тому, і з тих пір його дизайн не змінився! Фейсбук в свою чергу не те, що підтримує сайт в сучасному вигляді, а швидше навіть задає якісь тенденції. Подивіться на фото і зверніть увагу на абсолютно непотрібні білі блоки з боків в «Вконтакте» і грамотно використаний простір в «Фейсбуці».

Я не буду приводити в приклад ніякі блоги, тому що це некоректно, але я думаю, що ви і самі часто зустрічали сайти, зроблені саме в такому ключі - де 50% екрану не використовується ...

Застосування в блозі

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

2. Адаптивна верстка

Адаптивна (гумова) верстка сайту дозволяє йому виглядати красиво і зручно на будь-яких пристроях: великих моніторах, планшетах, мобільних телефонах. Цей тренд також з'явився кілька років тому і все міцніше займає позиції. Як ви знаєте, раніше для цих же цілей робили кілька версій сайту. Наприклад, звичайну і мобільну - і це були два різних сайту, з різними доменними іменами. Наприклад, vk.com і m.vk.com. При адаптивної верстці немає необхідності робити два сайти, треба просто продумати як будуть перебудовуватися блоки при зміні ширини екрану. Як приклад, ви можете подивитися на верстку нашого сайту. Для цього треба просто в ручну звужувати і розширювати вікно браузера - елементи будуть перебудовуватися на ваших очах.

Адаптивна верстка - це виключно важливо на сьогоднішній день! Все більше людей користується саме мобільними телефонами для виходу в інтернет, а є навіть думка, що в майбутньому саме мобільний інтернет буде домінувати. На зображенні ви можете бачити статистику використання різних пристроїв при перегляді нашого сайту за останні сім місяців. Дані взяті з «Яндекс Метрики».

Як бачите, тільки дві третини людей використовують настільні комп'ютери і ноутбуки. Ціла третина відвідувачів читає блог з мобільних і планшетів! До речі, напишіть, будь ласка, яка статистика в цьому плані у вас?

Застосування в блозі

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

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

3. Великі фонові зображення, слайдер, відео

Великі фотографії на тлі - це вже не дивно, а от фонове відео - це можна сказати писк моди. Великі фотографії виглядають стильно і потужно і в той же час дозволяють привернути увагу читача до основної теми або новин вашого блогу. Особливо актуальне це тренд, якщо ви часто робите фоторепортажі або ваш блог взагалі присвячений фото. Приклад такого оформлення можна подивитися у нас на головній сторінці. Відео - це також прекрасне рішення для блогу. Цей прийом використовують найбільші міжнародні сайти, наприклад, airbnb , І це виглядає дійсно круто і незвично!

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

Застосування в блозі

Для того, щоб використовувати цей тренд в блозі також необхідно повністю або частково змінювати дизайн. Але тут я раджу кілька разів подумати, тому що в 2015-му році в веб-дизайні з'явився новий тренд - мінімалізм - про який я розповім трохи пізніше. Проте, якщо ви хочете поставити в блог велике фото, воно повинно бути дуже гарної якості, те ж саме стосується відео. Вбудувати відео в сайт не дуже складно, і будь-який веб-розробник впорається з цим легко. Головне, щоб такий дизайн не обтяжувати ваш блог, тому що швидкість завантаження сторінки - це критично важливий показник!

4. Оригінальні і великі шрифти

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

Застосування в блозі

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

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

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

Другий аспект мінімалізму - це плоский дизайн. Тобто ніякого градієнта і об'ємних елементів. Прості кольору, відсутність багатошаровості, опуклості і накладення елементів один на одного. Іноземні сайти вже щосили використовують простий сірий дизайн з двома-трьома важливим кнопками і все! У Росії поки як і раніше люблять навернути на сайт за все так побільше.

Застосування в блозі

Мінімалізм - це звичайно здорово і стильно, але на мій погляд для блогу не дуже корисно. Блог повинен зацікавити читача, зробити так, щоб він захотів надовго залишитися на сайті і повернутися ще раз. Для цього в блозі якраз навпаки повинно бути багато цікавих блоків і елементів, нехай навіть і зайвих з точки зору основної мети блогу.

Але зате можна щосили використовувати плоский дизайн, іконки і символи. Цікаві і незвичні оформлювальні елементи - це завжди виграшно.

6. Цікаві ефекти або «мікровзаімодействіе»

Ось це ось дуже крута штука, застосовна до всіх без винятку блогам! Отже, що ж таке «мікровзаімодействіе»? Це спілкування користувача з вашим сайтом. Чи не з вами особисто, як з автором, а саме з сайтом. Тобто читач робить якісь дії на сайті, а елементи сайту йому відповідають. Наприклад, рух значків при наведенні, зміна кольору картинки-анонса статті (приклад знову ж - у нас на головній), ефекти при переході між сторінками і так далі. Таких мікровзаімодействій можна придумати дуже багато!

Застосування в блозі

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

7. Parallax scrolling

Паралакс - це модний ефект, який виглядає дуже незвично і створює відчуття багатошаровості і 3D руху на сайті. У блогах такий прийом використовують не часто, тому що він трохи ускладнює сайт за рахунок того, що постійно звертається до ресурсів процесора. Є думка, що паралакс вже здає позиції і поступово йде в минуле, тому що його призначення - це «вау» ефект, якого сьогодні вже немає в силу великої поширеність параллакаса на різних сайтах. Ще рік тому паралакс дійсно викликав здивування, сьогодні - це просто черговий оформлювальний прийом. Особисто мені паралдакс дуже подобається, тому у нас на головній є один блок з таким ефектом.

Зараз паралакс можна зустріти і в іншому вигляді. Наприклад, не при прокручуванні сторінки, а при русі мишею.

Застосування в блозі

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

8. Довгі статті

Сьогодні модно робити сайти-одностранічнікі, вони ж Лендінгем (англ. Landing page - посадкова сторінка). Спочатку такі сайти з'явилися для того, щоб просувати якийсь окремий товар або послугу, щоб потім з цього красивого Лендінгем люди вже приходили на основний сайт компанії. Але зараз Лендінгем заполонили інтернет і стали використовуватися в різних проектах. Тенденція цього року говорить про те, що розгалужені багатосторінкові сайти вже не затребувані. Користувач не хоче переходити на різні сторінки і в різні розділи, натискаючи на посилання. Йому зручніше просто крутити вниз до нескінченності.

Застосування в блозі

Мені важко уявити блог зроблений у формі Лендінгем. Хоча напевно, такі блоги вже існують! Але мені здається логічним і зручним використовувати Лендінг для окремих проектів, коли потрібно продати відвідувачеві якусь ідею. Ваш вебінар, онлайн курс або щось ще. Нещодавно ми зробили Лендінг для конкурсу , Який зараз запущений в блозі. До речі, це був мій перший досвід веб-дизайну.

9. Блочний дизайн

Блоковий дизайн вкрай популярний і вважається наймоднішим дизайнерським рішенням останніх років. Чому? Тому що при такому дизайні на одній сторінці можна розмістити дуже багато інформації, при цьому вона буде оформлена красиво. Сторінка при блочному дизайні виглядає повітряно, а не громіздко, і очі у відвідувача просто «розбігаються» - хочеться подивитися відразу все. Тому такий дизайн добре позначається на поведінковому факторі. Приклад - сайт платформи для блогерів Helloblogger .

Застосування в блозі

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

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

10. Бічне або меню, що випадає

Ще один цікавий тренд, який прагне також до мінімалізму - це відсутність терміни з меню. При такому дизайні всі пункти меню ховаються за одним значком. При натисканні на піктограму меню випадає. В цьому році даний тренд ще посилився, і тепер вважається, що і меню, що випадає - це вже не модно. А модно робити для меню окремий блок (як правило, збоку). І тоді при натисканні на спеціальну кнопочку меню не просто випадає, а з'являється додатковий блок зі списком розділів. Дизайнери люблять цей прийом виключно через прагнення піти від буденності і горезвісний, тому що на мій погляд в плані юзабілі робити таке меню не дуже правильно - користувачеві необхідно здійснювати додаткове дію навіть щоб просто побачити меню сайту!

Застосування в блозі

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

11. Завантажувач сайту

І нарешті, ще одна класна дизайнерська фішка, яка прекрасно впливає на поведінковий фактор сайту. Завантажувач сайту або іншими словами «прелоадер» - це анімований значок, який крутиться (вертиться, стрибає і т.п.) на сторінці сайту, поки сторінка завантажується. Гарний прелоадер тим, що користувач менше нервує в очікуванні завантаження сторінки, а отже ймовірність того, що він не дочекається і піде - знижується. Також якщо ваш прелоадер дійсно крутий і оригінальний, читач може спеціально почати переходити по сторінках, щоб на нього подивитися. І крім того, прелоадер приховує етап неповного завантаження сторінки, при якій відображені ще не все блоки, і сторінка виглядає не дуже привабливо. По суті, прелоадер - це теж елемент мікровзаімодействій, але я вирішила винести його окремо.

Застосування в блозі

Так, так, так і ще раз так! Немає жодної причини по якій не варто встановити на свій блог завантажувач. Головне - підібрати цікавий і відповідний вам за стилем прелоадер.

На цьому у мене все! Звичайно, трендів і тенденцій веб-дизайну існує набагато більше. Я вибрала найбільш знакові та великі тенденції. Сподіваюся, ви почерпнули для себе щось нове. Чекаю на ваші коментарі!

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