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

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

1) Полный экран и не прокручиваемый

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

Основы конфиденциальности Facebook

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

  1. Основы конфиденциальности Facebook - Отличный сайт, хотя и не отзывчивый, от Facebook, объясняющий пошаговое описание того, как конфиденциальность работает на их службе. Великолепные иллюстрации!
  2. Fantasy - долгожданный новый сайт дизайнерского агентства Fantasy, запущенный ранее в этом году, не разочаровал. Особенно проверьте раздел Работа, все остается на экране.
  3. KLM 50 Travels - красивый сайт кампании для KLM. Он проходит через 50 пунктов назначения, по одному экрану за раз. Навигация с помощью клавиш со стрелками и пробел.

2. Липкий заголовок в сторону

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

Код и теория

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

  1. Код и теория - заголовки городов остаются на картинке, когда вы просматриваете открытые позиции на этом прекрасном веб-сайте.
  2. Переполнение стека - этот не подходит на все сто процентов, но это не сайт агентства, поэтому он дает ему пропуск. При прокрутке суб-навигация остается липкой вправо. Приятно.
  3. DDB Sthlm - я из Швеции, поэтому я добавлю и шведский пример. Если вы нажмете Работать в их меню и прокрутите вниз, вы увидите, что вертикальный заголовок остается на стороне.

3) Логотип загрузчика

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

инструмент

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

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

4) Нарушенные фоновые изображения

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

Активная Теория

Три примера нарушенных фоновых изображений:

  1. Сделай мне пульс - наведите курсор мыши на фон и увидите, как горы оживают, очень хорошо сделано.
  2. Active Theory - Если вы создаете веб-сайт для своего агентства, какой лучший способ показать, что вы приобрели некоторые безумные веб-навыки, чем сделать его похожим на эксперимент Google? Никто.
  3. Детали - это займет немного прокрутки. Это швейцарское дизайнерское агентство, очевидно, не верит в якорные ссылки, поэтому, если вы прокрутите вниз до нижней части страницы 4/4 Nos Experts и наведете курсор на фотографии, вы увидите на них небольшое искажение. Ницца!

5) поверх анимации

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

Waaark

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

  1. Вааарк - Лол, эта маленькая дизайнерская студия создала самые потрясающие визуальные впечатления этого года. Оставьте это французскому языку, чтобы перейти к вершине, когда дело доходит до анимации.
  2. Animocons - это несколько примеров значков с эффектной анимацией щелчка, все они сделаны с использованием веб-кода.
  3. Rally Interactive Beta - Rally отлично справляется с отсутствием необходимого количества анимаций на своем сайте. Они сходят с ума в верхней части, а затем сохраняют мягкость, когда вы нажимаете и выбираете что-то.

Бонус: пока что это не тренд, его можно увидеть только в одном или двух местах, но создание адаптивных сайтов, которые масштабируются до бесконечности, будет огромным. То есть, на экране 1280px сайт выглядит точно так же, как на iMac 27-дюймовом экране Retina 5100+ px, он только больше. Посмотрите, например, отличный сайт для бразильского оператора связи Oi.

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

Кроме того, если вам понравилась эта статья, пожалуйста, нажмите рекомендовать ниже. Это очень помогает.