Блог
Все записи

Тенденции веб

28.10.2014

Мыслим мобильно. Адаптивный дизайн

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

Убедиться в этом можете самостоятельно, например, на сайте художника Васи Ложкина.
Сайт художника Васи Ложкина 

Визуальное представление

Плиточный, блочный дизайн

Одной из существенных тенденций в визуальном представлении сайта является плиточный или блочный дизайн. Данный стиль появился в недрах компании Microsoft в процессе создания ОС Windows 8, и он носил название «Метро-стиль». Этот тип верстки является одним из главных трендов в веб-дизайне, и всё больше компаний создают свои сайты в таком стиле. Разноцветные равномерно закрашенные квадраты навигации — краеугольный камень в интерфейсах стиля Metro. Считается, что подобный способ организации контента является очень эффективным для структурирования, а, следовательно, и восприятия информации. Позиционируется он, как легкий, простой, быстрый и открытый. Кроме того, подобный способ представления также отлично подходит для адаптивной вёрстки.

Вот пример того, как это делаем мы на сайтах Seopro и Макс-моторс
Сайт Макс-моторс
Портал SEOPRO 

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

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

Пример одностраничного персонального сайта для Андрея Воропаева
Персональный сайт Андрея Воропаева 

Флэт

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

Сайт Trilan Seo отлично демонстрируют воплощение плоского дизайна
Сайт Trilan Seo 

Широкоэкранный дизайн

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

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

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

В качестве примера приведем созданную нами концепцию для сайта Favorit Motors
 Cайт Favorit Motors

Чистый дизайн

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

Монохром для ценителей классического сочетания черного и белого с добавлением третьего цвета для расстановки акцентов реализован на сайте косметической компании Маруга
Cайт косметической компании «Маруга» 

Яркие цветовые схемы в сочетании с плоским дизайном для самых смелых на примере рекламного агентства Милк
Сайт креативного агентства «Милк» 

Необычная типографика и крупные шрифты

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

В качестве примера использования нестандартных шрифтов приведем наш обновленный сайт Trilan.ru
Обновленный сайт Trilan.ru 

CSS3 эффекты и анимация

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

Использование эффектов на сайтах Бутырский и Зенит, отлично демонстрируют вышесказанное
Персональный сайт Владимира Бутырского
Сайт марки «Зенит» Красногорского завода им. С.А. Зверева 

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

Больше скролить — меньше кликать

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

Примеры вертикального скроллинга: концепция для ХольцПласт
Концепция для ХольцПласт

Примеры горизонтального скроллинга: Концепция для киностудии им. Горького
Концепция для Киностудии им. Горького 

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

Примеры активного использования параллакс-эффекта можно оценить на сайте «Кварц Групп»
Сайт компании «Кварц Групп» 

Навигация

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

Например на сайте bsk-test.ru зафиксирован подвал
Сайт bsk-test.ru 

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

Пример скрытой навигации на сайте Hors
Сайт Hors 

Еще одна тендеция вдохновленная мобильными устройствами — использование крупных кнопок интерфейса. Крупные кнопки делают более комфортным просмотр сайтов на мобильных устройствах и активно перебираются в веб-дизайн.

Пример использования крупных кнопок в навигационном меню на сайте «Инвитро» и в концепции для сайта «Твой дом»
Сайт «Инвитро» Сайт «Твой дом»

Дополненная реальность

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

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

Интерактивный сайт — это сайт умеющий «общаться» со своим посетителем. В веб-дизайне этот тренд существует в нескольких прявлениях:

  • интерактивная инфографика
  • интерактивные карты объектов
  • элементы геймификации и игры на сайтах
  • виртуальные туры и трёхмерные модели
  • подбор товаров и услуг
    и др.

Элементы геймификации на сайте Дикси (пользователю предлагается создать свой герб)
Страница сайта онлайн-кинотеатра Dixiflex 

Интерактивная инфографика результатов анализов в личном кабинете приложения Инвитро
Интерактивная инфографика результатов анализов в личном кабинете приложения «Инвитро» 

Упрощение форм

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

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

Примеры простых форм
Примеры простых форм 

Микро-UX

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

Сделать сайт уникальным поможет пристальное внимание к деталям и грамотное использование эффектов Микро-UX.

Пример: приложение Инвитро и Пилигрим
Приложение «Инвитро»
Приложение «Пилигрим» 

Персонализация контента

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

Заключение

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

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

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

Заказать звонок
Введите ваш номер телефона и наши сотрудники свяжутся с вами в ближайшее время.