Блог Анны Карпушиной

Основные тенденции в современном веб-дизайне

2 марта 2015, 18:04

К 2014 году обозначились новые «модные» тенденции в области создания сайтов. Правда, если оглянуться в прошлое, то можно заметить, скорее, возвращение стилевых предпочтений.

Flat design — так называемый «плоский» дизайн, не приемлющий выпуклости, теней, бликов и прочих атрибутов реализма, задаёт тон различным элементам сайта. Он используется в сочетании с другими стилями, главное условие — отсутствие объёма (если и необходимо изобразить трёхмерный объект, то он отрисовывается в векторном стиле). Помимо чисто графической, художественной составляющей, обозначились некоторые предпочтения и в вёрстке.

Условно разделим сайт на фоновую и графическую составляющую (шрифты и прочие другие элементы) и вёрстку. Рассмотрим основные тренды в каждой из составляющих.

Фоны

1) Фоны с заливкой сплошным цветом

2) Прямоугольная «плитка»

3) Пастельные цвета и яркие цвета. И те, и другие — в моде, подбираются либо мягкие и нежные цвета, либо кричащие, яркие и агрессивные

4) Размытый фон

5) Тонированные изображения. На фотографию или картинку в редакторах накладывается фильтр, который изменяет изначальный тон

6) Фотографии высокого разрешения на фоне

7) Видео на фоне

Графика. Шрифты

8) Тонкие шрифты

9) Большой интерлиньяж в тексте. Интерлиньяж — междустрочное расстояние; при в меру большом интерлиньяже улучшается удобочитаемость текста, пространство становится «свободнее»

10) Ссылки без выделения подчёркиванием

11) Центровая композиция

Графика. Другие элементы

12) Контурные иконки и кнопки, круги

13) Плоские иконки и кнопки

14) Длинные тени

15) Полигональный арт. Изображение строится из замкнутых форм — многоугольников (чаще из треугольников или четырёхугольников)

Вёрстка

16) Прилипающий header. Шапка сайта (header) — блок в верхней части страницы сайта, в котором, как правило, размещается логотип и слоган сайта, краткая контактная информация, основное горизонтальное меню и другие элементы, которые являются необходимыми по специфике сайта

17) Лендинги. Landing page — целевая страница, содержащая информацию об услуге или товаре, переход на которую осуществляется по ссылке из поискового запроса или через баннер интернет-объявления

18) CSS3 и HTML 5 анимация

19) Таймлайн. Timeline — графическое отображение ленты событий (с датами) в хронологическом порядке

20) Подгрузка контента при скролле. При прокрутке колёсика мыши (или при прокрутке скроллбара на сайте) происходит дальнейшая загрузка содержимого страницы для отображения

21) Параллакс. В веб-дизайне — это специальные модификации фонового изображения, при которых часть этого изображения в свето-воздушной перспективе двигается медленнее, чем его элементы, находящиеся на переднем плане