Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Тренды / ТОП

Тренды веб-дизайна 2018: новые, вернувшиеся и теряющие актуальность

13 января 2018 Нет комментариев

Прошедший 2017-й отметился развитием в веб-дизайне анимаций и микроитераций. Каких же веб-трендов ждать в 2018 году? Ведущие дизайнеры и студии делятся своими взглядами, мнениями о будущем дизайна и прогнозами на этот год. Ознакомьтесь с мнениями экспертов, чтобы понять сегодняшнее состояние WEB индустрии и знать чего ожидать на рынке веб-дизайна и разработки сайтов, приложений и не только…

1. Креативная типографика и вариативные шрифты

В борьбе за визуальную привлекательность, типографика мощное средство. Чем смелее и оригинальней, тем лучше – ожидаем расширенного применения веб тренда. Нео-гроте́скные шрифты sans-serif вроде Helvetica будут популярны, что должно привести к огромному разнообразию гарнитур.

В 2018 году засечки возвращаются, соответственно, возрастет число сайтов применяющих шрифтовые контрасты serif & sans-serif. Это внесет некую динамику в User eXperience.

Веб дизайн тренды 2018: креативная типографика

Трафаретное применение типографики на подложке – главный экран сайта Danbury  

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

В 2018 году следует ожидать не шрифтовой утонченности, а развития тренда на жирную типографику

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

Hyped Marketing использует надпись, вырезанную на яркой подложке для привлечения внимания к видео. Comedie Francaise применяет типографический эффект для стильного hover- выделения заголовков. Nurture Digital за буквами прокручивает видео.

Читайте также:  Применение контурной типографики в веб-дизайне — 10 новых идей

2. Сторителлинг с визуализацией данных

Крэйг Тейлор, старший руководитель визуализации данных Ito World: «Мы наблюдаем бурное развитие анимированной визуализации и высокий спрос на представление данных с учетом принципов 3D-рендеринга. Но какая польза от данных (привлекательных или нет) когда они плохо усваиваются и в конечном итоге не воспринимаются.

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

Так каким будет информационный дизайн в 2018 году? Доступность новых технологий увеличит число сайтов использующих анимацию как средство сторителлинга. Достижения в дополненной реальности (AR) и виртуальной реальности (VR) ведут к экспансии симуляторов и виртуальных моделей. Успех продвижения контента будет все больше зависеть от правильности решений во взаимосвязанных областях: анализе данных и дизайне, выражающем посыл и рассказывающем историю через визуализацию данных.

Web дизайн тренд 2018: дополненная реальность

IKEA и Apple приложение на базе дополненной реальности

Дополненная реальность улучшает восприятия информации: расширяет воспринимаемую реальность добавлением вымышленные объектов. Пример: приложение IKEA Place помогает расставить виртуальную мебель по дому покупателя. Тренд реалистичной виртуализации 3D-моделей товаров уже поддержали Amazon, Disney…

Для начинающих виртуализаторов имеется множество сервисов. «Библиотеки D3.js великолепны, но могут показаться пугающими для не-девелоперов» – подсказывает эксперт по виуализации данных Майк Брандберг. «Но есть немало платформ, предлагающих импортировать, визуализировать, хостить ваш проект. Платформа Datawrapper подойдет для составления простых графиков и отчетов, Flourish будет полезна журналистскому ресурсу, поможет украсить сторителлинг».

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

3. Flat-дизайн 2.0

Читайте также:  Сайты в стиле флэт: 20 нестандартных дизайнов

«Плоский дизайн не умер, но в 2018-м чтобы оставаться актуальным надо учесть кое-какие моменты» – считает ведущий контент-стратег из 99designs Келли Мор. Так называемый Flat 2.0 или Semi-Flat (почти плоский) дизайн вносит нюансы и опирается на свою изначальную аскетичность. Как это удается? Не полным отказом от теней, бликов и градиентов для придания глубины, разумеется применяя их в меру.

Пример почти плоского дизайна сайта в стиле Flat 2.0

Почти плоский дизайн: тени создающие объем

Веб-дизайн тренд 2018: сайты в стиле Flat 2.0

Примеры Flat 2.0 – дизайн c градиентами и блики на кнопках целевого действия

С 2007 года градиенты волшебным образом преобразили PowerPoint презентации, в эру нулевых встречались в дизайнах логотипов. В 2018-м вновь возвращаются, но они эволюционировали – отличаются оживленной динамичностью, обновленной цветовой палитрой и изысканно мягкими переходами. Направление плоского дизайна повлияло на бренды вроде Instagram, Stripe и иконки Apple iOS, стиль флэт проявил себя в редизайнах известных сайтов.

Читайте также:  57 самых красивых плоских дизайнов сайтов

Браузерный прогресс дает нам возможность замечать оживление теней. Подобно градиентам, тени в WEB-е утратили актуальность – правит минимализм и 2D дизайн. Реалистичность со скеоморфизмом и сейчас не в тренде, но 2018 год позволит дизайнерам поэкспериментировать с мягкими и стилизованными тенями.

Веб тренд 2018: полуплоский дизайн с использованием градиентов и теней

Плоский дизайн уступает дорогу полу-плоскому стилю Flat 2.0

Интерфейс scale основан на строгой минималистичной разметке сайта, но с мягким дизайном перенасыщенным градиентами и повсеместным использованием теней в микроитерациях. Глубокими тенями оформлены кликабельные элементы, выделены блоки. Глубина задает визуальную иерархию, стимулирует к заполнению полей ввода, повышает конверсию элементов Calls to Action.

Читайте также:  30+ примеров и идей оформления кнопок целевого действия

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

4. Голосовой пользовательский интерфейс

Пол Вудс, главный креативщик глобал-дизайн фирмы Edenspiekermann предполагает, что скоро дизайн не будет привязан к экранам.

«По мере нашего взаимодействия с экранами, они становятся меньше и меньше – или в случаях с Alexa / Siri, совсем исчезают. Дизайнеры будут вынуждены наращивать свой инструментарий для невизуального планирования» – предсказывает Пол. «Понимание тонкостей построения voice-интерфейсов станет необходимым требованием к UX-дизайнеру завтрашнего дня».

Ли Малон, генеральный директор Rarely Impossible советует: «Выполняя повседневные функции, в 2018 году голосовые интерфейсы займут значительное место в нашей жизни, сэкономят время».

Чтобы быстро решать пользовательские задачи, Voice eXperience должен быть немногословным

Удлинение 3-словной фразы еще парой слов, уменьшает пользовательскую вовлеченность от 20% до 30%. Если вы разрабатываете голосовой UI, Ли предлагает записать задачу и попросить сотню людей ее озвучить, задавая вопросы друг другу. Это задаст основу модели голосового управления, определит желаемые команды для голосового пользовательского интерфейса.

5. Отмирание домашней страницы

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

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

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

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример

6. Эволюция ИИ

Искусственный интеллект не научная фантастика и уже проникает в веб-дизайн через технологии вроде виртуальных собеседников (чат-боты). Возможно, вы уже используете ИИ, даже не подозревая об этом. Но пока приходится довольствоваться узконаправленным ANI (Artificial Narrow Intelligence) ограниченным специализированными задачами, вроде голосовых помощников Google Home и Apple Siri. Такие веб-ресурсы как Amazon, Spotify и Netflix используют технологии для рекомендованного контента.

По мере совершенствования чатботов, ANI трансформируется в сильный ИИ (AGI, artificial general intelligence)

«Чем чаще пользователи взаимодействуют с ботами, тем сильнее чат-интерфейсы входят в web-дизайн» – рассуждает Джим Боус, CEO и основатель Manifesto «Заглянем вперед: через пару лет машинное обучение с ИИ применят всемирно известные системы».

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

7. E-commerce бум

Читайте также:  UX-дизайны интернет-магазинов: хорошие и плохие. 21 пример

«Черная пятница», «киберпонедельник». Что далее? Что же предложат полнофункциональные платформы электронной коммерции в текущем году?

Онлайн-ритейл и мультиканальность: ритейлеры уходят в интернет

Сервис Just Eat– еСommerce это не только магазин, торгующий своим товаром онлайн

Владелец Dowson Design Co, Крис Доусон считает: «Мы потребители по природе и нас всегда интересуют новые вещи… интернет полон вещей. Сайты Deliveroo или Just Eat не имеют собственного ресторана для приготовления еды, но могут доставить к вам домой любое блюдо. Amazon не имеет магазинов, однако доставляет заказанные товары на следующий день. Мы только начинаем замечать возможности электронной коммерции, понемногу отходим от модели ведения бизнеса в Сети через традиционный интернет-магазин».

С оживленными апгрейдами email продолжает играть ключевую роль в eСommerce стратегии. Сообщение легко отследить, легко создать и что актуально на 2018 год и далее – просто персонализировать (речь не об имени в шаблоне). Покупательские привычки это источник информации – потребитель получает персонализированные сообщения с включением товаров, в которых заинтересован. Даже email о брошенной корзине – находка для любого ритейлера. Побуждающий триггер сработает в тот период времени, когда клиент восприимчив к завершению заказа. Это зависит от того, каким образом, когда и чем потребитель интересовался.

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

Инструменты наподобие Facebook Pixel развивают eCommerce в социальных медиа

Помимо email, электронная коммерция в социальных сетях должна стать обычным явлением. Facebook будет постепенно расширять возможности покупок через Messenger. Некоторые ритейлеры пробуют создавать потребительский опыт с FaceTime и Facebook Live.

Читайте также:  20+ вдохновляющих сайтов с плоскими иллюстрациями в дизайне