10 трендов веб-дизайна, которые мы увидим в 2015 году

1. Страницы с длинной прокруткой

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

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

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID LjN8K1P7y.

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

2. «Сторителлинг» и взаимодействие с пользователем

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

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

Сайт The Space Needle демонстрирует и другой тренд 2015 года — интерактивное взаимодействие с пользователем. Элементы веб-дизайна становятся все более интерактивными, все шире используется анимация, чтобы сделать подачу контента максимально привлекательной и необычной.

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

3. Отсутствие фоновых изображений в заголовке

Тенденцией последних нескольких лет было использование больших изображений в заголовке страницы, часто с размещенным поверх таких изображений текстом. Это было первое, что видели пользователи, заходя на сайт. Как же выделиться из толпы в глазах пользователя?

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

Сайт The New Wave Company очень наглядно показывает это. Посетителей встречает крупный заголовок, набранный огромными буквами по центру страницы. При этом никакого фонового изображения за заголовком нет. Это сделано со вкусом и сразу запоминается особенно на фоне тех сайтов, которые следуя тренду размещают «тяжелую» фоновую картинку.

4. Простота дизайна: никаких лишних элементов

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

Дизайнеры сайта компании The New Wave Company поступили именно так, когда отказались от большого фонового изображения в заголовке.

Еще один отличный пример реализации этой тенденции — простой и лаконичный сайт digital-агентства Rareview. Здесь тоже нет больших и «тяжелых» фоновых изображений в заголовке.

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

5. Фиксированная ширина сайта

В последнее время большинство сайтов применяли параметр «width: 100%», чтобы масштабировать размер таких элементов дизайна, как изображения и блоки до ширины окна браузера. Прежде чем этот тренд стал популярным, большинство сайтов имели фиксированную ширину и были выровнены относительно центра страницы.

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

Эту тенденцию демонстрирует сайт Michele Mazzucco. Если просматривать его в окне, ширина которого превышает 1350 пикселей, можно увидеть, где находится правая и левая границы контента сайта (а также фоновых цветов соответствующих блоков сайта). Таким образом веб-дизайнеру удается сфокусировать внимание пользователя на контенте сайта, а заодно изящно поставить подножку параметру «width: 100%».

6. Заказные профессиональные фотографии

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

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

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

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

7. Всплывающее или выскальзывающее меню

Адаптивный веб-дизайн существует уже не первый день. До недавнего времени дизайнеры заботились в первую очередь о том, чтобы привлекательно выглядела основная версия сайта, просматриваемая с помощью компьютера, мобильные же версии оставались в тени. Тенденция, заданная адаптивным дизайном, требует, чтобы сайт выглядел интересно при обращении с любого устройства.

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

Например, сайты 24ways и Rawnet иллюстрируют тенденцию применения адаптивного дизайна не только для мобильной версии сайта, но и для его десктопной версии.

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

8. Скрытое главное меню

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

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

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

На сайте Brian Hoff Design иконка-гамбургер встречается во всех версиях сайта, независимо от используемого устройства и размера окна, благодаря этому дизайн сайта остается простым и функциональным.

9. Огромный шрифт

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

Пример использования шрифтов гигантского размера на домашней странице — сайт компании Tiny Giant. Очень трудно не заметить текст, набранный шрифтом такого размера.

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

10. Эффективность и скорость

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

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

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

С оригинальном текстом статьи Эмбер Ли Тернер “10 Webdesigntrendsyoucanexpecttoseein 2015” можно ознакомиться в блоге The Next Web.