Главное Авторские колонки Вакансии Образование
Выбор редакции:
23 712 32 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Тренды веб-дизайна на ближайший год

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

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

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

Давайте представим, что нас ждет в самом ближайшем будущем.

Очень длинные сайтыb_552bb4e2713e5.jpg

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

"Сторителлинг" и взаимодействие с пользователе

b_552bb2543da0e.jpg

Уже ни для кого не секрет, то, что эксклюзивность контента и интерактивность сайта являются огромным плюсом. Именно поэтому в 2015 году веб-дизайн будет использовать именно такие приемы. Теперь не только контент "рассказывает историю" (т.н. "сторителлинг"), а весь сайт становится механизмом, который доносит эту историю до пользователя. Отличный пример - сайт The Space Needle, который совмещает в себе "сторителлинг" и веб-дизайн.

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

b_552bb312367db.jpg

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

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

Исчезновение необязательных элементов для упрощения

b_552bb5580e46c.jpg

Кто-то сказал: «Хороший дизайн – это тот, из которого убрать нечего». Лично для меня это выражение стало профессиональным кредо. Нынче упрощение становится трендом: отказ от больших изображений для фона, вместо них - только отточенная типографика.

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

«Вылетающие» (как в приложениях) и / или спрятанное главное меню

b_552bb2bab8762.jpg

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

«Почти» плоский дизайн

b_552bb70c8fe21.jpg

В прошлом году был очень популярен плоский дизайн, который продвигают Microsoft и Apple. Каждый сайт, каждое приложение, каждая иконка - все было максимально упрощено и «расплющено». Плоский дизайн был главным трендом дизайна, но и он продолжил эволюционировать. У плоских элементов начали появляться физические свойства реальных объектов, такие как: толщина, плотность, тень. «Материальный» дизайн от Google – лучший пример этого тренда. В нынешнем году ждем засилие «карточек».

Видеофон

b_552bb43bb2a6d.jpg

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

«Синемаграфия»

b_552bb3c89749a.jpg

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

Элементы, нарисованные от руки

b_552bb7b06e9f3.jpg

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

Скорость и производительность

b_552bb81968294.jpg

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

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

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

Для того, чтобы первыми получать информацию о всех статьях и скидках от Шуба Lab − подписывайтесь на нашу рассылку http://eepurl.com/bmB4X1

+8
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
А шапка и подвал сайта еще в тренде?
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Последнее время такое понятие как шапка сайта — постепенно растворилось в сайтостроении, этот элемент либо стал более интерактивным (слайдеры, видеофоны), либо вообще пропал, оставив место спрятанному меню.

А подвалы, как были необходимы, так и остались. Впрочем количество информации размещенной там — на порядок уменьшилось за последние несколько лет.
Ответить
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
Спасибо, и ещё вопрос, если позволите. В примерах заметно, что нет больше логотипов, они тоже исчезли?
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Они стали меньше и это заметно в примерах: на 8 скриншотах из 10 присутствует логотип. Иногда это только знак, иногда — текстовая часть. Только в первом примере присутствует полная версия логотипа со знаком и текстом.
Ответить
Vladislav Sozonov
Я засовываю подвал в меню ( = ). Говорю, мол, карта сайта будет там. Клиенты обычно соглашаются.
Ответить
html5.by
Статьи, новости о веб-технологиях на русском языке
Dmitry Nedudi Dudin
Саша, хорошая статья! ;)
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Спасибо) Это только проба пера, я думаю)
Ответить
Ayaz Gazizov
Спасибо))
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Всегда рады :)
Ответить
Edvins Antonovs
Аналог статьи за 2014 год, единственное, что добавили это Material Design, а так статья не о чём.
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Тренды формируются большим числом дизайнеров годами, но умело пользоваться ими могут все еще не многие…
Ответить
Логомашина
Логотипы из Петербурга для всего мира
Роман Горбачёв
Мне тоже кажется, что упущено несколько трендов.
Ответить
Edvins Antonovs
Я не по то что упущено, то что упещно, это и так понятно, я про то, что статья попипаст прошлого, если не позапрошлого года и те, кто просто читает даже изредка статьи о дизайне, ничего к сожалению нового не найдут.
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
А какие, на ваш взгляд, упущены?
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
А что же вы считаете трендами 2015 года, помимо вышеупомянутого «Material Design»?
Ответить
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Минимализм всегда в тренде =)
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
И это — хорошо)
Ответить
Sergey Alimov
Подскажите пару примеров хорошего "вылетающего" меню?
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Лично мне нравится меню на всем известном http://habrahabr.ru/

А если идти по международным сайтам, то на мой взгляд хорошие примеры у: http://www.badassembly.com/ и http://kickpoint.ca/
Ответить
Tucanus
3D-печать иначе
Григорий 10016
Если интересует такое меню только на CSS, то можете посмотреть его на http://freeloot.ru.
Ответить
Вячеслав Гармаш
Что-то ничего так не вылетает…. Куда жать?
Ответить
Tucanus
3D-печать иначе
Григорий 10016
Наведите мышь на тулбар слева.
Ответить
Stdio.Digital
Мы проектируем интерфейсы, готовим контент и делаем сайты.
Александр Пихтовников
Тренд — это как будет, а не как было. И вышеописанное не есть тренды 2015 года. Как минимум половина из них уже давно реализовано на многих сайтах. Пару лет как. Некоторые из этих "трендов" появились еще в далеком 2014.
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Давайте разберемся с понятиями для начала https://ru.wikipedia.org/wiki/Тренд

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

И да, в статье написано, что некоторые из трендов зарождались еще в 2014.
Ответить
Дмитрий Браверман
…сообщает нам ШубаЛаб, не сделавший даже себе адаптивного сайта…
Вот я в телефоне вообще ничего не смог рассмотреть.
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Использовать подходы и технологии — нужно по необходимости.

Проанализировав мобильный траффик на сайте мы пришли к выводу, что конверсия полной версии сайта выше на 4%, очевидно что мы убрали мобильную версию.
Ответить
Tucanus
3D-печать иначе
Григорий 10016
Мобильная версия и адаптивность — разные вещи.
Ответить
ADZY
Ассистент для ведения рекламных компаний
Дмитрий Кубитский
слоупок новости, из 2010 года.
хехехех
Ответить
codebra — онлайн-курсы
Интерактивные онлайн-курсы по HTML, CSS и JavaScript
Иван Иванов
Появились мыслишки, пошел верстать.
Ответить
shubalab
Агентство продающего дизайна
Maxim Gordienok
Обратите внимание на другие публикации.

Больше публикаций от Shubalab - больше мыслей)
Ответить
Katherine Shapar
Еще бы уйти от однотипных "Почему мы такие классные и все такое"... Весьма бесполезный блок с однотипной инфографикой "Скорость", "Качество", "Дешево", "10000 лет на рынке"...
Ответить
shubalab
Агентство продающего дизайна
Maxim Gordienok
Все новое - хорошо забытое старое.

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

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.