Сегодня узнаем – какие тренды веб дизайна будут актуальны в 2015 году, а также рассмотрим сайты, на которых они присутствуют.

1. Использование SVG графики, в том числе и для того, чтобы поразить посетителей сайта.

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

Примеры:
“justdesign.co.za/”

Прокручивайте сайт вниз и наслаждайтесь svg графикой!

SVG графика может стать альтернативой Flash технологии, например, для отображения сайтов на Android, так как в конце 2011 Adobe прекратило разработку мобильного Flash Player…

Как получить SVG?
– Код анимации SVG можно найти на CodePen.
– Можно сохранить векторное изображение в формате SVG (Adobe Illustrator), далее открыть SVG через редактор кода и добавить анимации.

В WordPress, для примера, можно вставить в текстовой виджет (Адиминка – пункт “Внешний вид” – подпункт “Виджеты” – находим виджет “Текст” – перетаскиваем в сайдбар и внутрь него вставляем код) следующий простенький код:

<svg>
<rect x="0" y="0" width="200" height="200" fill="slategrey">
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
</rect>
</svg>

В итоге у вас получиться сдвигающийся вправо прямоугольник.

2. Адаптивный сайт с приоритетом на широкоформатные дисплеи.

Здесь наблюдается тенденция – адаптация сайта к широкоформатным дисплеям – связано это с популярностью Smart TV, то есть просмотр сайтов через телевизоры, вот например статистика моего сайта:

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

3. Богатые и Динамичные фоны

С увеличением скорости интернета фоны сайта становятся все более “весомыми” – здесь уже используются не только качественные картинки, но и видео, в том числе в HD качестве, а также 3D видео фоны.

Примеры:
“vimeo.com”

“isurfbecause.com”

“paypal.com”

4. Интерактивные сайты

Размещение на сайте различных интерактивных объектов (в том числе 3D объектов), позволяющим эмоционально увлечь посетителя на сайте (сделать сайт запоминающимся), а следовательно, и время нахождения посетителя на сайте увеличиться.

“amplifon.co.uk/interactive-ear/index.html”

“natgeoeat.com”

5. Акцент на Типографию (шрифты)

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

6. Морфинг.

Один из главных трендов 2015, изменение формы/цвета/размера кнопок, инпутов в зависимости от изменения их назначения. Один из самых первых примеров — «разъезжающееся» поле поиска на сайте Apple. В том же AppStore кнопка загрузки приложения становится прогресс-баром, а потом — кнопкой запуска приложения.

Сюда же можно отнести и кнопки “Призраки” – кнопки, не имеющие фона:
“thedistance.co.uk”

Данные кнопки снабжают различного рода анимацией при наведении.

7. Скроллинг вместо ссылок.

Страницы с «длинным» вертикальным скроллингом по-прежнему останутся популярными в 2015 году.  Скроллинг удобнее поиска разделов в меню и требует меньше действий при чтении контента.

Отлично подходит для сайтов визиток или для отдельных страниц сайта, чтобы описать продукт, услугу.

Здесь же эффектно выглядит использование параллакс эффекта.

Пример:
“apple.com/iphone-6/”