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

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

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

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



Фоны


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



http://jackietrananh.com


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



http://choiseul.info


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



http://www.sweez.com.br/#inicio




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



http://moovents.com


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



http://www.somosende.com


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



http://35mmdesign.com


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



http://hellohikimori.com/#!/home



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


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



http://www.mujjo.com


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



http://www.mujjo.com/touchscreen...


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



http://www.nationalacademy.org/about-us


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



http://shop.bigcartel.com



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


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



http://kerriscreation.com/en#graph


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



http://www.jkdesign.com/about-jk


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




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



http://sendmetosouthpole.com



Вёрстка


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



http://banderesi.bucchianico.net


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



http://grooveshark.com/new/#discover


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




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



http://www.chronozoom.com/


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



http://www.pipoldesenzano.com/en


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



http://www.digitalhands.net

Автор: Анна Карпушина
© VIKING, при полном или частичном копировании материала ссылка на первоисточник обязательна.

ВКонтакте
FaceBook
TEXT.RU - 100.00%