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

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

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

3. Широкоформатное видео
Полноэкранное видео на бэкграунде сайта, несомненно, сразу же овладевает нашим вниманием. Это хороший прием, чтобы заинтересовать посетителя. Современное развитие технологий позволяет легко встраивать видео на сайт, а значит дизайнеры все чаще будут использовать этот прием. Однако, есть один нюанс, смотреть видео интересно только первый раз, во второй и третий раз это уже надоедает. Поэтому этот прием эффективен только для новых посетителей.

5. Синемаграфия
Хорошая альтернатива широкоформатному видео и большой фотографии на бэкграунде. Синемаграфы — это фотографии, на которой происходят незначительные повторяющиеся движения. Обычно они представлены в gif формате и создают зрителю иллюзию просмотра видео. Подробнее о синемаграфии с большим количеством примеров можно посмотреть в подборке

6. Плоский дизайн
Еще один мощный тренд последних лет. Сайтам, выполненным в плоском цвете, присуща аккуратность и ясность. Но, в последнее время, появилась новая разновидность плоского дизайна — Semi flat. Это когда весь дизайн выполнен в плоском цвете, и только один элемент имеет тень, градиент или текстурность. Как, правило, этим элементом является кнопка, которой придается объемность или выпуклость для привлечения внимания посетителей.

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

8. Анимация объектов
Возможности современного html5 и css3 позволяют использовать большой арсенал визуальных эффектов на сайте. Это делает взаимодействие со страницей более интересным и увлекательным для посетителя. Так что в новом году мы также увидим самые неожиданные интерактивные микроперемещения объектов, как правило, реагирующие на движение мышки. Возможно мы увидим примеры более сложной анимации.

9. Яркие цветовые схемы
Популярные модные цвета 2017 года отдают предпочтение яркости и насыщенности. Интересные оригинальные оттенки алого, горчичного, желтого, изумрудного, глубокого синего, а также красная, сиреневая и шоколадная гамма помогут вашему сайту выделиться и приобрести собственный уникальный стиль.

10. Скроллинг сайта
Поскольку скроллинг сайта идеально подходит для мобильных устройств, то его присутствие будет значительным и в 2017 году. Единственное, скроллинг не оставляет простора для взаимодействия с пользователем, и поэтому, ощущается некая усталость от бесконечно подгружающегося контента. Возможно тренд развернется в сторону комбинации простых управляющих элементов со скроллингом.

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

12. Модульная конструкция
Модульная конструкция или карточный интерфейс, состоящий из автономных смысловых блоков, был популярен некоторое время назад. Этот тренд очень хорош для мобильных устройств, поскольку блоки хорошо выстраиваются под любое разрешение экрана. Но на больших сайтах выглядят достаточно одинаково и трудно поддаются иерархии и структурированию.

13. Одностраничники
Сайты-одностраничники, посадочные страницы, лендинг пейджи стали неотъемлемой частью современного интернета. Подробнее, что такое лендинг пейдж можно прочитать в статье и . В 2017 году у лендингов будет усиливаться акцент на кнопку, призывающую к действию — заказать, позвонить, записаться и т.д. Все остальное, отвлекающее внимание потенциального посетителя, будет отсекаться.

14. Графическая реклама
Еще хотела бы отметить один момент, чем мне запомнился минувший год, и скорее всего тенденция будет продолжаться и в 2017. В связи с коммерциализацией рунета и ростом интернет торговли существенно увеличился спрос на графические промо материалы для рекламы и продвижения — баннеры, тизеры, карточки, флаеры.

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

16. Инфографика
Графическое представление в виде инфографики все еще популярно и востребовано. Сопровождение текста красивой картинкой или иконкой в совокупности со стильными элементами оформления делают инфографику эстетически привлекательной. Особенно визуально наглядна и интересна сравнительная инфографика — типа было-стало, да-нет, плюсы-минусы, можно-нельзя и т.д. Также с помощью инфографики можно рассказать поэтапную историю или живо представить скучную статистику.

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

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

19. Леттерстакинг
Леттерстакинг (англ. letter stacking) — это текст в квадрате. По сути, это пример сложного творческого решения — нужно представить длинный текст в объеме крохотного пространства. При этом, это должно смотреться красиво и оригинально. В этом году это еще и модно.

20. Пустая кнопка
В силу экономии места и пространства на мобильных устройствах некоторое время назад появилась пустая кнопка — крупная надпись с квадратной обводкой вокруг слова. Такая кнопка дает обзор бэкграунда за кнопкой и при этом сохраняет свою функциональность полноценной кнопки. Плюс, как дизайнерский элемент, такая кнопка смотрится стильно и аккуратно.

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

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

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

24. Самовоспроизводящееся аудио и видео
А вот этот тренд — привет из 2000-х. Я помню тогда было модным воспроизводить звук при попадании на сайт. Причем многих этот . Не могу сказать что аудио сопровождение меня радует, но возможно, умеренное использование будет ненавязчиво. Ну а самовоспроизведение видео — это больше дань рекламе, как по мне. Ну и плюс желание удержать внимание посетителя в ленте. Не самый приятный тренд, но коммерчески необходимый.

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

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

Создание обычного веб-сайта — не такая простая задача, как создание эффективного онлайн-маркетингового инструмента с современным дизайном. Для красивого и хорошо оптимизированного сайта требуется много времени, инвестиций и даже вдохновения. Как сделать дизайн сайта, чтобы привлечь больше клиентов? Разберемся в статье.

Согласно статистике Internet Live Stats , в мире насчитывается более 1,2 миллиарда сайтов. Каждую секунду это значение становится выше примерно на 10 единиц. Независимо от отрасли, в которой вы работаете, ваш веб-сайт должен соответствовать современным требованиям как в технологическом, так и в дизайнерском аспектах. В этой статье мы сделаем упор на внешний вид сайта — как он должен выглядеть в 2017 году. Слишком яркие, красочные и вычурные шрифты считаются устаревшими уже давно. Иконки вытесняют изображения, чтобы облегчить пользователям перемещение по пунктам меню. Впрочем, эти факты известны большинству специалистов, связанных с Интернет-маркетингом. Из данной статьи вы узнаете, как должен выглядеть современный дизайн сайтов.

1. Ориентированность веб-дизайна прежде всего на мобильные устройства.

Так называемый mobile-first подход в разработке веб-сайтов существует уже более 5 лет. Хоть это и не новая тенденция, но её точно стоит отметить, поскольку она стала обязательной для любого владельца бизнеса, если он стремится увеличить продажи с использованием этого маркетингового канала.

Что означает mobile-first подход? Это веб-разработка, в которой основное внимание уделяется адаптации под мобильные устройства. Использование адаптивного дизайна вполне обосновано, особенно, если учитывать официальную статистику, опубликованную компанией StatCounter , независимым агентством по веб-аналитике. По его данным, доля использования сети Интернет с помощью мобильных устройств составляет 51,3%. Именно по этой причине Google прекратил поддержку своего сервиса Instant Search. Эта функция была доступна пользователям десктопов и предлагала результаты поиска во время того, как человек только вводил свой запрос. С ростом трафика владельцы бизнеса смогут получить больше продаж. Поэтому сосредотачиваться на более широкой аудитории — вполне имеет смысл.

2. Скрытая навигация

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

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

3. Просторный первый экран

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

4. Выделенные области навигации

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

5. Разработка дизайна сайта в стиле Material Design Lite

Material Design стал важным продолжением так называемого плоского дизайна, широко используемого тренда в течение последних нескольких лет. Android-дизайн был создан как интерфейс для мобильных устройств, но теперь он полностью покорил и десктопы. Этот визуальный подход делает юзабилити основным компонентом всей задумки. Material Design Lite (MDL) является следующим поколением Material Design. Он включает в себя рекомендации, наборы макетов и общую структуру с инструментами, которые позволяют любому дизайнеру быстро и легко создавать MDL сайт с помощью удобной выборки палитр.

6. Большие иконки

Популярность значков в дизайне веб-сайтов объясняется тем, что человек помнит 65% визуальной информации через три дня и только 10-20% — письменной или устной. Поэтому человеческому мозгу легче обрабатывать изображения, чем текст. Стоит отметить, что иконка должна соответствовать тексту, к которому она относится, чтобы не путать пользователей. Приевшиеся изображения людей с гипертрофированной и искусственной мимикой — устарели. Иконки также должны быть векторными, чтобы корректно отображаться на любом устройстве. Вы можете посмотреть примеры дизайна сайтов в нашем и познакомиться с нашими работами.

Главные требования к использованию иконок в веб-дизайне:

• Иконка должна соответствовать контенту;
• Она должна содержать четкое сообщение;
• Она должна быть векторной;
• Иконка должна легко читаться, будь она маленькая или крупная.

Перейдем к последним тенденциям в выборе шрифтов и цветов для сайта.

7. Простые шрифты и мягкая цветовая палитра

Токсичные цвета в веб-дизайне перестали быть популярными около пятнадцати лет назад. Теперь дизайнеры перешли к сдержанным пастельным оттенкам, мягким не кричащим цветам. Схема 60-30-10 не теряет свою актуальность: в современном веб-дизайне превалируют нейтральные цвета от белого до бледно серого, для 30 процентов пространства используют более яркий тон, и всего 10 % окрашивают в насыщенный цвет, создавая тем самым призыв к действию.

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

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

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

Статья разделена на два основных направления: графика в веб-дизайне и сама разработка, а также каждый раздел имеет свои составляющие.

ТРЕНДЫ ВЕБ-ДИЗАЙНА

Итак, начнем мы с трендов веб-дизайна 2017 года и что нас ожидает в 2018. Какие изменения произошли в графике, использованию шрифтов, анимации и видео, ну и так далее.

Графический дизайн

Модным считается направление - плоского дизайна (Flat Design). Используется векторная графика с добавлением растровой для акцентов, ниже указаны примеры таких сайтов. Минимализм и отзывчивый дизайн, просто и понятно для пользователей сайта.

Векторные изображения

Увеличивается использование вектора на сайтах, он имеет малый вес, а значит загрузка идет быстрее. Так как вектор можно растягивать и сжимать как угодно, ваша графика будет всегда выглядеть отлично на экране любых устройств с любым разрешением. Для векторных изображений используйте SVG (Scalable Vector Graphics) формат. Большинство векторных редакторов позволяют сохранять в этот формат и нет необходимости для специфического софта.

Бесцветные - призрачные кнопки

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

Нажмите на изображение для его увеличения

Стильная 3D графика

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

Нажмите на изображение для его увеличения

Анимация, видео и интерактивные объекты

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

Сложные сетки

Еще в конце 2016 появилось направление сайтов с использованием динамических, сложных сеток с ультрасовременным дизайном.

Геометрия в разных формах

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

Нажмите на изображение для его увеличения

Модные цвета

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

Безусловная адаптация

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

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

Альтернативы мобильных меню

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

Гибкое динамичное меню

Решение заключается в меню, которое подстраивается под ширину экрана, показывая столько вкладок, сколько можно, а что не входит – прячет под «Больше».

ТРЕНДЫ ВЕБ-РАЗРАБОТКИ

Продуманный дизайн

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

Текста меньше – да лучше!

Текстовая часть сайта должна быть лаконичной, максимально по сути, и раскрывать предлагаемую тему. Если есть возможность дополните ее техническими деталями, такими как: цены, характеристики и.т.д.

Рейтинг CMS

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

Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого обзора самых ярких тенденций, на примерах TRENDY сайтов.

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

Читайте также: 8 веб-трендов на 2019 год: современные лэйауты

В плане эстетической привлекательности, 3 года подряд плоский стиль господствовал в WEB-е. Затем, Google представил материальный дизайн, что немного вывело нас из визуальной абстракции. В 2017 году веб-дизайн сделает еще один шаг обратно – к реалистичности. Будь то формы, выбор цвета или функционала - 2017-й станет годом гибридов, в которых пересекутся реалии физического мира и технологии. Результатом следует ожидать лучшие возможности для просмотра веб-страниц.

Вот девять веб-дизайн трендов, способных сократить этот разрыв.

1. Pop-out навигация

Сегодня, когда мобильная аудитория уже с удовольствием просматривает интернет-страницы, значимость пространства экрана высока как никогда. Скрывая функционал и навигацию до момента «пока не понадобится», современные web-дизайнеры и маркетологи стремятся разгрузить пространство сайтов для продающего визуала.

Pop-out меню, созданное специально под смартфоны, улучшает UX и на больших экранах. Как ни странно, спрятанное меню лучше акцентирует на важном, побуждая сосредотачиваться на определенной цели за один раз. При открытии меню, оно становится центром внимания на странице, а также активно используется в процессе изучения сайта.

Преимущества:

• Экономия пространства на экране
• Акцентируя внимание пользователей на меню, улучшает навигацию по сайту
• Скрытие элементов навигации, помогает лучше сконцентрироваться на других моментах (например, целях конверсии)
• Улучшенный внешний вид первого экрана
• Более гибкая структура дизайна

Читайте также: 20 лучших примеров дизайна главной страницы сайта

Лучшие практики:

Цветовое оформление в тон страниц сайта. Максимальный эффект при таком упрощения веб-страницы, достигается одноцветным фоном или однотонной структурой выскальзывающего меню.
Не отвлекайте пользовательское внимание на навигацию – лучше оставить фишки и украшательства для самих страниц. Конечно, красивому современному дизайну , стильное меню не повредит:

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

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

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

Сдвиг / перекрытие контента при открытии. Выезжающее меню редко делают занимающим весь экран. Обычно оставляют видимой часть контента страницы, что на малом экране позволяет легко к нему вернуться. На десктопе это выглядит как модная «мобайл-имитация».

2. Вопреки парадигмам навигации – альтернативы

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

Преимущества нестандартной навигации:

• Уникальный дизайн
• Новации привлекают
• Расширяется опыт пользования (UX)
• Для дизайнеров – новые возможности оформления сайтов

Лучшие практики:

Читайте также: 11 креативных сайтов отечественных студий веб-дизайна

Различные эксперименты с навигацией по сайту. При столь неоднозначном отношении к «бургерам», в 2017 году надо ждать появления интересных новшеств в навигации.

Уникальное меню Hillsiderancho.com сочетает верхнюю, левую, правую и скролл навигацию

Вообще без меню навигации. Современный пользователь сталкивается с массой контента и ему не надо объяснять, что делать дальше. Скроллить! На органичность такого поведения уже обратили внимание в предыдущих веб-трендах (горизонтальная, бесконечная прокрутка, управление с клавиатуры, жестами…). Некоторые дизайнеры отказываются от меню совсем, предлагая посетителю использовать / получать опыт «продвинутого» исследования сайтов. Адаптация сайтов под мобильные и планшеты, также меняет UX / сами интерфейсы и открывает перспективы для горизонтальной прокрутки.

Сайт не имеет навигационного меню – просят скроллить для обнаружения контента, можете листать курсором

Читайте также: Самые необычные и оригинальные сайты

Всплывающее меню. Мы были так увлечены Drop-Down, что даже не рассматривали простую альтернативу Pop-UP навигации. В примере ниже, меню всплывает в центре экрана. Вообще, на веб-страницах достаточно пространства для создания доступной и заметной навигации, без каких-либо выпадающих списков.

Используется pop over навигация, когда наведение на одну из 6 секций меняет фон всего полноэкранного меню

3. Карточки – вдохновение носимой электроникой

Как мобильные пользователи изменили дизайн современных сайтов, так носимые устройства начинают влиять на их оформление. С десятками миллионов проданных с 2015-го года носимых гаджетов, их пользователи научились ценить рациональное совершенство и в других сферах. Экономя место на экране, носимая электроника приучит упрощать визуально и веб-дизайнеров, а маркетологов – еще больше конкретизировать и формализовать задачи сайтов. Главные правила веб-дизайна по принципу контейнеров: стильно, лаконично и без больших усилий – идеология «less is more» не ограничивает себя размерами экранов.

Преимущества:

• Оптимизированный UX дизайн
• Меньше неясностей и отвлекающих факторов
• Минимализм ускоряет загрузку сайта

Лучшие практики:

Плитки, принцип контейнеров и блоки в структуре веб-страниц. Тренд сохраняется уже не один год (2014 – 2016-й…) и вероятно 2017 год продолжит сложившуюся тенденцию. Популярные сейчас и новые модели гаджетов («умные» очки, часы, браслеты, прищепки, встроенные в одежду сенсоры…) выполнены в лаконичном стиле и столь же ненавязчиво информируют пользователя. Ожидаемо, носимые технологии вдохнут новую жизнь в легко считываемые плиточные интерфейсы. Контейнерная модель карточного UI подразумевает упорядочение с самодостаточностью и успешно масштабируется для больших экранов.

Крупные SVG иконки. Иконке нужна масштабируемость, простота – чтобы смотрелась на HD устройствах и замечалась беглым взглядом.

Строгая цветовая палитра. Модные цветовые схемы возвращаются сейчас к базовым основам. Двухцветный дизайн сайта (дуотон) или черно-белое оформление с добавлением одного цвета становятся все популярнее.

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

4. Material Design Lite (MDL)

Читайте также: Лучшие дизайны интернет-магазинов в стиле Flat и Material

Облегченная реализация материального дизайна от Google (MDL) предоставляет библиотеку шаблонов, наборы элементов (карточки, формы, иконки, кнопки …) и является интерпретацией каталога готовых Polymer-компонентов.

С руководствами, по уже существующим шаблонам и open-source компонентам, MDL делает материальный дизайн открытым для внедрения на любом сайте или приложении. Псевдо-3D-слои, тени, анимации – интерфейсные элементы классического веб-дизайна, приближающие юзабилити к имитации реального мира.

Преимущества:

• MDL отличается в лучшую сторону от оформления традиционных сайтов, сохраняя изначальные выгоды классического веб-дизайна
• Легко вникать благодаря наглядности реалистичного интерфейса
• Кроссплатформенная доступность для всех устройств (без привязки к JS)

Лучшие практики:

Механика материального мира. Рассматривайте стилистические элементы MDL, как как реальные физические объекты, а именно:

• Тени должны выглядеть, как отбрасываемые естественным источником света
• Размер и толщину элементов выбирайте, как для реальных объектов – в соответствии с физическими законами
• Движение – реакция на пользовательское взаимодействие

Кастомизация. Воспользуйтесь преимуществами библиотеки компонентов MDL, отбирая необходимое в нужном сочетании.

Палитра плоских цветов. Материал-стилю MDL лучше всего подойдут плоские цвета – яркие и смелые их сочетания. Обычно выбирается один основной цвет и один акцентирующий. Это также соответствует минималистичной эстетике, поддерживаемой двумя предыдущими трендами.

Читайте также: Цвета в Web дизайне: колор-тенденции (яркие тона)

5. Винтажные цвета

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

Обувной интернет-магазин использует приглушенные цвета вроде сепии. Цветовой дизайн, имитируя винтаж со старинными фотографиями, подчеркивает высококачественность товара (в лучших традициях фамильного бренда)

В 2016 году многие компании провели редизайн своих сайтов, сократив количество опций навигации. В 2017 году этот тренд продлится.

Меню в хедере страницы, которые раньше включали 5-7 опций, теперь будут предлагать 3-4 варианта.

Меньшее количество вариантов облегчает пользователю поиск нужной информации и позволяет избежать ситуации «паралича выбора».

Хорошим примером нового подхода является Ikea. На скриншотах ниже вы можете сравнить старую и новую версии сайта компании.

Старая версия:

Новая версия, запущенная в 2016 году:

1. Отказ от гамбургер-меню

Гамбургер-меню не даёт пользователю представления о глубине сайта или приложения. В итоге он остаётся дезориентированным.

Spotify уже отказался от гамбургер-меню в своём приложении. В 2017 году его примеру последует ещё больше компаний.

1. Дуотоны

Использование дуотонов делает оформление сайта минималистичным и позволяет удержать внимание пользователя на основном сообщении или навигации.

В 2017 году ожидается более активное использование дуотонов вместо полноцветных фонов.

1. Тактильный дизайн

Недостатком параллакс-прокрутки является замедление скорости загрузки страницы.

В 2016 году анимация рассматривалась как перспективный тренд. Однако в этом году в центре внимания разработчиков находится производительность. С этой точки зрения параллакс-скроллинг – не самое оптимальное решение.

1. Осмысленное действие

Одним из основных принципов материального дизайна является «осмысленное действие». В Google считают, что «действие должно быть осмысленным и целесообразным, служить для привлечения внимания и поддержания непрерывности» .

Приложение Tumblr – хороший пример реализации этого принципа. В 2016 году оно выиграло премию Material Design за анимацию.

1. Отказ от низкокачественных стоковых изображений

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

1. Меньше приложений, больше PWA

Технология PWA (Progressive Web Apps) позволяет сайту работать по принципу приложения. В том числе офлайн. Её уже используют такие крупные издания и компании, как The Washington Post, Airberlin и Flipkart. В этом году популярность технологии будет расти.

1. Шрифты Google

Google создал библиотеку шрифтов с открытым исходным кодом в 2010 году. В 2016, продолжая работать над материальным дизайном, компания также улучшила свой сервис Google Fonts . В результате предпросмотр шрифтов стал более быстрым, а их настройка – проще. В разделе Featured собраны те шрифты, которые хорошо сочетаются с материальным дизайном.

В 2017 году ещё больше веб-дизайнеров будут работать со шрифтами Google.

1. Минимализм

Этот тренд объединяет в себе многие другие тенденции, упомянутые выше. Минимализм означает акцент на производительности (скорость) и юзабилити. В рамках этого подхода важную роль играют типографика, контраст и пространство.