5 настоящих трендов веб-дизайна в 2016 году
Наблюдениями делится Нильс Скёльд, UX-дизайнер
Всякий раз, когда я вижу заголовок «Тренды веб-дизайна этого года», я радостно кликаю по нему и тут же разочаровываюсь. Всегда я обнаруживаю тренды прошлогодние или вообще что-то не по теме. Поэтому я решил составить для вас список реальных трендов веб-дизайна 2016 года.
Полный экран и отсутствие скроллинга
Не-пролистываемые сайты наконец-то набирают популярность. В то время как одностраничные сайты с закреплённым хэдером, которые можно скроллить хоть вечность, фактически стали стандартом, странички, для навигации по которым приходится кликать, всегда радуют глаз. Часто для навигации используется клавиатура.
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 — примеры иконок с анимациями кликов (осторожно, очень залипательно, если переходить по всевозможным ссылкам на этом сайте!).
Бонус: пока что это ещё не тренд, но скоро делать сайты бесконечно масштабируемыми будет действительно модно. Посмотрите на этот сайт в качестве примера.
Кстати, мы уже приводили примеры веб-страниц, поражающих воображение.