Тенденции веб-дизайна

Тенденции веб-дизайна на 2016 год

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

Облегченный дизайн или минимализм

Долой лишние блоки, модули и элементы. Все по делу, ничего лишнего!

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

Облегченный дизайн сайта на примере главной страницы i-to.me

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

Ресайз, резиновый сайт, адаптивность под любой экран

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

Наглядный пример Адаптивности сайта на различных устройствах

Огромные фоновые изображения или видео

Большие фоновые изображения, видео-бэкграунд, теперь без этого никуда

Удивительно, насколько мощно и в тоже время элегантно смотрятся сайты с огромными качественными фоновыми изображениями, особенно если это макро-съемка. А несомненный хит – это фоновое видео. В 2015 году видео-фоны стали более распространены, и это не может не радовать. В 2016 году тенденция видео-фона укрепляется и продолжает набирать популярность.

Пример большого качественного изображения на фон сайта

Слайдер на главной странице

Слайдер в начале страницы с большими качественными фотографиями

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

Пример слайдера на главной странице

Пример слайдера на главной странице

Скрытое меню

Ненавязчивая кнопка меню, под которой скрыто боковое меню или окно навигации

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

Пример скрытого меню на сайте

Пример скрытого меню

Пример скрытого меню

Прозрачные кнопки

Стильные минималистичные кнопки с ненавязчивой анимацией

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

Пример прозрачных кнопок

Шрифты и типогафика

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

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

Вот несколько популярных шрифтов — Open Sans, Ubuntu, Helvetica Neue

И, пожалуйста! используйте light шрифты (тонкие шрифты). Они сразу преображают любой сайт и приятно смотрятся в любом дизайне.

Примеры современных шрифтов

Больше иконок и символов

Различные иконки на сайте, это микроэлементы дизайна, которые насыщают сайт

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

Пример использования иконок на сайте

Прокрутка и длинные страницы

Стиль Landing page — это длинная страница, которую можно использовать в разных разделах

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

*Прокрутите блок, используя скролл

Карточный дизайн

Блоки/карточки — удобное расположение контента. Все наглядно и понятно для каждого.

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

Пример карточного дизайна из Гугл плюс

Флэт дизайн / Материальный дизайн

Минимализм в виде флэт дизайна, поглощает все сайты. Это победа.

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

Картинка с объектами в стиле флэт-дизайн

Время идет – все меняется, развивается, и флэт дизайн — не исключение. Не то, чтобы он кардинально меняется. Самое подходящее слово – взрослеет и превращается, как сказали ребята из Гугла, в «материальный дизайн». Дизайнеры Гугла изобрели свой собственный уникальный стиль — материальный дизайн. 

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

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

Можно изучить этот стиль и научиться его использовать с помощью руководства от Гугл.


Пример материального дизайна на сайте i-to.me

Эффекты, анимация или микровзаимодействия.

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

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

*Наведите мышкой на любой элемент

Интерактивная история

Весь контент можно представить в виде интересной презентации как интерактивную историю

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

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

И еще одна менее сказочная интерактивная история. 

Прелоудер / спинер — загрузчик сайта

Анимированная загрузка сайта при переходе между страницами

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

Интересная страница ошибки 404

Страница 404 (которая не существует) должна обязательно быть нестандартно оформлена

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

Огромные заголовки

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

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

Пример использования гигантских заголовков

Градиентный фон

Красивые сочетания цветов на фоне могут выгодно подчеркнуть основную идею сайта

Градиентный фон стал популярен в момент и что-то мне подсказывает, что это будет продолжаться и дальше. В CSS3 можно поиграться цветами и направлениями градиентов и достичь идеального для данного продукта фона и никакого Photoshop не надо :)

Быстрая загрузка

Не заставляйте пользователей испытывать терпение

Каждый дизайнер и разработчик просто обязан заботиться о весе своих сайтов и, что еще важнее, об удобстве сайта для пользователей. Адаптивный веб-дизайн помог вывести в свет эти вопросы. Чтобы сделать самый быстрый на свете сайт в 2016 году дизайнеру или разработчику нужно следовать нескольким базовым советам:

  • Быстрый хостинг — просто необходим, чтобы получить высшие отметки в Google page speed;
  • Используйте больше SVG, чем PNG;
  • Разделяйте оптимизированные изображения для дефолтных и разрешений и для ретины
  • Разместите Placing Script Tags в самом низу;
  • Сжимайте CSS и Javascript-файлы;
  • Используйте библиотеки и фрэймворки.

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

Вертикальный стиль разметки

Вертикальная разметка для удобного и эстетичного представления контента

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

Пример вертикальной разметки

Фон с узорами

Все новое — хорошо забытое старое

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

Пример сайта с узором на фоне

Модульная сетка

Современно и наглядно — модульная сетка

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

Пример использования модульной сетки на сайте

Списки

Лучше список, чем сплошной текст!

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

 

Пример использования списка на сайте

Инфографика

Не просто тренд, а новый вид искусства!

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

Пример инфографики на сайте

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

Сайт Apple

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

http://www.apple.com/

Parrot

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

http://www.parrot.com/ru/products/flower-power/

Albino Tonnina

Современнейший landing page с флэт дизайном, увлекательной интерактивной историей, насыщенный анимацией и эффектами. От начала до конца это сплошной тренд. Сайт является резюме Albino Tonnina. Браво, достойное резюме.

http://www.albinotonnina.com/

The life cycle

Хороший лендингпейдж, с минималистичным дизайном. Все качественно, красиво и дорого, ничего лишнего. Однозначно современный трендовый сайт.

http://thelifecycle.roblutter.com/

No tags for this post.

One thought on “Тенденции веб-дизайна на 2016 год

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

Добавить комментарий

Ваш e-mail не будет опубликован.