5 настоящих трендов веб-дизайна в 2016 году

Наблюдениями делится Нильс Скёльд, UX-дизайнер

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

%save-sc0% Для более полного UX лучше всего смотреть примеры этой статьи с десктопной версии браузера.

Полный экран и отсутствие скроллинга

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

3 примера таких сайтов:

• Facebook Privacy Basics —  прекрасная страничка от Facebook с пошаговыми объяснениями принципов безопасности на сайте. (Для того, чтобы понять, о чем я говорю, зайдите в один из разделов, например, этот.)
• Fantasy  —  дизайнерское агентство представило новый сайт в прошлом году, и он действительно радует глаз.
• KLM 50 Travels  —  сайт рекламной кампании KLM, на котором вы сможете полюбоваться пятьюдесятью прекрасным видами со всего мира.

Закреплённый сбоку заголовок

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

3 примера таких сайтов:

• Code & Theory — названия актуальных городов остаются на экране, пока вы смотрите вакансии.
• Stack Overflow — не вполне подходит, но навигационное меню закреплено слева, и в нём отображается текущий раздел.
• DDB Sthlm — шведский сайт, у кого тоже есть такая фича: посмотрите раздел Work.

Лого на загрузочном экране

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

3 примера таких сайтов:

• Instrument — на этом сайте при загрузке страницы и открытии навигационного меню отображается название. Выглядит стильно.
• Fubiz — этот сайт при запуске наделал шуму (в хорошем смысле). У каждой секции свой логотип, и все они красиво анимированы.
• This Also — на этом сайте данная фича применена к навигационной иконке.

Действия с фоновыми изображениями

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

3 примера таких сайтов:

• Make me pulse — водите мышкой и смотрите, как оживают горы.
• Active Theory — смотрите гифку выше. Nuff said.
• Details — тут придётся поскроллить. Долистайте до раздела Nos Experts и посмотрите на фотографии.

Анимация… много анимации

С этим главное — не перестараться: если анимации будет слишком много, это будет похоже на Flash.

2 примера таких сайтов:

• Waark — эта французская студия стала лидером в области анимации в этом году.
• Animocons — примеры иконок с анимациями кликов (осторожно, очень залипательно, если переходить по всевозможным  ссылкам на этом сайте!).

Бонус: пока что это ещё не тренд, но скоро делать сайты бесконечно масштабируемыми будет действительно модно. Посмотрите на этот сайт в качестве примера.

Кстати, мы уже приводили примеры веб-страниц, поражающих воображение.