2016 год уже на пороге, так что пришло время заглянуть немного вперед и попытаться предсказать появление новых трендов в веб-дизайне в ближайшее время.
В современном мире делать предсказания немного неблагодарное занятие. Технологии меняются настолько быстро, что очередное предсказание может стать устаревшим в мгновение ока. С другой стороны, некоторые тенденции настолько укрепились в веб дизайне, что остаются на пике популярности на протяжении многих лет и совершенствуются. Опытные дизайнеры, которые сталкиваются с этим каждый день, могут заранее заметить возможные изменения.
Например, как директор по дизайну продукта Facebook Джули Чжо , которая недавно сделала прогноз тенденций в веб-дизайне на целых 10 лет вперед. С нашей стороны было бы слишком смело заглядывать так далеко, но предвидеть появление некоторых тенденций, которые, несомненно, будут популярны в следующем году, вполне возможно. Давайте рассмотрим самые крутые тренды в веб-дизайне, которые мы, возможно, увидим в 2016 году.
Цветовая гамма – это тот аспект, который всегда находится под пристальным вниманием многих специалистов, включая дизайнеров интерьера и модельеров. Стоит отметить, что цветовые тенденции обычно универсальны для всех сфер, делающих акцент на зрительном восприятии. Таким образом, следя за популярными цветами в сфере дизайна интерьера или одежды, вы сможете предвидеть, какие оттенки будут модными в области веб-дизайна. Кажется, в 2016 году самое время использовать яркие цвета и дерзкие сочетания оттенков .
Яркие цвета всегда были прерогативой креативных веб-сайтов, таких как портфолио дизайнеров или персональные страницы фотографов. Сегодня мы можем наблюдать использование ярких тонов в разнообразных дизайнах даже традиционно сдержанных черно-белых бизнес- или финансовых сайтов.
Это не значит, что в 2016 минимализм отойдет на второй план. Совсем наоборот, он будет оставаться одной из самой популярных тенденций дизайна на ближайшие несколько лет. Яркие цвета делают минималистический дизайн более привлекательным, не перегружая его лишними элементами или навязчивым оформлением. Помните, что пустое пространство активно используется в «чистом» дизайне, но это не всегда подразумевает использование только белого цвета. Вы можете использовать яркие цвета для фона в чистом виде, добавлять градиенты или выделять наиболее важные элементы с их помощью.
Некоторые дизайнеры называют данный стиль «почти плоским» дизайном, поскольку он добавляет немного глубины плоским элементам. В этом году популярность выросла среди веб-дизайнеров, и кажется, эта тенденция продолжится в следующем году.
Материальный дизайн сохраняет все основные преимущества плоского дизайна, за исключением того, что материальный добавляет объем (так называемую ось Z) для выделения кликабельных элементов или элементов для совершеения других действий. Он сочетает в себе красоту и удобство использования, что делает данный тренд весьма привлекательным для разработки веб-сайтов. Анимация становится изюминкой дизайнов, поскольку она функционируют не как простое украшение, а как улучшение юзабилити.
В Google проделали очень крутую штуку: они создали документ с рекомендациями для применения принципов материального дизайна и подтолкнули людей использовать их в своих работах. Они сделал данный стиль более доступным для дизайнеров, не принуждая их гадать, что нужно сделать для достижения того или иного результата.
Шрифты – это уникальный элемент дизайна веб-сайта. При грамотном использовании они могут не только передать смысл (что написано), но и служить декоративным элементом (как это написано). В последнее время надписи все больше и больше используются в веб-дизайне как оформление и выполняют такие же задачи, как и использование цветов.
Все более частое использование мобильных девайсов дало толчок к использованию крупных шрифтов в веб-дизайне. Очевидно, что тексты на маленьких экранах должны выглядеть крупнее, чтобы быть легко читаемыми. Эта тенденция стала широко использоваться для создания интересных дизайнов.
Большое разнообразие бесплатных шрифтов , особенно шрифтов Google, делает надписи прекрасным элементом дизайна, который открывает широкие возможности для веб-дизайнеров. Более того, широкий выбор бесплатных или недорогих (но тоже крутых) шрифтов делает создание авторских дизайнов легким даже для обычных пользователей. Наряду с вышеупомянутым трендом использования ярких цветов, большие надписи также могут создать потрясающий эффект в дизайне веб-сайтов. Но стоит учесть, что использование надписей требует более глубокого знания шрифтов, их размеров, комбинаций и сочетания с окружающими элементами дизайна.
Одностраничный дизайн не такой уж и новый тренд, поскольку появился в сети несколько лет назад. Можно надеяться, что он и дальше не останется без внимания дизайнеров. Это довольно-таки противоречивая тенденция, которая по-прежнему имеет много противников и много сторонников.
Одностраничные дизайны часто встречаются на посадочных страницах , поскольку такой вид веб-сайтов не нуждается в сложной структуре. Эта тенденция появилась благодаря мобильно-ориентированного интернета, где акцент на удобство сайта подразумевал отказ от менее важных элементов и облегчение навигации сайта.
Безусловно, одностраничники подходят далеко не для каждого сайта. С таким дизайном вам обязательно понадобится продумать особенности навигации (закрепить меню в верхней части страницы, добавить кнопку “наверх”, чтобы позволить пользователям легко возвращаться к началу страницы). Но эта тенденция, безусловно, останется в центре внимания в течение следующего года.
Данный тренд тесно связан с одностраничными веб-сайтами. В связи с широким использованием мобильных девайсов, прокрутка стала более удобной в использовании, чем клик. Длинная прокрутка используется в дизайне многих сайтов, чтобы рассказать историю бренда и привлечь пользователей.
Трудно сказать, повлияла ли техника скролла на появление теории “над линией фолда” или же наоборот. Так или иначе прокрутка не так важна для современной сети. Многие владельцы веб-сайтов по-прежнему придерживаются идеи размещать наиболее важные элементы, например, как кнопки призыва к действию, в верхней части экрана. По правде говоря, это зависит от разных факторов. Привлечь посетителей и заставить их прокрутить до момента совершения покупки намного сложнее, чем просто разместить кнопку «Купить сейчас» в границах первых 600 вертикальных пикселей экрана. Но это более выгодно для вашего веб-сайта и его юзабилити.
В связи с ростом использования мобильных устройств для работы в Интернете, все чаще начали появляться вопросы по поводу навигации для мобильных девайсов . Давно знакомая иконка «гамбургер»-меню в настоящее время является одним из лучших решений.
Несмотря на то, что многие веб-дизайнеры против использования меню «гамбургер» в версиях веб-сайта для десктопа, эта крошечная иконка из трех линий завоевала адаптивный дизайн, так что в ближайшее время мы будем видеть все больше и больше «гамбургеров».
Фактически основной аргумент против «гамбургер»-меню, это его слабое узнавание. Но так как все больше и больше сайтов его используют, не думаю, что данная проблема все еще актуальна. Такая навигация более удобна для пользователей мобильных девайсов, чем другие типы адаптивной навигации как, например, закрепленная строка меню вверху страницы или скрытое меню.
Так как визуальные эффекты являются одним из наиболее важных аспектов для любого веб-сайта, огромное количество, например, фоновых изображений и видео определенно будут чаще использоваться на сайтах. HD изображения или полномасштабные фоновые фотографии являются лучшим способом привлечения внимания пользователя. Передовые технологии позволяют уменьшить пропускную способность и сжимать изображения для мобильных устройств без потерь, чтобы максимально сохранить качество изображений маленького размера. Таким образом, большие фотографии не повлияют на восприятие пользователем и скорость загрузки.
Видео также являются мощным способом привлечения внимания к веб-сайтам и их контенту. Но нужно следить за их весом, так как скорость загрузки сайта – один из главных параметров, который учитывает Google при ранжировании ресурса.
Создать хороший макет, означает одновременно сделать его и красивым, и удобным для пользователей. В современном веб-дизайне фокусируются эти аспекты, поэтому структура сайта постоянно улучшается для достижения наилучших результатов.
На протяжении нескольких последних лет мы повсюду можем видеть использование карточного дизайна . Это все началось со стиля «метро», а затем проявилось в дизайне социальной сети Pinterest. Такой тип макета особенно подходит для создания адаптивных веб-сайтов, поскольку вы можете группировать карточки в подвижные блоки, чтобы соответствовать небольшим размерам экранов. Блоки и карточки используют свободное пространство для творческой подачи контента.
Сплит-лейауты давно пользуются популярностью. Этот тип макета делит контент на части, причем эти части намного крупнее, чем в сетке. Вы делите экран на две вертикальные части, а затем размещаете свой контент в пределах каждой из этих частей. Сплит открывает много возможностей для веб-дизайнеров, начиная с использования различных цветов для каждого фрагмента контента и заканчивая анимированными эффектами для навигации.
Центрированный контент несет в себе функции противоположные сплит макету. Он собирает все основные элементы и контент в центре макета, чтобы привлечь внимание пользователей к нему. Центрованный контент отлично подходит для одностраничных сайтов и минималистических дизайнов.
Главным изменением за последние годы стало стирание границ между работой дизайнера и разработчика. В последнее время, часто встречаются дизайнеры с навыками кодирования. Современные дизайнеры без проблем используют различные сервисы прототипирования и быстро сооружают хороший макет с динамическим контентом вместо мокапов, которые нужно потом кодировать.
Благодаря огромному количеству различных инструментов для создания макетов прямо в Интернете дизайнеры имеют больше возможностей видеть, как их проекты будут работать. Работа в браузере с онлайн инструментами становится повседневной рутиной для многих дизайнеров и разработчиков. MotoCMS также является онлайн инструментом, который позволяет разработчикам создавать веб-сайты онлайн. Так что в скором времени мы ожидаем увидеть больше приложений, что позволят разрабатывать сайты прямо на мобильных устройствах.
Тенденции в веб-дизайне приходят и уходят. Одни задерживаются на чуть больший отрезок времени, другие трансформируются во что-то новое, третьи – исчезают навсегда.
Что же приготовил нам следующий год? Вывести основные тренды попыталась команда awwwards.com ..
Предупрежу сразу, что ожидать какой-то революции не стоит. Основные тенденции, которые задавали тон в 2015 году, будут продолжать господствовать.
В последнее время мы наблюдали всплеск популярности адаптивного дизайна. И это было не простой прихотью дизайнеров – так сложились обстоятельства, нужно сделать все для того, чтобы сайт отображался оптимально на мобильных устройствах.
Другие тенденции плавно вытекают из этой, основной и наиболее важной. Давайте рассмотрим их подробнее.
Распространение UI шаблонов
Одним из побочных эффектов адаптивного дизайна является то, что все сайты становятся в чем-то похожими друг на друга. Но в этом виноват не только отзывчивый дизайн. К этому также приложили руку строительство сайтов на WordPress, и быстро разрастающийся рынок готовых шаблонов.
Но это не обязательно плохо. Хотя бы потому, что мы изменили способ использования Интернета, что привело к такой популярности шаблонов проектирования общего пользовательского интерфейса. Нет реальных оснований изобретать колесо. Шаблоны интерфейса должны дарить пользователям хороший опыт, быть простыми и понятными.
Вот несколько моделей, с которыми вы должны быть знакомы:
- гамбургер-меню . Пусть многие критикуют этот шаблон, но широкое его применение делает функцию легко узнаваемой для пользователей.
- регистрация аккаунта сейчас проводится двумя путями: или с помощью кнопки регистрации, или через социальные сети. Эти два варианта удобны и понятны для пользователей, и уберегают их от лишних и запутанных действий.
- бесконечный скроллинг . Размещение всех важных элементов в верхней части в настоящее время неактуально. Кроме того, почти все привыкли к скроллингу, благодаря мобильным устройствам. Техника работает особенно хорошо для сайтов, которые хотят заманить пользователей через истории, и вы все еще можете имитировать многостраничный сайт, деля страницу на зоны.
- карточный дизайн . Появившись впервые на Pinterest, карточный шаблон мгновенно распространился по Интернету. Все благодаря тому, что карты позволяют быстро сканировать информацию и находить нужное. Каждая карта представляет собой единую концепцию. Такой дизайн позволяет намного легче организовать содержимое для оптимального отображения на разных устройствах.
- большие фоновые изображения . HD изображения являются одним из самых быстрых способов, чтобы захватить внимание пользователя. Благодаря достижениям в пропускной способности и сжатия данных, пользователи не будут страдать от медленной загрузки.
Как видим, все те тенденции, которые мы могли наблюдать в течение прошлого года, остаются актуальными.
Богатая анимация
Анимация используется все больше и больше, и делает пользовательский опыт более интерактивным и интересным.
Тем не менее, вы не можете просто применять ее в любом месте, где вам вздумается. Анимация должна служить определенным целям, а не просто быть украшением.
Анимацию можно рассматривать с точки зрения двух групп:
Крупномасштабные анимации . Они используются в качестве основного инструмента взаимодействия, имеют большое влияние на пользователей, и включают в себя эффекты, такие как параллакс-прокрутка и всплывающие уведомления.
Мелкие анимации . Они включают в себя счетчики, ховер-инструменты и загрузочные бары, и не требуют каких-либо пользовательских манипуляций.
Мы опишем 7 самых популярных методов анимации:
- анимация загрузки . Она используется, чтобы скрасить время ожидания загрузки страницы. Как правило, популярна на страницах с плоским дизайном, выполненных в минималистском стиле, а также на одностраничниках.
Делайте подобные вещи простыми, и не используйте дополнительно звук (хоть это и модно в последнее время). Помните, что эти детали должны соответствовать цветовой палитре и общему стилю вашего сайта.
- навигация и меню (НЕ скроллинг).
Скрытое меню становится все более популярными, особенно в тех случаях, когда может быть использовано для сохранения места на экране.
- hover-анимации широко используются для создания обратной связи при наведении курсора мыши на объект.
- галереи и слайдшоу являются эффективным способом, чтобы продемонстрировать несколько изображений, не перегружая пользователей.
- анимация движения . Наши глаза, естественно, обращаются к движению, что делает его идеальным инструментом для привлечения внимания пользователя. Движение также может помочь с визуальной иерархией, добавить интерес и интригу.
- прокрутка . Гладкая прокрутка зависит от анимации и дает дополнительный контроль для пользователя, который может определить темп, с которым разворачивается содержимое сайта.
- фоновая анимация (видео). Простой анимированный фон можно добавить в дизайн сайта, но нужно использовать его в умеренных количествах, иначе это может очень отвлекать пользователя.
Микровзаимодействия постоянно вокруг нас, начиная с выключения будильника на смартфоне утром.
Каждое из них сделано без задней мысли. Вполне вероятно, что вы начали свой день с микровзаимодействия. Отключив будильник на своем мобильном телефоне, вы занимаетесь с пользовательским интерфейсом всего один момент. И все больше и больше из них реализовываются в программах и устройствах, которые мы используем.
Микровзаимодействия должны происходить естественно и практически незаметно для пользователя. Они являются важной частью почти каждого цифрового дизайна. Вы практически не сможете создать веб-сайт или мобильное приложение, которое не включает в себя некоторый элемент, с которым пользователь должен взаимодействовать.
Материальный дизайн: богатая альтернатива плоскому дизайну
Целью материального дизайна является создание чистого, модернистский дизайна, который сосредоточится на UX.
С его минималистичным взглядом, материальный дизайн имеет много общего с другой растущей тенденцией - плоской конструкцией. Но он использует глубину и тень, что делает его более интересным и богатым.
До сих пор мы видели, что большинство «материальных» проектов ограничивается дизайном приложения. В следующем году материальный дизайн повсеместно будет применяться на сайтах.
Отзывчивый дизайн
Отзывчивый веб-дизайн стал невероятно популярным в последние годы, благодаря росту использования мобильного Интернета.
Можно с уверенностью сказать, что отзывчивый дизайн никуда не денется в ближайшее время, поскольку он представляет собой относительно простой и дешевый способ для бизнеса, чтобы построить полностью функциональный мобильный сайт.
Отзывчивый веб-дизайн отлично сотрудничает с карточными и плоскими конструкциями.
Плоский дизайн никуда не уходит
Плоский дизайн был популярен в последнее время, и прекрасно совместим с другими тенденциями, такими как минимализм, отзывчивый и материальный веб-дизайн.
Забегая вперед, можно предположить, что вполне вероятно, мы увидим следующие тенденции в плоской конструкции в 2016 году. На первый план выходят:
Длинные тени. Они приносят больше глубины плоским конструкциям.
Яркие цветовые схемы . Популярные шаблоны побудили многих дизайнеров начать использовать более яркие цвета в своих проектах.
Простая типография . Простые шрифты способствуют тому, что текст остается разборчивым и читаемым в плоском дизайне.
Призрачные кнопки . Они остаются функциональными, совершенно не нарушая общий стиль.
Минимализм позволяет создать лаконичный интерфейс и избавиться от всего лишнего.
Вместо итогов
Как видим, грядущий год не принесет нам практически ничего нового. Те же тенденции, которые мы наблюдали в течение нескольких последних лет, остаются актуальными. Возможно, мы сможем наблюдать некоторые новые формы – но основные тренды остаются такими же.
Команда конструктора сайтов Wix разобралась с перспективами развития на 2016 год. Впереди нас ждут ооооочень длинные сайты, проекты, ориентированные на контент и читателя, а также упрощения всего и вся.
В мире веб-дизайна жизнь не стоит на месте. Новые идеи, техники, инструменты и подходы появляются чуть ли не каждый день. В веб-дизайне, как, впрочем, и в любой другой сфере деятельности - тем, кто интересуется предметом и намерен в нем разбираться, нужно держать руку на пульсе и наблюдать за тем, что происходит.
Лично мы считаем отслеживание трендов веб-дизайна своей прямой обязанностью. Наша задача - предлагать не только конструктор сайтов, но и самые современные шаблоны, чтобы каждый из вас мог без труда сделать красивый и профессиональный сайт.
2015 год плавно подходит к концу, поэтому давайте поговорим о том, что будет актуально в самом ближайшем будущем. Думаете, рано? До 31 декабря остался всего один квартал, так что если хотите, чтобы ваш сайт соответствовал модным тенденциям - начинайте интересоваться вопросом уже сейчас.
Вот наши соображения по поводу трендов в веб-дизайне на 2016 год. В целом - любопытно и многообещающе, но есть несколько неоднозначных вещей.
Текст + графика = любовь. Приготовьтесь к тому, что дизайнеры начнут использовать текст, составленный из графических элементов: изображений, текстур и геометрических форм. Типографика всегда считалась важной частью веб-дизайна, а с ростом технических возможностей ее роль будет только усиливаться.
Веб-дизайн, ориентированный на клиента. Чтобы сделать хороший сайт, нужно понимать, чего хочет аудитория. Мысль не новая, но обсуждать ее всерьез начинают только сейчас. Суть в том, что дизайнер должен представлять, как клиент пользуется сайтом, и делать все, чтобы ему было максимально понятно и комфортно. Контент и картинки должны привлекать всех, но в первую очередь - представителей конкретной целевой аудитории.
Все внимание на контент. Хороший способ подчеркнуть важность сообщения - поместить его прямо по центру страницы и добавить эффектное изображение или однородный фон. Этот прием идеален для тех случаев, когда вы хотите сделать акцент на коротком высказывании.
Блоки с контентом. Если высказывание не одно, то есть смысл поделить страницу на несколько больших блоков - это по-прежнему актуально. Блоки должны быть не такими, как в Пинтересте, а широкими - на весь экран. Хотим обратить ваше внимание на то, что каждый блок может быть оформлен в своем стиле. Это дает дизайнерам большую свободу - можно не беспокоиться о визуальной иерархии.new
Ооооочень длинные сайты. Популярность мобильных интерфейсов и Фейсбука привела к тому, что все начали делать страницы с длинной прокруткой. Идея сама по себе неплохая, особенно если знать меру. Сейчас мы с сожалением отмечаем, что некоторые сайты получаются слишком длинными. К самым распространенным ошибкам их создателей относится бесконечная прокрутка, любовь к тяжелым анимационным эффектам и неумение структурировать контент.
Надежно спрятанное меню. Вы не могли не заметить, что привычное навигационное меню уменьшилось до одной-единственной иконки, которая раскрывается при клике. На экранах мобильных устройств, где мало места и важен каждый пиксель, это действительно удобно, а вот на обычных - не всегда. Бывает, человек не видит эту иконку и не понимает, как ему перейти из одного раздела в другой. Золотое правило дизайна гласит - избегайте ненужных сложностей. То есть, не прячьте меню и не заставляйте пользователя искать его.
Слишком много слоев. Текст поверх картинки, а картинка - поверх пестрого неоднородного фона. Как думаете, кто-нибудь захочет разбираться в этом хаосе? Давайте договоримся соблюдать порядок. Это несложно, для начала можно избавиться от лишних элементов, размещенных в двух или трех слоях.
Ненужное вступление. У современных сайтов есть серьезный недостаток - они очень «тяжелые». Иногда вместо того, чтобы уменьшить количество контента и увеличить тем самым скорость загрузки, их владельцы маскируют проблему, добавляя вступительную страницу с приветствием. Пока пользователь просматривает вступление, сайт-тяжеловес тихонько загружается. Что в итоге? В итоге вы не сближаетесь с посетителем, а наоборот - отталкиваете его, создавая дополнительное препятствие. Выход - смело убрать все лишнее.
Перебор с приложениями. Здорово, что на сайт можно добавить любое стороннее приложение, но всему есть предел. Пожалуйста, не увлекайтесь. Поймите, что над этими приложениями работали разные люди. У каждого из них - свой стиль, который зачастую не совпадает со стилем вашего сайта. Чрезмерное увлечение приложениями не приведет ни к чему хорошему, честное слово. Наш совет - выбрать одно или два самых необходимых, и ограничиться ими.
Google Deep Dream. Зловещая психоделическая вселенная, придуманная Google, вдохновляет людей на создание странных вещей. Пока что эти картинки можно наблюдать только в соцсетях, но мы опасаемся, что очень скоро они перекочуют на сайты. Бррр…
Кто может забыть о GIF-90-х годов, или более современную находку как, например, Flat design?
В последнее время мы видели всплеск популярности адаптивного веб-дизайна, в то время как все больше и больше сайтов присоединяются к всеобщему тренду, чтобы стать «мобильно-пригодными», что стало еще более важным в результате обновления мобильной среды Google. Давайте рассмотрим некоторые из наиболее популярных тенденций этого и наступающего годов.
1. Распространение шаблонов UI
Один из побочных эффектов адаптивного дизайна привел к тому, что многие сайты стали похожими. Однако, виноват в этом не только адаптивный дизайн. Подъем популярности сайтов WordPress и быстро развивающийся рынок данной темы также имеет отношение к этому.
И некоторые люди, такие как Мэтью Монбр уже были пойманы, и признаны виновными в подражании другим сайтам.
Но иметь похожий вид не обязательно плохо. Это происходит потому, что наше поведение по отношению к интернету изменилось, что привело к наличию общих шаблонов дизайна пользовательского интерфейса. Шаблоны дизайна усовершенствовались и, таким образом, когда дело доходит до моделей пользовательского интерфейса, то здесь можно обнаружить не много инноваций. Другими словами, заказы остаются заказами и должны функционировать в качестве таковых. То же самое касается моделей для создания логина. Здесь нет реальных оснований изобретать колесо. Шаблоны интерфейса должны облегчать жизнь пользователям.
Вот несколько моделей, с которыми вам следует познакомиться:
Больше шаблонов и методов интерфейса вы найдете в бесплатной электронной книге «Тренды веб-дизайна 2015и 2016 годов».
2. Яркие анимации
Анимации используются все больше и больше для повышения плотности сайта, что делает взаимодействие более интерактивным и интересным.
Тем не менее, вы не можете просто разместить анимацию в любом месте. Подумайте и тщательно взвесьте, добавляют ли они значимости вашему сайту и его формату. Анимации можно рассматривать с точки зрения двух групп:
Мы опишем 7 самых популярных видов анимации:
Они используются, чтобы развлечь пользователей и вызвать их восторг во время утомительной работы. Загрузочные анимации, как правило, популярны в flat design, минимализме, портфолио и одностраничных сайтах.
Сохраните простоту анимации и не добавляйте звук. Они должны соответствовать тематике и цветовой палитре вашего сайта.
Скрытые меню навигации становятся все более популярными, особенно, когда они могут быть использованы для экономии места на экране. Как вы можете видеть на приведенном ниже примере созданного в совместном прототипе инструмента UXPin, здесь используется анимация, чтобы выявить меню при нажатии на конкретную кнопку и предотвратить резкий переход (напоминает навигационный инструмент, скрытый за иконкой гамбургера).
Указательные эффекты определяют логику сайта, пока пользователи наводят мышь над содержанием. Люди не уверены, что функциональные возможности сайта достаточны без использования указателей.
Галереи и слайд-шоу являются эффективным способом продемонстрировать несколько изображений, не перегружая пользователей. Они прекрасно подходят для сайтов с фотографиями, витрин с продукцией и портфолио.
Наши глаза, естественно, обращают внимание на движение, что делает его идеальным инструментом для привлечения внимания пользователя. Движение также может помочь с визуальной иерархией. Оно может помочь увеличить интерес и интригу к формам, CTAs и пунктам меню.
Гладкая прокрутка зависит от анимации и дает дополнительный контроль пользователю, который может определить темп с которым разворачивается анимация.
Простой анимированный фон может добавить видимость сайту, но должен быть использован в умеренных количествах иначе это может очень отвлекать пользователя. Ключ лежит в работе на отдельных секциях или нужно создать плавное движение всего изображения.
3. Микровзаимодействия
Микровзаимодействия происходят повсюду, от выключения будильника на мобильном телефоне до кликания на картинку с изображением кошки на Facebook.
Каждый делается в считанные секунды. Вполне вероятно, что вы начали свой день с микро-взаимодействия. Отключив будильник на своем мобильном телефоне, вы занимаетесь пользовательским интерфейсом в тот же момент. И все больше и больше из них «пекутся в программах» и устройствах, которые мы используем.
Микровзаимодействия, как правило, делают, или помогают вам делать, несколько разных дел:
Микровзаимодействия являются жизненно важной частью любого приложения.
Как рекомендуется в книге «Тренды веб-дизайна 2015и 2016 годов», вы хотите убедиться, что эти взаимодействия произойдут практически незаметно. Не усложняйте - относитесь к этому просто. Рассмотрите каждую деталь с большой осторожностью, и заставьте каждое взаимодействие чувствовать себя человеком. Это сделает текст близким каждому и не подобно роботу.
Микровзаимодействия являются важной частью почти каждого цифрового дизайн проекта. Вы с трудом решитесь создать веб-сайт или мобильное приложение, которое не включает в себя некоторый элемент, или момент с которым пользователь должен взаимодействовать.
Каждый из этих типов взаимодействия приводит пользователей к дизайну более ориентированному на человека. Концепция, благодаря которой устройства становятся более человеко-ориентироваными, является ключом к принятию этого устройства и его использованию.
4. Material Design: «богатая» альтернатива Flat Design
В прошлом году, Google запустил новое направление в стиле - Material Design. Он использует теневые эффекты и концепт движения и глубины для того, чтобы создать проекты более реалистичные для пользователя.
Цель Material Design - это создание чистого, модернистского дизайна, который сосредоточится на UX. В то время как эстетический дизайн Google имеет недоброжелателей, его в основном хвалили за «смену игры».
Со своим минималистичным видом, Material Design имеет много общего с другой растущей тенденцией - плоским дизайном или Flat Design. Material Design, однако, использует глубину и тени, что позволяет выглядеть более реалистично, чем на чистом плоском дизайне.
До сих пор мы видели большинство проектов Material Design, которые ограниченны дизайном приложений. Google объявил, однако, о выходе Material Design Lite в июле, который больше подходит веб-сайтам. Тем не менее, Material Design был предназначен обеспечить хороший пользовательский интерфейс и UX на различных устройствах. Lite использует vanilla CSS, HTML и JavaScript, и предназначен упростить применение Material Design ко внешнему виду и некоторым внутренним элементам веб-сайтов.
Material Design Lite не полагается на какую-либо конкретную структуру, и поэтому дизайнеры могут использовать широкий спектр интерфейсных инструментов для создания своих сайтов. С этим видом дизайна также легко управиться, когда дело доходит до кода.
5. Адаптивный дизайн
Адаптивный веб-дизайн стал невероятно популярным в последние годы, благодаря росту использования мобильного интернета.
Можно с уверенностью сказать, что адаптивный дизайн никуда не денется в ближайшее время, поскольку он представляет собой относительно простой и недорогой способ, при помощи которого владельцы сайтов могут построить вполне функциональный удобный мобильный сайт. Но адаптивный веб-дизайн может привести к некоторым проблемам, если его не проводить должным образом - наиболее важная характеристика бытия.
Чтобы понять, что адаптивный дизайн работает на пике своих возможностей, согласно Guy’s Pod, дизайнерам следует:
Производительность очень важна не только для UX, но и Google в связи с обновлением мобильной среды, которая была выпущена в апреле 2015 года. Адаптивный веб-дизайн также полностью совместим с минимализмом, благодаря необходимости держать вес страниц в нижней части. Также отлично было бы работать с картами и адаптивным дизайном, поскольку они могут легко перестроиться, чтобы соответствовать любому устройству или размеру экрана (как перестройка прямоугольных контейнеров с контентом).
Адаптивный веб-дизайн становится все меньше трендом и все больше практически необходимым. И дизайнеры придумали умные способы обойти любые проблемы как можно быстрее.
Нет сомнений, что адаптивный дизайн весьма полезен и универсален, но он также должен быть быстр как молния, чтобы предоставить качественный UX.
6. Flat Design пока не уходит
Плоский дизайн пользовался популярностью некоторое время, и все еще конкурирует с другими тенденциями, такими как минимализм, адаптивный веб-дизайн и Material Design.
Забегая вперед, вполне вероятно, что мы еще увидим тренды Flat Design, которые возможно выйдут на первый план.
Не следуйте тренду просто потому, что он «в моде» и потому что все так делают. Тренды представляют собой популярные инструменты по причине, но убедитесь, что они самое лучшее для ваших пользователей. Например, коммерческий сайт, конечно, не выиграет, если сделает одностраничный сайт с бесконечной прокруткой.
Тренды - это не более чем дополнительные инструменты в вашем наборе дизайнера. Всегда выбирайте нужные инструменты для работы.
Для получения более подробной консультации по 10 наиболее важных тенденциях веб-дизайна, прочитайте бесплатную электронную книгу «Тренды веб-дизайна 2015и 2016 годов». Вы узнаете лучшее из анализа 166 примеров таких компаний, как Google, Apple, Reebok, BMW, Intercom , Adidas, Dropbox и многих других.
Высоких конверсий!
Прежде всего тем сайтам, чье визуальное оформление не менялось несколько лет. Веб-технологии столь быстро развиваются, что актуальные всего лишь 3-4 года назад тенденции сегодня не выдерживают конкуренции. А ведь дизайн влияет на поведенческие факторы, что, в свою очередь, может отразиться на позициях в выдаче. Но главное – удобный, современный, интересный дизайн повышает конверсию сайта, то есть увеличивает продажи с него.
Поэтому важно понимать, какие же элементы, приемы, фишки формируют современный веб-дизайн. Итак, приводим топ-10 трендов в дизайне, повышающих конверсию сайта. Большинство иллюстраций, приведенных в статье, являются нашими проектами за последний год.
Полноэкранные изображения
На крупных картинках невольно останавливается взгляд. Поэтому они все так же повышают конверсию сайта. Особенное доверие у пользователей вызывают изображения с улыбающимися людьми, динамическими картинками на заднем фоне и синемаграфы .
Привлекательный уютный интерьер развернут во весь экран, так и хочется пройтись по комнате
http://cheslara.kz/
Веточка едва колышется на ветру, передавая ощущение загородной идиллии
http://id-es.ru/
Сплит-макеты
Если на сайте предлагается несколько разных видов продуктов или услуг, сплит-экран помогает разделить аудиторию на 2 потока быстрее всего. Так пользователь идет по тому пути, который удовлетворит его интерес.
Сплит-экран разделяет разношерстную целевую аудиторию клининговых услуг на 2 большие группы. Для каждой группы подготовлена отдельная страница с привлекательными именно для нее условиями
http://www.bee-agency.ru/
Монохроматические цвета
«Призыв к действию» всегда должен выделяться. Яркий цвет кнопки или надписи и приглушенный тон фона действительно помогут сделать правильный акцент.
Фон затемнен, все внимание на кнопке с целевым действием
http://mmobnovka.hostim.ru/
Приоритет навигации
Не стоит вываливать весь контент и возможности сайта на главную страницу. Лучше спрятать второстепенные опции в иконку меню, в таком случае на первый план выйдет то действие, которое вы больше всего хотите получить от посетителя.
Меню с услугами компании спрятано за едва заметным аккуратным значком.
Первое, что видит посетитель – кнопка с целевым действием
https://ewebdesign.com/
Минимальное количество полей в формах
Первый шаг должен быть легким, поэтому для формы захвата нужно простое действие, которое можно быстро выполнить. Разместите одно поле на посадочной странице и соедините с убедительным текстом призыва к действию – и дело в шляпе.
Ничего лишнего в форме: лишь имя и телефон (причем обязательным является лишь телефон)
http://mmobnovka.hostim.ru/
Использование видео
Что останавливает посетителя от покупки на сайте? Правильно, отсутствие доверия. Видеоролик – отличный способ представить свой бренд, рассказать вашей аудитории о себе.
Видеоролик наглядно показывает стиль и возможности студии
http://dev.smartlanding.ru/matroshka/
Призыв к действию, доступный в любой момент
Если в момент прокрутки посетитель принял решение выполнить ваш призыв к действию, нельзя создавать ему препятствия на этом пути. Располагайте CTA каждые 1,5-2 экрана страницы: как минимум, в первом и последнем экранах.
Карточное расположение элементов
Блоки размещаются порциями, удобными для восприятия. В одном таком блоке – единая концепция (товар, услуга, акция и т.д.). Кроме того, именно такое расположение элементов очень отзывчиво по отношению к мобильной оптимизации – блоки легко перестраивать.
Каждый блок в портфолио посвящен одной фотосессии, а карточное расположение блоков позволяет быстро просмотреть все обложки и кликнуть на приглянувшуюся
http://dev.smartlanding.ru/matroshka/
Призыв к действию – кнопка, а не форма
При клике отроется модальное окно. Доказано, что оформление призыва к действию только одной кнопкой может увеличить клики по ней.
Целевое действие воплотилось в кнопке. Кликнуть по ней гораздо проще, а пользователь уже морально готов оставлять заявку и заполнять поля в модальном окне
http://eco-hyla.ru/
Адаптивность под мобильные устройства
За 2015 год значительно увеличилось число мобильных пользователей Интернета, поэтому дизайн обязан предусматривать гибкое построение элементов для того, чтобы его легко было адаптировать под различные экраны. Прежде всего, для него характерны блочность, переключение макетов, масштабирование.
Элементы легко перестраиваются под узкие экраны мобильных, меню собирается в «гамбургер»
http://alfaclean-ufa.ru/
Типографика как основа дизайна
В 2016 году для сайтов предпочитают брать шрифты без засечек (чтобы текст оставался читабельным) очень большого или очень маленького размера. Текст накладывается на изображение и обязательно составляет с ним единую композицию.
Маленький шрифт тоже может быть убедительным
https://www.worldclass.ru/
Крупный шрифт – основной прием для привлечения внимания
http://www.spbinvestment.ru/ru
Оптимальная длина страницы – 5-7 экранов
http://avia-mto.ru/
Анимация
Компенсирует общую тенденцию минимализма, без ее проявлений сайт выглядит мертвой картинкой. Анимация обычно сопровождает определенное действие, часто побуждая совершить следующее (нажать на кнопку). Несколько основных направлений анимации:
Отметим, что в целом 2016 год продолжает брать на вооружение тенденции, утвердившиеся в предыдущем году. К основным чертам современного дизайна, привлекательного для пользователей, относятся простота в структуре, типографике, лаконичность и при этом яркость цветовых схем – одним словом, минимализм.
Использованы ли последние достижения веб-разработки на вашем сайте? Если нет, то самое время сделать редизайн или создать новый современный сайт с учетом актуальных тенденций.
