Основные тренды веб-дизайна в 2015 году

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

В большинстве своем тренды диктуются событиями  и направлением развитием отрасли в предыдущий период. Проанализировав их, мы составили список из 10 основных тенденций, которые будут актуальны в наступившем 2015 году.

1. Адаптивный дизайн

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

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

2. Плоский дизайн или мозаика из прямоугольников

Плоский дизайн прочно вошел в сферу веба благодаря таким мировым гигантам Microsoft, Google и Apple. Но это не просто дань уважения к лидерам индустрии: многие успели оценить его легкость, простоту, лаконичность и быстродействие. Хотя и противникам такого дизайна тоже есть что сказать в защиту своей точки зрения.

3. Скроллинг и анимация прокрутки

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

4. Распространение веб-графики

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

5. Автоматизация верстки

Все больше средств появляется для того, чтобы сделать процесс верстки не таким рутинным и позволить веб-дизайнерам расширить свои границы в профессиональном плане.  Например, совсем недавно американцы анонсировали разработку нового языка – Ur/Web, который объединил возможности HTML, CSS и JavaScript. Всем веб-разработчикам известен такой инструмент для разработки сайтов, как Bootstrap, который позволяет использовать гибкие настройки по разметке сайтов и упрощает работу со стилями. Отрисованные по сетке в фотошопе макеты можно превращать в код, даже не владея им. Как видим, инструментарий для разработки сайта все больше автоматизируется, однако это не отбирает работу у программистов, а лишь позволяет углубиться в работу бэк-энда.

6. Графика: тонкость, прозрачность, центрирование

Теперь перейдем непосредственно к элементам веб-сайтов: шрифтам, тексту, ссылкам, кнопкам и иконкам. Здесь тенденции наблюдаются следующие:

• Тонкие шрифты
• Контурные иконки и кнопки
• Круги
• Большой интерлиньяж
• Центрирование текста
• Ссылки без подчеркивания

7. Крупные изображения

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

8. Меню: скрытое, как в приложениях и прилипающее

Поговорим о тенденциях в расположении и изображении меню. Здесь в 2015 году намечается несколько трендов:

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

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

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

10. Микровзаимодействия

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

Это, пожалуй, все, что хотелось бы выделить структурно, но не все, о чем хотелось бы рассказать. К трендам 2015 года в веб-дизайне можно также отнести параллакс эффект, timeline, живой блюр, уведомления, разрядка, long shadow, polygonal art, диаграммы, персонализация интерфейса, скорость загрузки и пр.

А что вы думаете по этому поводу?

Вернуться назад