5 актуальных трендов веб-дизайна

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

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

Никто не любит кликать обманки.

Так или иначе, вот вам список из пяти актуальных трендов на первую половину 2016 года.

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

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

Ключ к успеху при проектировании таких сайтов - нужно руководствоваться размером экрана как ограничителя. А прототипы создавать в Keynote.

На таких сайтах часто используют навигацию с клавиатуры.

Три примера полноэкранных сайтов без скроллинга:

• Facebook Privacy Basics - отличный сайт, где Facebook шаг за шагом объясняет как в соцсети работает защита персональных данных.
  Прекрасные иллюстрации!
• Fantasy  - долгожданный новый сайт дизайн-агентства Fantasy, запущенный в начале этого года не разочаровал. Обратите особое внимание на раздел «Работа», все важное остается на экране.
• KLM 50 Travels   - прекрасный сайт для специальных акций KLM. Он проведет вас по 50 туристическим направлениям, по отдельному экрану на каждое. Навигация осуществляется с помощью стрелок на клавиатуре и пробела.

2. «Прилипшие» заголовки в боковой области

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

Тренд работает только для десктопов. Так что если вы читаете эту статью со своего телефона, вам придется просто поверить мне на слово, игнорируя ссылки ниже.

Три примера «прилипших» заголовков:

• Code & Theory - названия городов в заголовках остаются на экране, когда вы пролистываете открытые позиции.
• Stack Overflow   - этот сайт не соответствуют тенденции на сто процентов, но это и не дизайн-агентство, так что как пример подойдет. При прокручивании субнавигация остается «прилипшей» справа. Отличный вариант.
• DDB Sthlm  - так как я люблю Швецию, приведу в пример шведский сайт. Если вы нажмете раздел «Работа» из меню и прокрутите вниз, вы увидите, что вертикальный заголовок всегда остается сбоку.

3. Логотип как элемент загрузки страницы.

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

Три примера использования логотипа при загрузке:

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

4. «Оживающие» фоновые изображения

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

Три примера «оживающих» фоновых изображений:

• Make me pulse   - Наведите курсор на фон и увидите как горы оживают. Хорошо сделано.
• Active Theory  - Если вы делаете сайт для вашего агентства, не лучший ли способ показать ваши дизайнерские навыки, опираясь на опыт Google? Несомненно лучший.
• Details  - тут надо будет немного проскроллить. Это швейцарское агентство дизайна видимо не верит в якорные ссылки. Но если вы прокрутите вниз до нижней части четвертой страницы «Nos Experts» и наведете курсор на фотографии, вы увидите мини-анимацию на них. Миленько.

5. Насыщение анимацией.

Технически сейчас это возможно, так почему бы этим не воспользоваться? Если все сделано правильно, то это выглядит довольно забавно, и станет для вас интересным визуальным опытом. Если сделано неправильно, то это очередной флэш-сайт. Из мудрых советов: если уж принялись что-то делать, то будьте осторожны, но сделайте лучше всех.

Три примера анимации:

• Waaark  - эта маленькая студия дизайна произвела одно из самых потрясающих визуальных впечатлений этого года. Оставьте французский, когда дело дойдет до анимации.
• Animocons  - некоторые примеры иконок с захватывающей анимацией по клику. Все это делается с помощью веб-кода.
• Rally Interactive Beta  - Rally решили не ограничивать себя небольшим количеством анимационных решений. На своем сайте они «безумствуют» в верхней части страницы, и успокаиваются только когда вы выбрали определенный раздел.

Бонус

Это еще на самом деле не тренд, он был замечен пока только в одном или двух местах. Но интерес к созданию адаптивных веб-сайтов, поддающихся масштабированию, набирает обороты. То есть сайт выглядит одинаково и на 1280-пиксельном экране, и на iMac 27" Retina 5100+, только больше. Посмотрите для примера отличный сайт бразильского оператора связи Brasilian telecom operator Oi.