Тенденції веб-дизайну 2014

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

Почнемо з тонких шрифтів, які стали однією з візитних карток багатьох сайтів 2014 року. Виглядає легко і елегантно.

Відступ. Якщо при цьому використовувати CAPS LOCK, то слід пам'ятати про розрядку, тому що без неї він читається гірше. Також Caps Lock часто застосовується в соцмережах і на форумах для вираження підвищеного тону, що може також надати негативне сприйняття на підсвідомому рівні і на звичайних сайтах, тому радимо не використовувати його зовсім, а якщо використовувати, то максимально акуратно.

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

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

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


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

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

Ми використовували кола на інтерактивній карті на сайті ЧЗМК. Завдяки модулю в нашій системі управління сайтом фотографії для об'єктів беруться автоматично, обрізаються в коло і спливають засобами html5 і css3.

metcon.ru

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

Паралакс просто розв'язав руки тим, кого ваблять нові можливості і ефектні речі. Він дозволяє як подати матеріал у більш живій і об'ємній формі, так і реалізувати зовсім незвичні, яскраві ідеї.

Ми використали паралакс-ефект на головній сторінці linetti.ru, для демонстрації залів на сайті Уральських сувенірів uralsuvenir.ru/bluehall/ та uralsuvenir.ru/greenhall/ в окремих елементах на metcon.ru, mielap.ru.

Анімація HTML5 / CSS3 - це, насамперед, інтерактивні елементи і поступова подача матеріалу. Дозволяє зробити інтерфейс складних елементів і форм більш зручним і зрозумілим, а також привнести просто приємні оку плюшки.

Одним з найбільш підходящим прикладом є інтерактивна карта готових об'єктів на сайті metcon.ru.

Шапка що прилипає  - зручний і функціональний варіант. 

Нами більше використовується у варіанті прилипання меню каталогів на сайтах магазинів. Можна подивитися на  betondetal.ru та mielap.ru.

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

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

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

Яскравий приклад можна побачити в окремих елементах на сайті  metcon.ru та uralsuvenir.ru

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

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

Серед наших робіт така верстка зустрічається на сторінці світильників інтернет-магазину Лефабрік.

 
Яндекс.Метрика