5 настоящих трендов 2016 года в веб-дизайне
Вот вам список из пяти трендов, которые были замечены впервой половине этого года.1. Полный экран без скроллинга
В конце концов, сайты без возможности скроллинга наспобедили. В то время, когда одностраничные сайты с бесконечной прокруткой иприлипчивым заголовком вверху стали уже нормой, так приятно видеть страницы, накоторых навигация осуществляется с помощью кликов мышкой. И иногда этодействительно здорово, поскольку люди терпеть не могут скроллинг. Главное припроектировании таких сайтов – использовать экран в качестве ограничителей.
Прототипом этого выступила Keynote. Частенько на таких сайтах работаетнавигация с клавиатуры.
Facebook Privacy Basics
Три примера полноэкранных сайтов без скроллинга:
Facebook Privacy Basics – отличный сайт, хотя и не самыйотзывчивый. Facebook в подробностях объясняет, как работает защита личныхданных в социальной сети. Замечательные иллюстрации!
Fantasy – одноименное дизайнерское агентство в начале годазапустило новый сайт, и он нас не разочаровал. В разделе «Работа» все элементыпостоянно находятся перед глазами.
KLM 50 Travels – прекрасный сайт кампании от KLM. Он«проводит» вас по пятидесяти направлениям – по экрану на каждое. Навигацияосуществляется с помощью стрелок на клавиатуре и пробела.
2. Прилипчивые заголовки с боковИзучая актуальные тренды, всегда полезно изучать сайтыдизайнерских агентств или даже скорее дизайн-студий. И недавно в моду вошлизаголовки, прокручивающиеся вместе с текстом. Тренд работает только длядесктопов. Так что, если вы читаете эту статью со смартфона, вам придетсяпросто поверить мне на слово.
Code & Theory
Три примера таких заголовков:
Code & Theory – названия городов всегда остаются у васперед глазами, когда вы открываете новые разделы этого замечательногосайта.
Stack
Overflow – этот сайт не придерживается тренда на все сто. Но, с другойстороны, это и не сайт агентства, так что сойдет. Когда вы прокручиваетестраницу вниз, субнавигация всегда будет у вас по правую руку.
DDB Sthlm– если вы кликните на раздел «Работа» и будете прокручивать страницу вниз,сбоку у вас всегда будет виден вертикальный заголовок.
3. Логотип на загрузке
Это мощный тренд, который уже в порядке вещей для агентскихсайтов этого года. Такое есть у всех. И правильно, потому что это отличносмотрится и создает у посетителей ощущение, что сайт является неотъемлемойчастью бренда. Очень умно.
Instrument
Три примера использования логотипа при загрузке:
Instrument – логотип компании на этом сайте виден лишь впроцессе загрузки страницы, и когда вы открываете навигационное меню. Это свежои броско.
Fubiz – этот сайт после запуска наделал много шуму инеспроста. Для каждого раздела тут есть свой собственный логотип. И каждый изних очень здорово анимирован.
This Also – замечательный сайт дизайн-студии со множествомвсяческих новинок, ранее никогда не встречавшихся на сайтах агентств. Хотятехнически логотипа здесь нет, и при загрузке показывается навигационное меню,оно расположено там, где обычно размещают логотип. Так что в качествеподтверждения тренда подойдет.
4. Меняющиеся фоновые изображенияВ фоновых картинках, заполняющих собой все окно браузера,нет ничего нового. После поста «Актуальные тренды в веб-дизайне в 2013 году»,это уже стало классикой. Но в этом году мы вышли на новый уровень. Простонаведите курсор мыши на фоновый рисунок и получите удовольствие.
Active Theory
Три примера использования меняющихся фоновыхизображений:
Makeme pulse – подвигайте мышкой по фоновому рисунку, и вы приведете к жизнигоры. Очень хорошо сделано.
Active
Theory – может ли быть способ лучше показать владение безумнымидизайнерскими навыками, чем тот, который выбрала Google? Не может.
Details – тут надо будет немножко покрутить колесо мыши.
Швейцарское дизайнерское агентство, очевидно, не верит в якорные ссылки.
Поэтому, если вы доскроллите до конца четвертой страницы Nos Experts и наведетекурсор на фотографии, вы заметите мимические движения на лицах. Отлично!
5. Анимация поверх экрана
Сейчас это технически возможно, так почему бы этим невоспользоваться? Если все сделано правильно, то этот подход к оформлению можетрадовать глаз и развлекать пользователей. Если все было сделано неправильно, тоэто будет очередной «сайт на флэше». Мудрый совет: пользуйтесь этим осторожно,но, делая это, все же старайтесь прыгнуть выше головы.
Waaark
Три примера использования подобной анимации:
Waaark –прикольно, но эта маленькая дизайн-студия в этом году проделала по-настоящемувпечатляющую работу.
Animocons – пример иконок с замечательной кликовойанимацией. Все это сделано с использованием веб-кода.
Rally Interactive Beta – Rally тоже отлично потрудилась,решив не ограничивать себя в анимации. У них там какое-то безумие, котороестихает, когда вы выбираете конкретный раздел.
Бонус
Это еще не тренд – он был замечен всего-то в паре мест – норазработка адаптивных веб-сайтов, поддающихся всевозможному масштабированию,скоро станет дико модной. Благодаря этому подходу сайт будет выглядетьодинаково на 1280-пиксельном экране и на iMac 27" Retina 5100+. Можетепроверить это на примере сайта бразильской телекоммуникационной компанииOi.