Среди дизайнеров распространено мнение, что тенденции будут важной частью их работы. Постоянно быть в курсе последних обновлений считается обязательным. Многие дизайнеры оценивают работы других через призму тенденций, а отметка некоторых работ тегом #старый может расцениваться как оскорбление, как будто если в проекте не использованы самые последние тренды, он автоматически становится менее ценным.
Однако, есть основания следовать тенденциям. Если зайти на такие сайты, как Awwwards, FWA или CSS Design Awards, они могут вдохновить вас, и как следствие, помочь выйти за пределы ваших дизайнерских привычек. Вы можете узнать о новых визуальных мирах, которые вы потом можете (сознательно или нет) интегрировать с графическим языком. Наблюдение за работой других помогает улучшать ваши собственные навыки, а также оставаться в курсе новейших технологий.
В последний год или два, стало заметно, что многие дизайнеры стараются отойти от простых композиций. Появляется все больше и больше открытых, казалось бы, хаотичных, «ломаных» и «резаных» дизайнерских работ. Прославление сетки, как раньше, теряет свою значимость, а правила преднамеренно и сознательно меняют. Контент начинают перемещать, он будто бы движется, а его части иногда перекрываются и переплетаются между собой.
Большую роль в этом процессе играет эволюция Canvas и WebGL. Современные проекты часто немного запутанные, менее интуитивно понятные, чем минималистичные, но они, конечно, производят неизгладимое впечатление на пользователей.
Что еще нас ждет в веб-дизайне 2017 года? Вот мои предсказания.
Открытая композиция
До недавнего времени в мире дизайна доминировали «закрытые», симметричные и статические композиции. С 2016 года появилось множество сайтов, которые отошли от этого стиля. Открытые композиции со свободно расположенными элементами, бегущими куда-то за пределы экрана, набирают популярность — примеры таких работ можно увидеть у romainpsd.com , durimel.io или booneselections.com . Распределение элементов на этих сайтах создает впечатление, что они продолжают жить и за монитором.
Ассиметрия
2016 также нарушил правило симметрии, которая преобладала в индустрии довольно долгое время. Многие дизайнеры создали ассиметричные макеты, которые далеки от идеального баланса с левой и правой стороны. В качестве примеров я хотел бы показать вам отличный сайт culture.pl , хаотичный dada-data.net , и ранее упомянутый durimel.io .
Разнообразие
Дизайнеры создали более динамичные композиции, в которых больше пересекающихся диагональных линий (poigneedemainvirile.com , vanderlanth.io), или более сложных форм (residente.com/en , helloheco.com , predictiveworld.watchdogs.com).
Иллюзия хаоса
В 2016 году многие дизайнеры сознательно и намеренно начали отходить от минималистичного дизайна. Было стремление к большей свободе и менее жесткому подходу к проектированию. За этим, безусловно, стоит необходимость изменений, но еще и обычное чувство скуки. В какой-то момент всем надоедает создание простых макетов с простыми элементами.
Тем не менее, анализируя проекты 2016 года, становится заметно, что хаос лишь кажется хаосом. Макеты по-прежнему основаны на классическом контрасте форм, цветов, фактур, размеров и т.д. Что изменилось, так это расположение различных элементов и гармония зависимости между ними. Сейчас, заголовки, иконки или текстовые блоки чаще смещаются, несмотря на банальную логику. Несмотря на то, что они являются частью одного тематического блока, они разделены и расположены на приличном друг от друга расстоянии. Они не выровнены по одному краю и имеют разные подложки.
Некоторые геометрические фигуры «подвешенные в воздухе» обладают только декоративной целью (melanie-f). Это также характерно для наложения элементов друг на друга. Тексты частично перекрываются фотографиями, как, например, на e03.epicurrence.com и melville-design.com , или изображения накладываются друг на друга, что можно увидеть на olivierbernstein.com.
Это также отличительный прием, чтобы нарушить привычную минималистическую гармонию. Огромные заголовки резко контрастируют с нежными и тонкими структурами и цветами.
Богатый фон и паттерны
Все чаще и чаще появляются фоны и паттерны на которых есть маленькие черточки , полоски или точки .
Особенно распространен паттерн с сеткой, который является «рамкой» для других элементов макета. Эти элементы параллаксом перемещаются по сетке и часто расположены хаотично.
Паттерн с сеткой
Одним из первых сайтов, на котором появилась такая сетка был werkstatt.fr , который, однако, не использовал характерных анимаций.
Немного другой способ использования паттерна с сеткой показаны у klimov.agency , brand.uber.com и maisonullens.com . В этих случаях сетка обладает очень специфической функцией — сделать движения элементов логическими. Это позволяет рационализировать нестандартные решения и дает ответы на такие вопросы, как «почему поля иллюстрации не гармонируют с полями кнопки»? Это создает ритм, и в то же время оправдывает свои нарушения.
Декоративные детали
Что действительно изменилось за последнее время, так это подход к деталям. Происходит постепенный отход от минимализма. Существует много других элементов, у которых только декоративные функции. «Летающие » геометрические фигуры и соответствующие фрагменты. Линейные, хрупкие иконки немного отрываются от контента, который они иллюстрируют. Подчеркивания и линии сдвигаются . Появляется зернистость и глитчи, как на bigyouth.fr или kikk.be.
Кнопки реже создаются в виде четких прямоугольников с текстом внутри. Они часто выглядят как мягкие, смещенные линии, как, например, на dahllaw.dk или yasuhiroyokota.com . Еще вариант кнопки — это эффектный ховер на Canvas, как на hpsoundincolor.com и cavalierchallenge.com .
Продуманные концепции — плавные анимации между секциями
Нет ничего нового в анимациях на веб-сайтах. Кроме того, нельзя сказать, что они противоречат минималистичному подходу. Тем не менее, как и Canvas, они являются важной составляющей больших возможностей в веб-дизайне. А новые возможности — это всегда заманчиво, ведь они позволяют вам делать что-то другое, свежее и оригинальное.
Обилие анимаций приводит к исключению резкого разделения страницы на секции. Сайт плавно меняется во время скролла. Контент исчезает и появляется с помощью мягких анимаций. Последовательности этих переходов становятся все более продуманными. Это не просто случайные эффекты между блоками контента, а продуманная концепция, в которой каждый элемент появляется в нужное время (Nationalgeographic.com , stylenovels.com). Анимации с самого начала являются частью веб-сайта, а не просто случайно добавленной деталью.
Интересные анимации украшают простые макеты. Они добавляют новую ценность и делают страницу уникальной. Они становятся сутью всего проекта, как, например, на Ifly50 или tennentbrown.co.nz . Анимации часто создают красивую, гладкую структуру на веб-сайтах: Cuberto.com , lookbook.wedze.com , skarv-fashion.com или corentinfardeau.fr .
Разнообразная типографика
Изменение тенденций можно также проследить и в используемых шрифтах. До недавнего времени весь Интернет был во власти простых, нео-гротескных шрифтов, таких как Helvetica, Roboto, Lato или Open Sans. Немного более «декоративный» нео-гротеск чаще используется в заголовках, а его более простая версия выбирается для остального текста. Шрифты с засечками же практически не используются.
За последние 2 года ситуация начала меняться. Дизайнеры смело используют различные виды шрифтов. Теперь они больше готовы работать с контрастами — сочетать шрифты с засечками и без них.
Многое происходит в типографике, которую используют на веб-сайтах. Тексты анимируются , разбиваются на отдельные буквы, в текстах размещаются различные эффекты, изображения и видео.
Большие технологические возможности и более смелые решения влияют на рост разнообразия веб-типографики.
Геометрические шрифты
Геометрические шрифты без засечек приобрели большую популярность, например, классическая Futura, ITC Avant Garde, Proxima Nova, или те, что доступны в библиотеке Google — Poppins или Montserrat. Эти шрифты гораздо более выразительные, чем «невидимый» нео-гротеск. Более «агрессивный» и выразительный характер веб-сайта можно достичь если использовать большую толщину, как на достаточно старом сайте hugeinc.com , а вот более новые примеры: sequence.co.uk , startuplab.no или www.protest.eu .
Шрифты с засечками
Очень часто шрифты с засечками используют не только для основного текста, но и для больших заголовков. Особенно часто используют декоративные, такие как на duhaihang.com или jennyjohannesson.com . Еще популярными шрифтами можно назвать те, которые относятся к Bodoni или Didot.
Моноширинные шрифты («печатная машинка»)
Использовать пропорциональные шрифты, которые обычно ассоциируются с печатными машинками — новшество. Сейчас их можно увидеть на таких сайтах, как admirhadzic.com , cuberto.com или designembraced.com .
Контрастное сочетание шрифтов
В 2016 году было принято отходить от мягкого, гармоничного сочетания шрифтов для более выраженного контраста. Экспрессивные комбинации усиливались высоким контрастом размеров текстов. Крупные и декоративные шрифты сочетали с простыми геометрическими, также как геометрические заголовки становились в пару со шрифтами с засечками в тексте контента.
Огромная типографика как часть основного изображения
Очень крутой и распространенной вещью было использование текстов очень больших размеров на основных изображениях. Это создавало очень сильный контраст между заголовками и остальной частью контента. Примеры можно увидеть на oursroux.com , femmefatale.paris или monsieurcaillou.com .
Иногда, в качестве украшения, в начале используется леттеринг, как, например, у corentinfardeau.fr или nurturedigital.com .
Ярким примером вышеупомянутого можно назвать сайт jennyjohannesson.com , где использованы декоративные качества шрифта с засечками Goku .
Дополнительные эффекты применимые к типографике
Можно наблюдать сильную интеграцию между типографикой и изображениями, видео и анимациями. Отдельные разделы связаны — типографика взаимодействует как с фоном, так и с другими элементами. Бессистемное размещение типографики на темном изображении — осталось в прошлом. Сегодня дизайнеры выстраивают интересные отношения между всеми элементами, вплетая типографику в фон, анимируя ее и т.д.
Большие размеры букв в текстах
Когда я только начал свой путь в веб-дизайне, у меня была старая привычка использовать 10 размер шрифта, которую я приобрел когда работал в печати. Однако, я быстро понял, что в вебе оптимальный читаемый размер — это 14.
Сейчас заметно, что дизайнеры используют гораздо более крупные шрифты, особенно когда речь идет о шрифтах с засечками.
Переходи на темную сторону
В 2016 году дизайнеры использовали разные цвета. Но можно заметить тенденцию к выбору темных тонов.
Тренд создавать полностью белые сайты становится менее популярным, и уступает вариациям серого, текстурам и паттернам. Сейчас довольно распространено создание более темных сайтов, где черный или его градация заполняет фон и создает немного мрачное , гротескное настроение.
Несмотря на это, трудно предсказать, как эта тенденция разрастется в течении года. Цвета, однако, являются частью визуальной айдентики брендов, так что трудно ожидать, что они коренным образом изменят свою коммуникацию, основываясь исключительно на популярности определенных тенденций.
Подведем итог
2017 год обещает много интересных перспектив, однако есть и некоторые опасности на горизонте.
Лично я боюсь, что многие веб-дизайнеры могут быть немного самоуверенными, когда дело дойдет до работы с Canvas. Добавьте к этому новые тенденции, и вы получите множество кричащих и непонятных для широкой аудитории веб-сайтов.
Меня также немного беспокоит тот факт, что многие из современных творений не будут работать должным образом во всех браузерах и мобильных устройствах. У меня сложилось впечатление, что мы вернулись в исходную точку. Сейчас мы находимся в ситуации, аналогичной тем временам, когда Flash, несмотря на то, что он рулил Интернетом, был обвинен в отсутствии быстрого отклика и высоким требованиям к интернет-соединению.
Еще одна вещь, которая меня пугает — это тот факт, что новые тенденции к «деконструкции» будет невозможно применить к коммерческим клиентам, или просто не будут соответствовать профилю их коммуникации. (Правительственные или банковские веб-сайты не могут быть хаотичными).
Я задаюсь вопросом, как долго новые тенденции будут внедрятся в коммерческий рынок. Стоит отметить, что подавляющее большинство веб-сайтов, которые я использовал в качестве примеров были созданы для агентств, дизайнеров и творческой индустрии. Такие сайты часто устанавливают свои собственные правила и обычно опережают тенденции по сравнению с другими отраслями. Иногда тенденциям нужно много времени, чтобы стать популярными в этой нише и прорваться на коммерческий рынок. Тогда их форма немного сглаживается, чтобы подойти каждому.
Несмотря на все это, я думаю, что 2017 выглядит весьма перспективным, если говорить о веб-дизайне. Сказать, что эпоха минимализма подходит к концу было бы слишком, однако она точно претерпевает изменения и развивается.
Минимализм станет более сложным и детальным. В веб-сайтах этого года все больше будет использоваться Canvas. Мы увидим много «хаоса», многообразия форм и экспрессии в будущих проектах. Это хорошие новости для дизайнеров, которые сыты по горло минималистичными стилями Flat, Material или Metro дизайна.
В 2016 году многие компании провели редизайн своих сайтов, сократив количество опций навигации. В 2017 году этот тренд продлится.
Меню в хедере страницы, которые раньше включали 5-7 опций, теперь будут предлагать 3-4 варианта.
Меньшее количество вариантов облегчает пользователю поиск нужной информации и позволяет избежать ситуации «паралича выбора».
Хорошим примером нового подхода является Ikea. На скриншотах ниже вы можете сравнить старую и новую версии сайта компании.
Старая версия:
Новая версия, запущенная в 2016 году:
- Отказ от гамбургер-меню
Гамбургер-меню не даёт пользователю представления о глубине сайта или приложения. В итоге он остаётся дезориентированным.
Spotify уже отказался от гамбургер-меню в своём приложении. В 2017 году его примеру последует ещё больше компаний.
- Дуотоны
Использование дуотонов делает оформление сайта минималистичным и позволяет удержать внимание пользователя на основном сообщении или навигации.
В 2017 году ожидается более активное использование дуотонов вместо полноцветных фонов.
- Тактильный дизайн
Недостатком параллакс-прокрутки является замедление скорости загрузки страницы.
В 2016 году анимация рассматривалась как перспективный тренд. Однако в этом году в центре внимания разработчиков находится производительность. С этой точки зрения параллакс-скроллинг – не самое оптимальное решение.
- Осмысленное действие
Одним из основных принципов материального дизайна является «осмысленное действие». В Google считают, что «действие должно быть осмысленным и целесообразным, служить для привлечения внимания и поддержания непрерывности» .
Приложение Tumblr – хороший пример реализации этого принципа. В 2016 году оно выиграло премию Material Design за анимацию.
- Отказ от низкокачественных стоковых изображений
Сайты компаний должны приглашать пользователей к взаимодействию и отражать ценности бизнеса. На них больше нет места некачественным и скучным стоковым изображениям. Таким, как это:
- Меньше приложений, больше PWA
Технология PWA (Progressive Web Apps) позволяет сайту работать по принципу приложения. В том числе офлайн. Её уже используют такие крупные издания и компании, как The Washington Post, Airberlin и Flipkart. В этом году популярность технологии будет расти.
- Шрифты Google
Google создал библиотеку шрифтов с открытым исходным кодом в 2010 году. В 2016, продолжая работать над материальным дизайном, компания также улучшила свой сервис Google Fonts . В результате предпросмотр шрифтов стал более быстрым, а их настройка – проще. В разделе Featured собраны те шрифты, которые хорошо сочетаются с материальным дизайном.
В 2017 году ещё больше веб-дизайнеров будут работать со шрифтами Google.
- Минимализм
Этот тренд объединяет в себе многие другие тенденции, упомянутые выше. Минимализм означает акцент на производительности (скорость) и юзабилити. В рамках этого подхода важную роль играют типографика, контраст и пространство.
Хороший владелец сайта постоянно работает над его улучшением. В этой работе ему нужно опираться не только на анализ своей аудитории, данные веб-аналитики и отзывы клиентов, но и на тренды отрасли. Потому что в трендах есть много полезных вещей, способных улучшить взаимодействие клиентов с сайтом. Но тренды нужно применять аккуратно, с умом. Выбирать только те, что подходят для решения текущих проблем сайта и для развития бизнеса.
Поэтому в данной статье мы не просто привели список тенденций веб-дизайна, но и составили рекомендации по применению этих трендов на вашем сайте.
1. Юзабилити станет товаром
Пример улучшения юзабилити сайта http://www.telemirspb.ru/
Следование базовым принципам юзабилити помогает сайтам привлекать больше клиентов и снижать количество звонков в службу поддержки. Все больше компаний предлагают аудиты сайтов, так как есть спрос на поиск ошибок на сайте. Привычка делать покупки, заказывать услуги через Интернет увеличивает спрос на удобные сайты.
Увы, многие создают сайты сами, а потом с созданным безобразием приходят к нам. Важно продумать процесс взаимодействия с ресурсом заранее: какие разделы будут в первой версии, а какие будут добавлены позже. Все предусмотреть невозможно, но заранее спланированная навигация сэкономит время и деньги на доработки в будущем. Также тщательно выбирайте движок для сайта. Не стоит выбирать блоговый движок (к примеру, WordPress), если вы планируете продавать что-то на сайте, делать страницы товаров/услуг.
Если вы работаете в высококонкурентной среде, то понимаете как важно отличаться от конкурентов.
Именно поэтому при планировании создания сайта или улучшения существующего в первую очередь необходимо взглянуть на интерфейс глазами клиента, попробовать предугадать проблемы, которые могут возникнуть у пользователя.
2. Исчезнут длинные тексты
Будем честны с собой: длинные тексты никто не читает. Исключения составляют книги и статьи. Когда клиент хочет заказать какую-нибудь услугу или товар, то его интересует конкретная информация: цена, основные характеристики продукта/содержимое услуги, условия доставки/срок выполнения. Краткая и структурированная информация экономит время клиенту и располагает к заказу. Тем более если клиент сравнивает несколько сайтов, то наиболее лаконичное описание определенно выиграет.
Также длинные тексты неудобно просматривать с мобильных устройств, которые использует уже почти каждый. По результатам мировой статистики, в октябре 2016 года количество мобильных пользователей стало больше, чем десктопных.
Посмотрите аудиторию вашего сайта, например, в Яндекс.Метрике в отчете Сводка → Тип устройства и увидите, какой процент клиентов заходит с телефонов и планшетов. Не забывайте об этой аудитории при размещении контента.
Добавляйте анимацию на сайт с умом. Она должна быть максимально аккуратной и быстрой. Увеличение изображения при клике по нему, индикаторы прогресса во время ожидания результатов на сайте, возникновение всплывающего окна при добавлении товара в корзину, смена цвета кнопок и ссылок после нажатия - наиболее распространенные микровзаимодействия, которые точно будут помогать вашим пользователям.
6. Использование синемаграфий или «живых» изображений
На смену широкоформатным видео пришли синемаграфии - изображения, на которых движется лишь один элемент. Лучше всего размещать их в первом экране страницы, чтобы привлечь внимание пользователя и вызвать вау-эффект.
Если подобрать такую гифку под тематику сайта, то выглядеть будет очень круто. Например, можно сделать «живую» фотографию вашего основного продукта и разместить ее на Главной странице или на баннерах с акциями.
В России синемаграфию в основном используют в соцсетях, поэтому приводим примеры иностранных сайтов - сайт защиты воды и аренды автомобилей .
7. Отказ от «типичных» стоковых фотографий
Надеемся, что с сайтов исчезнут всевозможные человечки, девушки в наушниках и фотографии улыбающихся семей. Пример стоковых картинок:
9. Мобильные устройства в первую очередь (Mobile First)
Суть данного подхода в том, что при проектировании сайта необходимо подумать, как он будет отображаться на мобильных устройствах. На эту тему написано много статей и книг, например, советуем почитать Люка Вроблески «Сначала мобильные» .
Как уже говорилось выше (см. пункт 2), мобильный трафик растет и даже появляются пользователи, которые не имеют десктопного опыта. Именно поэтому, чтобы не терять клиентов, рекомендуем оптимизировать сайты для мобильных.
В статье перечислены только самые основные тренды. Посмотрим, что нас ожидает в этом году. Если вы тоже заметили какие-то тенденции и уверены, что они будут развиваться, пишите в комментариях, с радостью обсудим. А если сомневаетесь, что дизайн вашего сайта актуален или прочитали статью и нашли устаревшие элементы - обратите внимание на услугу
Веб-дизайн как цифровая среда гораздо более подвержен изменениям в технологиях, чем его традиционные печатные предшественники. Что удивительно, так это то, как дизайнеры продолжают справляться с увеличивающимся числом технически сложных задач и по-прежнему создают удобные для пользователя, понятные и инновационные, совместимые с корпоративным стилем, адаптируемые к каждому мыслимому и немыслимому устройству и просто красивые сайты.
2017 год ознаменовался большим количеством достижений, включая более широкое использование мобильных устройств, наконец обогнавших стационарные компьютеры по объему загрузки и просмотра контента. Это означает, что в 2018-м мы будем эксплуатировать мобильный функционал как никогда ранее, а десктопным устройствам придется эволюционировать, чтобы оставаться актуальными. Имея все это в виду, взглянем на заметные тенденции в области веб-дизайна, которые обещают стать повсеместными.
Использование теней не ново, почему же мы его упомянули? Несмотря на то что данный прием уже давно является традиционным в дизайне, сегодня, благодаря прогрессу браузеров, мы видим ранее не существовавшие интересные вариации. Сетки (Grids) и параллакс-раскладки (Parallax Layouts) позволяют «играть» с тенями в еще более широком спектре, создавая иллюзию мира, существующего за экраном. Это непосредственная реакция на (Flat Design) — тренд, популярный последние несколько лет.
Тени создают на удивление универсальный эффект, не только поднимающий эстетику страницы на более высокий уровень, но также содействующий плавности пользовательского опыта (User Experience, UX) — благодаря расставленным акцентам. Например, использование мягких, деликатных теней в выделенном состоянии (Hover State) для обозначения ссылки — это не новая идея, но их сочетание с яркими цветовыми градиентами (подробнее об этом ниже), как в вышеприведенных примерах, усиливает трехмерный эффект теней.
2018-й — это, безусловно, год суперярких цветов. В то время как в прошлом многие бренды и дизайнеры придерживались «веб-безопасных» цветов, сегодня многие из них становятся смелее в своем подходе и окрашивают заголовки в сверхнасыщенные яркие оттенки, а также сочетают с оформлением надписей в виде косых линий и углов (вместо простых горизонтальных форм). Частично это связано с технологически более продвинутыми мониторами и экранами устройств, способными воспроизводить более насыщенные краски. Яркие и даже конфликтующие цвета могут быть полезны для новых брендов, надеющихся мгновенно привлечь внимание посетителей, но также идеально подходят для компаний, желающих отделить себя от всего «веб-безопасного» и традиционного.
Иллюстрации — это чудесный универсальный метод создания игривых, веселых и дружелюбных картинок, добавляющих сайту элемент забавности. Опытные художники придумывают иллюстрации, полные личностного подтекста и учитывающие специфику посыла бренда, а это именно то, к чему стремятся все на современных высококонкурентных рынках.
Данный тренд идеален для бизнеса, ассоциирующегося с весельем и энергичностью, но он также помогает «серьезным» компаниям стать ближе к клиентам.
Если вы хотите попробовать создать лендинг в таком стиле, но у вас пока нет сильного дизайнера, вы можете воспользоваться готовыми шаблонами или секциями в :
Также вы всегда можете заказать индивидуальный лендинг у наших дизайнеров. Посмотреть примеры готовых работ .
Фоны с движущимися частями (Particle Backgrounds) служат прекрасным решением для сайтов, столкнувшихся с проблемой медленной загрузки из-за инкорпорированного видео. Анимация же, о которой идет речь, представляет собой легкий, быстро загружающийся javascript, создающий естественное движение на бэкграунде.
Говорят, изображение красноречивее тысячи слов, и, без сомнения, это так и есть. К тому же фоны с движущимися частями притягивают взгляд, позволяя брендам за считанные секунды оставлять о себе запоминающееся впечатление. Двигающаяся графика становится все более популярной в социальных сетях, поскольку она приводит заинтересовавшиеся лиды на целевые страницы.
5. Mobile first
Как уже упоминалось, мобильный мир начинает доминировать над десктопным. Почти каждый из нас заходит в магазины и делает заказы на своем смартфоне. Когда-то это был громоздкий процесс, который пользователи не спешили так быстро принять. Дизайнеры были озабочены вопросом: как обеспечить наличие нормального меню, подменю и подподменю на маленьком экране?
Но теперь мобильный дизайн стал более зрелым. Появился разворачивающийся , и стало возможным сделать меню маленьким. Возможно, вам пришлось отказаться от больших красивых фотографий в мобильной версии, но зато иконки стали намного более экономичны с точки зрения пространства, плюс они сейчас настолько распространены, что пользователи понимают значение почти каждой из них. UX-проблемы стало легче выявлять и исправлять с помощью микровзаимодействий, и вы получаете немедленную обратную связь относительно поведения ваших пользователей.
6. Крупные жирные шрифты
Мы добавили все шрифты из коллекции Google Fonts в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов.
Одним из самых заметных нововведений 2017 года стало появление асимметричных и нетрадиционных «фрагментарных» раскладок (Layouts), и данный тренд останется актуальным и в 2018. Привлекательность асимметричных лейаутов состоит в их уникальности, специфичности и в чем-то экспериментальности.
Несмотря на то что корпорации, производящие большое количество контента, по-прежнему склоняются к традиционным структурам в виде сетки, можно ожидать, что необычные раскладки будут теперь использоваться чаще, поскольку компании все больше стремятся к обеспечению уникального опыта, выделяющего их в остальной среде. Традиционные компании в целом не будут интересоваться данной эстетикой, но крупные бренды, готовые пойти на риск, будут ожидать от своих дизайнеров нестандартного мышления.
8. Интегрированная анимация
По мере развития браузерных технологий все большее количество сайтов уходит от статических изображений и находит новые пути вовлечения пользователей, такие как анимация. В отличие от анимации отдельных частей фона, упомянутой ранее, меньшие по размеру анимационные фрагменты вовлекают зрителей посредством всего опыта страницы. Например, можно анимировать графику, доступную во время загрузки страницы, или интересно оформить выделенное состояние ссылки. Анимированные элементы также можно внедрить в скроллинг, навигацию или даже сделать их фокусной точкой всего сайта.
Анимация представляет собой замечательный инструмент включения пользователя в историю сайта, позволяющий им увидеть самих себя (и свое потенциальное будущее в качестве клиентов) в изображенных персонажах. Даже если анимация интересует вас исключительно в качестве абстрактного развлекательного визуального средства, она способна будет сделать из этого значимое для ваших посетителей взаимодействие.
Теперь градиенты становятся большими, навязчивыми и яркими. Наиболее популярной из последних реинкарнаций стал градиентный фильтр для фотографий — прекрасный способ сделать скучное изображение более интригующим. Простой градиентный фон также может стать идеальным решением в духе тренда, если у вас отсутствуют другие картинки.
Тренды-2018
Яркие цвета, смелые градиенты и анимация… Следующий год обещает стать одним из самых любопытных и запоминающихся в истории веб-дизайна. Не терпится посмотреть, как дизайнеры будут все это претворять в жизнь и как они раздвинут границы. Ведь оставаться открытым трендам — то необходимое, что вы должны делать, если хотите обеспечить своих пользователей превосходным UX.
Создание обычного веб-сайта — не такая простая задача, как создание эффективного онлайн-маркетингового инструмента с современным дизайном. Для красивого и хорошо оптимизированного сайта требуется много времени, инвестиций и даже вдохновения. Как сделать дизайн сайта, чтобы привлечь больше клиентов? Разберемся в статье.
Согласно статистике Internet Live Stats , в мире насчитывается более 1,2 миллиарда сайтов. Каждую секунду это значение становится выше примерно на 10 единиц. Независимо от отрасли, в которой вы работаете, ваш веб-сайт должен соответствовать современным требованиям как в технологическом, так и в дизайнерском аспектах. В этой статье мы сделаем упор на внешний вид сайта — как он должен выглядеть в 2017 году. Слишком яркие, красочные и вычурные шрифты считаются устаревшими уже давно. Иконки вытесняют изображения, чтобы облегчить пользователям перемещение по пунктам меню. Впрочем, эти факты известны большинству специалистов, связанных с Интернет-маркетингом. Из данной статьи вы узнаете, как должен выглядеть современный дизайн сайтов.
1. Ориентированность веб-дизайна прежде всего на мобильные устройства.
Так называемый mobile-first подход в разработке веб-сайтов существует уже более 5 лет. Хоть это и не новая тенденция, но её точно стоит отметить, поскольку она стала обязательной для любого владельца бизнеса, если он стремится увеличить продажи с использованием этого маркетингового канала.
Что означает mobile-first подход? Это веб-разработка, в которой основное внимание уделяется адаптации под мобильные устройства. Использование адаптивного дизайна вполне обосновано, особенно, если учитывать официальную статистику, опубликованную компанией StatCounter , независимым агентством по веб-аналитике. По его данным, доля использования сети Интернет с помощью мобильных устройств составляет 51,3%. Именно по этой причине Google прекратил поддержку своего сервиса Instant Search. Эта функция была доступна пользователям десктопов и предлагала результаты поиска во время того, как человек только вводил свой запрос. С ростом трафика владельцы бизнеса смогут получить больше продаж. Поэтому сосредотачиваться на более широкой аудитории — вполне имеет смысл.
2. Скрытая навигация
Многие из нас слышали, чтобы увеличить долю выполнения целевого действия пользователем, требуется минимизировать количество необходимых кликов. Чем меньше кликов, тем выше конверсия. Несмотря на этот факт, современный web-дизайн часто подразумевает наличие скрытого всплывающего меню, которое появляется после нажатия на так называемый «гамбургер». Такое решение основано на адаптивном дизайнерском подходе, когда необходимо разместить меню таким образом, чтобы оно корректно выглядело на мобильных устройствах.
Традиционная навигация по сайту, содержащая элементы, расположенные в верхней части страницы, занимает слишком много места и ограничивает возможности привлечения внимания пользователя к содержательному контенту. Создание скрытой навигации содержит в себе еще одно преимущество, которое позволяет создать более привлекательную и эффективную главную страницу.
3. Просторный первый экран
Всплывающее меню создает дополнительное пространство на первом экране главной страницы. Это позволяет выделить основные преимущества компании, используя больший шрифт, более привлекательные и читаемые иконки, для эффективного привлечения внимания пользователей. Эпоха «чем больше информации, тем лучше» уже в прошлом. Важно, чтобы пользователь прошел плавный путь, точкой назначения которого является успешно выполненное целевое действие. Более свободное пространство предоставляет дизайнерам возможность реализовать свои лучшие идеи для главной страницы сайта, которые сделают этот маркетинговый канал уникальным и более привлекательным для пользователей. Лучшие варианты дизайна сайтов содержат первый экран с фоновым изображением на всю ширину с несколькими мягкими цветами. Области навигации должны быть легко распознаваемые и читаемые для пользователей.
4. Выделенные области навигации
Скрытое меню и просторный первый экран позволяют выполнить создание дизайна сайта таким образом, чтобы он концентрировал внимание пользователей на нескольких основных навигационных элементах, которые помогут им принимать решение быстрее и легче. Такой подход побуждает пользователей перемещаться по меню, выполняя необходимые вам шаги, при этом не тратя время на поиски нужной кнопки. Благодаря просторному первому экрану можно подчеркнуть основные элементы, используя более крупные шрифты и оставляя больше пространства между ними, выделяя таким образом самый полезный контент.
5. Разработка дизайна сайта в стиле Material Design Lite
Material Design стал важным продолжением так называемого плоского дизайна, широко используемого тренда в течение последних нескольких лет. Android-дизайн был создан как интерфейс для мобильных устройств, но теперь он полностью покорил и десктопы. Этот визуальный подход делает юзабилити основным компонентом всей задумки. Material Design Lite (MDL) является следующим поколением Material Design. Он включает в себя рекомендации, наборы макетов и общую структуру с инструментами, которые позволяют любому дизайнеру быстро и легко создавать MDL сайт с помощью удобной выборки палитр.
6. Большие иконки
Популярность значков в дизайне веб-сайтов объясняется тем, что человек помнит 65% визуальной информации через три дня и только 10-20% — письменной или устной. Поэтому человеческому мозгу легче обрабатывать изображения, чем текст. Стоит отметить, что иконка должна соответствовать тексту, к которому она относится, чтобы не путать пользователей. Приевшиеся изображения людей с гипертрофированной и искусственной мимикой — устарели. Иконки также должны быть векторными, чтобы корректно отображаться на любом устройстве. Вы можете посмотреть примеры дизайна сайтов в нашем и познакомиться с нашими работами.
Главные требования к использованию иконок в веб-дизайне:
- Иконка должна соответствовать контенту;
- Она должна содержать четкое сообщение;
- Она должна быть векторной;
- Иконка должна легко читаться, будь она маленькая или крупная.
Перейдем к последним тенденциям в выборе шрифтов и цветов для сайта.
7. Простые шрифты и мягкая цветовая палитра
Токсичные цвета в веб-дизайне перестали быть популярными около пятнадцати лет назад. Теперь дизайнеры перешли к сдержанным пастельным оттенкам, мягким не кричащим цветам. Схема 60-30-10 не теряет свою актуальность: в современном веб-дизайне превалируют нейтральные цвета от белого до бледно серого, для 30 процентов пространства используют более яркий тон, и всего 10 % окрашивают в насыщенный цвет, создавая тем самым призыв к действию.
Веб-разработка теперь вступила в эпоху простой красоты, где предпочтения отдаются большим и простым шрифтам с несколькими мягкими оттенками. Как можно объяснить такую тенденцию? Этот подход имеет смысл, поскольку он фокусирует внимание пользователей исключительно на наиболее важных блоках информации.
Мы представили базовый список новых тенденций в дизайне веб-сайтов. Нас самом деле их намного больше, что делает материал слишком обширным для одной статьи. Мы обязательно продолжим рассказывать вам о новейших дизайнерских решениях в веб-разработке на нашем блоге.
Наша команда с удовольствием поможет вам создать адаптивный дизайн сайта, в котором будут внедрены основные тенденции веб-дизайна и эффективные технологии для достижения максимальной оптимизации. Напишите нам на , и мы будем рады помочь!
