Тренды flat дизайна в году. Анимация, видео и интерактивные объекты. Сложная разметка, пришедшая из основ графического дизайна

Давайте разберемся, что значит быть популярным, модным и современным в веб-дизайне в 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 справа от картинки и сохраните картинку на свой компьютер.

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

Тенденции дизайна сайтов 2017:

    • Одностраничные сайты

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

    • Скроллинг

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

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

    • Яркие цвета

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

    • Типографика

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

    • Анимация

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

    • Видео

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

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

Использование видео-фона

Казалось бы, фон уже давно используется. Но по-настоящему значимым фрагментом интерьера сайта он стал только в этом году. У многих пользователей вызывает настоящий «вау»-эффект.
Пример неплохой реализации видео-фона — http://globalmonitoring.ru/

Parallax-эффект

Еще одна, казалось бы, зажиточная концепция, но применяться начала повсеместно лишь недавно. Если кто не знает, это способ добавить объемные слои на сайт, заставить их двигаться как нужно вам. Иным словом, придать больше интерактивности.
Пример — https://www.grabandgo.pt/

JavaScript и библиотеки

Кстати об интерактивности. Вы видели в 2017 году хотя бы один сайт без js? я нет. И дело даже не в самом js, а в его библиотеках. Да, jQuery — крутая штука, но все топовые фронтендеры уже перешли на react.js, angular.js, vue.js и прочие библиотеки. Я и сам собираюсь в будущем изучать одну из них (вероятно, vue.js).
А куда вы хотели без js? Все эти прыгающие элементы, затемнения, плавные переходы и прочее — это все удобно реализовать через скрипты.

Адаптивность

То, о чем стоит поговорить отдельно, и мы обязательно поговорим. Адаптивный дизайн сайта — это тенденция даже не 2017 года. Это всеобщая тенденция последних лет. Я, будучи пользователем одной из фриланс-бирж рунета, ежедневно вижу заявки типа: «Создать адаптивный сайт» или «Сайт уже есть, нужен адаптив» и прочее. Люди понимают, что сейчас человечество гораздо больше времени проводит в смартфонах, нежели за компьютером, поэтому создание адаптивного сайта (с принципом Mobile First) — очень важная составляющая создания сайта в принципе.

Боты

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

Контент-редактор сервиса по составлению инфографики Venngage Райан Маккриди рассказывает о том, что сейчас популярно в графическом дизайне, и от каких приемов в этом году пришлось отказаться.

Смелые и яркие цвета

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

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

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

Вообще, многие актуальные тренды 2017 года возникли под влиянием принципов Материального дизайна Google.

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

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

Жирный шрифт

Жирный шрифт привлекает внимание читателей. На крупные и выделяющиеся надписи невольно обращаешь внимание.

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

Просто взгляните:

Еще один хороший пример использования броских шрифтов - HubSpot. Текст находится на первом плане и подкрепляется графикой:

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

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

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

Мы применили этот метод при создании этой инфографики. Комбинация жирного шрифта и интересных цветовых решений привлекает внимание:

Шрифты от Google Fonts

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

Кстати, все 810 шрифтов абсолютно бесплатны! О да, людям нравятся бесплатные вещи. А еще им нравятся вещи, которыми очень легко пользоваться. Вот один из примеров комбинирования нескольких популярных шрифтов от Google:

На нашем сайте мы пользуемся шрифтами Roboto и Open Sans.

Оригинальные фотографии

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

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

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

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

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

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

Уверен, у каждого в вашей команде есть телефоны с камерами. Почему вы ими не пользуетесь? Сфотографируйте ваш офис или логотип и используйте эти фотографии.

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

Когда мы создавали наш новый сайт, мы сфотографировали своих сотрудников, и результат нас очень обрадовал.

Нарисованные от руки изображения и значки

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

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

Dropbox всюду использует нарисованные от руки иллюстрации. Они стали частью бренда компании и сделали его узнаваемым.

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

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

Тренд подхватил и сервис MailChimp. В отчете за 2016 год он тоже подобные рисунки.

Компания Moz, занимающаяся разработкой программ для маркетинга, вставляет иллюстрации в шапку статей:

Иногда наша любовь к рисункам проявляется и в других проектах:

Возвращение к истокам минимализма

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

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

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

Мой любимый пример минималистичного дизайна - логотип платформы Medium. Его создатели смогли скомбинировать несколько разных цветов и при этом сохранить минималистичный стиль.

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

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

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

Мы сами стали использовать более минималистичный стиль для оформления наших блогов.

Простой дизайн изображения легко доносит нужную информацию.

Использование GIF-изображений

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

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

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

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

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

Двухцветные изображения

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

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

В 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. Минимализм

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



Понравилась статья? Поделиться с друзьями: