Веб-дизайн 2015: тренды, тенденции

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

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

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

Примеры:
«justdesign.co.za/»
justdesign

Прокручивайте сайт вниз и наслаждайтесь 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»
videofon2

«isurfbecause.com»
fonvideo

«paypal.com»

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

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

«amplifon.co.uk/interactive-ear/index.html»
uho

«natgeoeat.com»

natgeoeat

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

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

6. Морфинг.

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

Сюда же можно отнести и кнопки «Призраки» — кнопки, не имеющие фона:
«thedistance.co.uk»
knopki

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

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

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

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

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

Пример:
«apple.com/iphone-6/»
phone

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