10 популярных стилей веб-дизайна

Популярный стили веб-дизайна
04.11.2015 КОММЕНТАРИИ: 0

Тенденция захламления сайтов спецэффектами навсегда осталась в прошлом. Современный веб-дизайн не предполагает ни мелькающих слайдеров-каруселей, ни сумасшедших фонов, ни музыкального сопровождения. Он стремится к простоте, чистоте и максимальному удобству в использовании (UX). Лёгкие, лишённые наворотов сайты быстрее загружаются и дольше удерживают посетителей, что благоприятно сказывается на ранжировании (Page Rank).

Но не путайте простоту со скукой! Дизайн всегда должен оставаться интересным. Вот 10 актуальных тем и стилей, демонстрирующих оптимальный баланс функциональности и завораживающей эстетики.

  1. Гранж

Грубый, тёмный, необтёсанный — именно так можно охарактеризовать один из самых востребованных на сегодняшний день стилей веб-дизайна. Гранж гибок и легко подстраивается под тематику и настроение сайта. Сегодня он не так топорен, как в 90-е. Эстетика современного гранжа более изысканна и идеально соответствует духу минимализма. Присущая стилю резкость сглаживается чистыми фонами и закруглёнными углами грубых элементов (шрифтов и изображений, к примеру).

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

  • виртуальные ленточки по углам изображений;
  • надписи на деревянных деревенских указателях;
  • штампованные логотипы для кнопок меню.

SYC FUK
Дизайн сайта в стиле гранж

* Больше примеров сайтов в стиле гранж можно увидеть в статье «Хипстерский дизайн».

  1. Минимализм

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

При кажущейся простоте в минимализме явно прослеживается дыхание модернизма и софистицизма. Минимализм выстраивается на контрасте. В хорошем дизайн-макете всегда используются:

  • несколько стратегически расположенных цветовых акцентов, управляющих перемещением взгляда по странице;
  • контраст между шрифтами и фоном, служащий целям разбивки контента и формирования визуальной иерархии.

Mags Yips Copywriting
Дизайн сайта в стиле минимализм

  1. Карточный дизайн

Стиль дизайна, в котором информация аккуратно распределена по карточкам / плиткам единой модульной сетки. А-ля стартовое меню Windows 8. Оптимальный вариант лейаута (скелета макета) для сайтов, которым необходимо представить в удобоваримом виде огромные пласты информации. Плиточный дизайн минималистичен по своей натуре, быстро загружается, отлично отображается на различных устройствах и при всём этом предоставляет широкие возможности для творчества.

Для его создания вам понадобятся:

  • интересные шрифты;
  • яркие цвета;
  • плоские конструкции (иконки, кнопки, листалки).

SilkyTricky
Пдиточный дизайн сайта

  1. Акцент на типографику

Шрифты, которые вы используете, отображают имидж вашего бренда. К их выбору стоит подходить ответственно. Особенно если типографика является центральным элементом веб-страницы. Дизайн с акцентом на шрифты как нельзя лучше подходит для сайтов с большим объёмом текстового контента. От выбора типографики в данном случае зависит не только удобочитаемость статей, но и настроение ресурса в целом.

Многие сайты создаются специально, чтобы продемонстрировать красивый шрифт. Это визитки типографий, производителей визуальной рекламы, студий дизайна.

Для создания дизайна сайта с акцентом на шрифты надо только свести к минимуму использование остальных элементов на странице.

Hull Digital Live
Дизайн сайта с акцентом на типографику

  1. Полноэкранные фото- и видеофоны

Фотоориентированные ресурсы, такие как Zillow, например, для привлечения внимания посетителей используют полноэкранные фоновые изображения. Такой вариант дизайна хорошо подходит для предприятий сферы услуг: агентств недвижимости, строительных и ремонтных компаний. Большие изображения отлично подходят для демонстрации портфолио.

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

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

Poco People
Пример сайта с полноэкранным фотофоном

  1. Мобильноориентированный дизайн

Одни сайты адаптируются под мобильную среду, а другие под неё создаются. В дистующих мировые тренды США уже 51% пользователей выходит в интернет со смартфонов — неудивительно, что многие компании сегодня начинают с разработки мобильной, а не десктопной версии сайта. Такой ресурс гарантированно не получит нагоняй от Google.

Etsy
Мобильноориентированный дизайн

  1. Одностраничный сайт с бесконечной прокруткой

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

Такой тип навигации просто создан для мобильной среды. Одностраничные сайты с возможностью скроллинга вниз весьма органично сочетаются с вертикальными экранами телефонов.

Built Things
Одностраничный сайт с бесконечной прокруткой

  1. Макет «два в одном»

Макет «два в одном» — ещё один пример чистого и функционального дизайна одностраничного сайта. Разделение экрана посредине имеет смысл в том случае, если у компании есть два равноценных бизнес-направления, два одинаково важных сообщения, два эквивалентно заманчивых коммерческих предложения. Такая структура предоставляет массу возможностей: на одной половине экрана вы можете отобразить своё портфолио, на второй — историю компании или  же использовать разделение для представления двух услуг первостепенной важности.

Позвольте посетителям сайта самим выбирать контент, который им интересен, с лейаутом «два в одном».

Peugeot
Макет сайта "2 в 1"

  1. Мультимедийный веб-дизайн

Мультимедийный веб-дизайн постепенно отвоёвывает былые позиции. Конечно, ему ещё далеко до флэта, но микроинтеракции и прочие визуальные эффекты стремительно набирают популярность. И всё благодаря смене принципа проектирования мультимедиа-ресурсов. Если раньше для их создания использовался неудобоваримый Flash, то сегодня универсальный HTML5. Он позволяет использовать музыку, видео, изображения и тексты на одной странице. В то время как большинство сайтов делает ставку на функциональность и удобство, мультимедийные ресурсы обращаются к эмоциональному опыту пользователей.

Raise The River
Мультимедийный дизайн сайта

  1. Кнопки-призраки

Кнопки-призраки не покидают трендовых чартов с момента презентации последней версии Apple iOS. Наряду с прозрачными контурными иконками они гармонично вписываются в цветовую палитру любого сайта и не отвлекают внимания от основного содержания. Лучше всего прозрачные кнопки смотрятся поверх больших фоновых фотографий в тандеме с белыми шрифтами. Также неплохо они вписываются в эстетику плоского дизайна.

Turing
Кнопки-призраки

Источник: Onextrapixel.com

 

Добавить комментарий


Защитный код
Обновить