Тенденции в веб-дизайне приходят и уходят. Одни задерживаются на чуть больший отрезок времени, другие трансформируются во что-то новое, третьи – исчезают навсегда.
Что же приготовил нам следующий год? Вывести основные тренды попыталась команда awwwards.com ..
Предупрежу сразу, что ожидать какой-то революции не стоит. Основные тенденции, которые задавали тон в 2015 году, будут продолжать господствовать.
Эволюция адаптивного дизайна
Всего несколько лет назад создание «отзывчивого» сайта было просто необходимо для работы на настольных компьютерах, планшетах и смартфонах. В то время как у каждой платформы есть свои уникальные проблемы, планшеты и смартфоны имеют очень знакомые системы взаимодействия, и основная проблема заключается в обеспечении того, чтобы контент был достаточного размера и легко ориентировался.
Плоский дизайн будет покорять каждый пиксель
Но, например, в смарт-часах, даже навигационная система должна быть тщательно переосмыслена, чтобы учесть, как мы используем устройство. Хотя некоторые утверждают, что существуют проблемы с плоской конструкцией в области пользовательских интерфейсов, общий консенсус в том, что он является благоприятным методом для веб-дизайна.
В последнее время мы наблюдали всплеск популярности адаптивного дизайна. И это было не простой прихотью дизайнеров – так сложились обстоятельства, нужно сделать все для того, чтобы сайт отображался оптимально на мобильных устройствах.
Другие тенденции плавно вытекают из этой, основной и наиболее важной. Давайте рассмотрим их подробнее.
Это все о том, как мы потребляем контент в Интернете, а также технологию обслуживания веб-страниц. Плоский дизайн имеет минималистские принципы, что, в свою очередь, приводит к плохим и несложным веб-сайтам, быстрым и ориентированным на контент. Это не только эстетическая привлекательность, но и очень практичная, позволяющая посетителям легко заниматься контентом, а также наслаждаться без отвлекающих эмоций.
Это не просто текст, который станет больше в Интернете: изображения тоже! Раньше существовали важные ограничения в отношении размеров изображений из-за ограниченной пропускной способности, но в наши дни это все меньше и меньше. В результате большие изображения захватили сеть.
Распространение UI шаблонов
Одним из побочных эффектов адаптивного дизайна является то, что все сайты становятся в чем-то похожими друг на друга. Но в этом виноват не только отзывчивый дизайн. К этому также приложили руку строительство сайтов на WordPress, и быстро разрастающийся рынок готовых шаблонов.
Но это не обязательно плохо. Хотя бы потому, что мы изменили способ использования Интернета, что привело к такой популярности шаблонов проектирования общего пользовательского интерфейса. Нет реальных оснований изобретать колесо. Шаблоны интерфейса должны дарить пользователям хороший опыт, быть простыми и понятными.
Увлекательные методы появятся для гибкого масштабирования, рисования доминирующих цветов для фона и оптимизации изображений все больше и больше. Размытые и цветные фильтры перекрытия позволят тексту «плавать сверху» без ущерба для удобства использования.
Эффекты в прокрутке и параллаксе
Использование прокрутки вместо нажатия в качестве успешного метода навигации. Во-первых, это требует меньшего времени загрузки страницы, и самое главное, что он упрощает создание плавных переходов из одной точки в другую без диссонирующих обновлений. Информация всегда течет.
Вот несколько моделей, с которыми вы должны быть знакомы:
- гамбургер-меню . Пусть многие критикуют этот шаблон, но широкое его применение делает функцию легко узнаваемой для пользователей.
- регистрация аккаунта сейчас проводится двумя путями: или с помощью кнопки регистрации, или через социальные сети. Эти два варианта удобны и понятны для пользователей, и уберегают их от лишних и запутанных действий.
Вы слышали разговоры в веб-графике?
Мы очень визуально, мы склонны лучше воспринимать информацию, когда видим ее графически, что привело к популярности инфографики. Мы создаем инфографику как простой способ переноса больших объемов информации с высокой степенью удержания. Подобно инфографике, веб-сайты передают большие объемы информации, но они включают элементы, которые позволяют пользователю взаимодействовать с информацией. Они визуально более привлекательны, чем инфографические, и значительно увеличивают внимание пользователя.
- бесконечный скроллинг . Размещение всех важных элементов в верхней части в настоящее время неактуально. Кроме того, почти все привыкли к скроллингу, благодаря мобильным устройствам. Техника работает особенно хорошо для сайтов, которые хотят заманить пользователей через истории, и вы все еще можете имитировать многостраничный сайт, деля страницу на зоны.
Вы можете ожидать, что это станет популярным и станет одним из основных компонентов современного веб-дизайна. Веб-тенденции приходят и уходят, но творческая изобретательность дизайнеров - это то, что стимулирует изменения в шаблонах веб-дизайна. Дизайнеры несут ответственность за превращение идей в тенденции и тенденции в шаблоны.
Тенденции дизайна, перечисленные здесь, быстро становятся обычным явлением в веб-дизайне, и в следующем году они получат еще большее признание. Но спокойно, мы не будем гасить квартиру. Давайте просто рассмотрим хорошие изменения, которые происходят с прошлого года и которые, как мы можем предсказать, будут представлены в этом году. Микроинтерминации - это тонкие анимации, которые каким-то образом взаимодействуют с пользователем.
- карточный дизайн . Появившись впервые на Pinterest, карточный шаблон мгновенно распространился по Интернету. Все благодаря тому, что карты позволяют быстро сканировать информацию и находить нужное. Каждая карта представляет собой единую концепцию. Такой дизайн позволяет намного легче организовать содержимое для оптимального отображения на разных устройствах.
Чтобы быть более ясным, микроинтерпретация работает как обратная связь от действия или задачи, которые вы только что сделали. Например: действие кнопки при нажатии, которое взаимодействует с разными движениями. Обратите внимание на то, что происходит, когда вы.
С возвращением к градиенту
Именно эти небольшие взаимодействия делают вашу навигацию и опыт более приятными и естественными. Да, градиент вернулся. Эпоха плоского дизайна заканчивается, и градиент снова появляется. В зависимости от того, как применяется градиент, он привлекает ваше внимание. Это часто бывает тонким для глаз. Стоит инвестировать в эту тенденцию.
- большие фоновые изображения . HD изображения являются одним из самых быстрых способов, чтобы захватить внимание пользователя. Благодаря достижениям в пропускной способности и сжатия данных, пользователи не будут страдать от медленной загрузки.
Это то, что было использовано крупными брендами, где минимализм находится на новом уровне. Это его часть: большие и запасные названия и более простые и универсальные иконки. Но не забывайте: создавайте минималистские проекты, но всегда задумывайтесь об удобстве работы с пользователем. Сокращение элементов не всегда является лучшим решением, все зависит от фактического претензий к каждому проекту.
Инновации в прокрутке и паралакс
Гиф был чем-то вроде 90-х, и считался липким в течение длительного времени. В наши дни это была лихорадка, особенно в социальных сетях, дающая нам новый способ выражения эмоций. Как говорится: «картина стоит тысячи слов». Эта функция представляет собой переосмысление навигации. То есть очень хорошо принятая и используемая техника в мобильных устройствах, которая имеет большой потенциал для привлечения пользователей, поскольку она помогает быстро поглощать больше контента без каких-либо перерывов.
Как видим, все те тенденции, которые мы могли наблюдать в течение прошлого года, остаются актуальными.
Богатая анимация
Анимация используется все больше и больше, и делает пользовательский опыт более интерактивным и интересным.
Параллакс - это метод, позволяющий перемещать передний план и фон на разных скоростях, создавая иллюзию глубины и погружения. Если применить правильно, он будет иметь красивый динамический и четкий вид. И он позволяет рассказать историю пользователю, используя только графику.
Противоречит всем методам проектирования, которые стремятся изобразить реальность на экране; тени, градиенты, рельефы, реалистичные текстуры остаются позади. И он ценит простоту, ясность макета, классическую эстетику и выражение «меньше - больше». Почему эта концепция функционирует?
Тем не менее, вы не можете просто применять ее в любом месте, где вам вздумается. Анимация должна служить определенным целям, а не просто быть украшением.
Анимацию можно рассматривать с точки зрения двух групп:
Крупномасштабные анимации . Они используются в качестве основного инструмента взаимодействия, имеют большое влияние на пользователей, и включают в себя эффекты, такие как параллакс-прокрутка и всплывающие уведомления.
Принципы плоского проектирования - это иерархия информации и элементов, что облегчает понимание взаимодействия с пользователем. Интерфейс планируется для функциональности, а не просто для красивого веб-сайта, поэтому сайты, использующие эту эстетику, получают положительную обратную связь, потому что они являются пользователями по-дружески.
Простые изображения передают сообщения быстрее и эффективнее, чем подробные иллюстрации. Значки и кнопки с сплошными цветами привлекают больше внимания и легче передают их смысл, не требуя дальнейших объяснений. Используйте элементы с простыми формами, такими как прямоугольники и круги, и жирным шрифтом для кнопок.
Мелкие анимации . Они включают в себя счетчики, ховер-инструменты и загрузочные бары, и не требуют каких-либо пользовательских манипуляций.
Мы опишем 7 самых популярных методов анимации:
- анимация загрузки . Она используется, чтобы скрасить время ожидания загрузки страницы. Как правило, популярна на страницах с плоским дизайном, выполненных в минималистском стиле, а также на одностраничниках.
Важно знать, как выбрать цветовую палитру, которая не оставляет макет и не создает контрастность, выделяя элементы действия, такие как кнопки покупки. В этой эстетике типография очень важна; они должны быть смелыми, чтобы выделяться, но в то же время простые, чистые и эффективные, гармонирующие с остальной частью макета. Типизация без засечек - хороший выбор, но шрифты с засечками могут быть опцией, если они хорошо используются.
В электронной торговле высококачественные изображения являются отличным дифференциалом и имеют чрезвычайно важное значение; привлекая внимание пользователя и помогая увеличить конверсию. Эстетическая простота плоской конструкции позволяет изображениям и кнопкам действия становиться известными, а не отвлекать внимание потребителя.
Делайте подобные вещи простыми, и не используйте дополнительно звук (хоть это и модно в последнее время). Помните, что эти детали должны соответствовать цветовой палитре и общему стилю вашего сайта.
- навигация и меню (НЕ скроллинг).
Хотя предпосылка «меньше», необходимо знать, как правильно использовать все эти элементы, поэтому рекомендуется помощь профессионалов, так как важно, чтобы макет привлекал потребителя и создавал отличный опыт покупок. Кроме того, чрезвычайно важно, чтобы вы знали свою целевую аудиторию, чтобы сайт соответствовал вашим потребностям.
Рассматривая тенденции и эволюцию самой отрасли, мы можем определить, какие функции будут присутствовать в Интернете с этого момента. Создание контента для Интернета - это сложная область, профессионалы, работающие с ней, должны постоянно обновляться. Технология шагает, и основные инновации и изменения поведения могут означать новые способы создания и публикации в Интернете.
Скрытое меню становится все более популярными, особенно в тех случаях, когда может быть использовано для сохранения места на экране.
- hover-анимации широко используются для создания обратной связи при наведении курсора мыши на объект.
- галереи и слайдшоу являются эффективным способом, чтобы продемонстрировать несколько изображений, не перегружая пользователей.
Большинство тенденций на будущее вытекают из потребностей настоящего момента. Мы видим, что использование смартфонов для преодоления использования обычных настольных компьютеров, популяризация интеллектуальных носимых устройств, виртуальная реальность, продвижение контент-маркетинга, все эти случаи создают новые потребности.
Ниже приводятся новые направления, которые должны развиваться в Интернете в будущем. Типография в Интернете - это нечто другое. Точно так же, как и любая типографика визуального веб-ресурса, также придется адаптироваться к новым используемым устройствам, тенденция заключается в том, что шрифты, созданные для Интернета, получают больше энергии и вентиляторов, поскольку они могут адаптироваться к разным размерам экрана и резолюции, а также изображения и векторы.
- анимация движения .
Наши глаза, естественно, обращаются к движению, что делает его идеальным инструментом для привлечения внимания пользователя. Движение также может помочь с визуальной иерархией, добавить интерес и интригу.
В отличие от того, как мы смотрим на печатные материалы, типография в Интернете должна следовать собственным правилам, следовать по другому пути, чтобы лучше использовать его на экране так же, как это уже сделано на бумаге. Концепция гибкого дизайна, адаптация страницы к смартфонам и планшетам должна приобретать большее значение. С появлением смарт-часов в Интернете вещей и других типов экранов и устройств дизайн должен будет адаптироваться не только по размеру экранов, но и к контексту использования.
Сайты должны адаптироваться к различным размерам и контекстам использования. Один и тот же продукт будет полезен в мобильном приложении или в часах, или в автомобиле, и каждый опыт использования будет рассмотрен по-другому. Он уже является тенденцией в мире дизайна интерфейса и должен набирать силу, поскольку это преимущество для обеих сторон, как дизайнеров, создающих, так и пользователей, которые обращаются к контенту. Плоский дизайн прост, адаптирован, облегчен и облегчает работу веб-сайта, в то время как он прост, не отвлекает читателя и визуально приятен.
- прокрутка . Гладкая прокрутка зависит от анимации и дает дополнительный контроль для пользователя, который может определить темп, с которым разворачивается содержимое сайта.
- фоновая анимация (видео). Простой анимированный фон можно добавить в дизайн сайта, но нужно использовать его в умеренных количествах, иначе это может очень отвлекать пользователя.
Сайт со всем изображением в фоновом режиме. С развитием Интернета и увеличением скорости соединения мы можем ожидать сайты, которые используют большие изображения высшего качества. Этот стиль будет очень похож на то, что мы уже видим в журналах и печатных материалах, которые не имеют ограничений, ограничивающих визуальные ресурсы, при этом эти ограничения исчезают, и мы сможем увидеть весь потенциал все более красивых и захватывающих макетов.
Сегодняшние пользователи более знакомы с способами навигации, например, на компьютере многие используют прокрутку мыши или трекпад для навигации по страницам, что позволяет создавать сайты, где контент сконцентрирован и динамически отображается, так как эффекты Параллакса.
Микровзаимодействия постоянно вокруг нас, начиная с выключения будильника на смартфоне утром.
Каждое из них сделано без задней мысли. Вполне вероятно, что вы начали свой день с микровзаимодействия. Отключив будильник на своем мобильном телефоне, вы занимаетесь с пользовательским интерфейсом всего один момент. И все больше и больше из них реализовываются в программах и устройствах, которые мы используем.
Микровзаимодействия должны происходить естественно и практически незаметно для пользователя. Они являются важной частью почти каждого цифрового дизайна. Вы практически не сможете создать веб-сайт или мобильное приложение, которое не включает в себя некоторый элемент, с которым пользователь должен взаимодействовать.
Материальный дизайн: богатая альтернатива плоскому дизайну
Целью материального дизайна является создание чистого, модернистский дизайна, который сосредоточится на UX.
С его минималистичным взглядом, материальный дизайн имеет много общего с другой растущей тенденцией - плоской конструкцией. Но он использует глубину и тень, что делает его более интересным и богатым.
До сих пор мы видели, что большинство «материальных» проектов ограничивается дизайном приложения. В следующем году материальный дизайн повсеместно будет применяться на сайтах.
Отзывчивый дизайн
Отзывчивый веб-дизайн стал невероятно популярным в последние годы, благодаря росту использования мобильного Интернета.
Можно с уверенностью сказать, что отзывчивый дизайн никуда не денется в ближайшее время, поскольку он представляет собой относительно простой и дешевый способ для бизнеса, чтобы построить полностью функциональный мобильный сайт.
Отзывчивый веб-дизайн отлично сотрудничает с карточными и плоскими конструкциями.
Плоский дизайн никуда не уходит
Плоский дизайн был популярен в последнее время, и прекрасно совместим с другими тенденциями, такими как минимализм, отзывчивый и материальный веб-дизайн.
Забегая вперед, можно предположить, что вполне вероятно, мы увидим следующие тенденции в плоской конструкции в 2016 году. На первый план выходят:
Длинные тени. Они приносят больше глубины плоским конструкциям.
Яркие цветовые схемы . Популярные шаблоны побудили многих дизайнеров начать использовать более яркие цвета в своих проектах.
Простая типография . Простые шрифты способствуют тому, что текст остается разборчивым и читаемым в плоском дизайне.
Призрачные кнопки . Они остаются функциональными, совершенно не нарушая общий стиль.
Минимализм позволяет создать лаконичный интерфейс и избавиться от всего лишнего.
Вместо итогов
Как видим, грядущий год не принесет нам практически ничего нового. Те же тенденции, которые мы наблюдали в течение нескольких последних лет, остаются актуальными. Возможно, мы сможем наблюдать некоторые новые формы – но основные тренды остаются такими же.
Хороший владелец сайта постоянно работает над его улучшением. В этой работе ему нужно опираться не только на анализ своей аудитории, данные веб-аналитики и отзывы клиентов, но и на тренды отрасли. Потому что в трендах есть много полезных вещей, способных улучшить взаимодействие клиентов с сайтом. Но тренды нужно применять аккуратно, с умом. Выбирать только те, что подходят для решения текущих проблем сайта и для развития бизнеса.
Поэтому в данной статье мы не просто привели список тенденций веб-дизайна, но и составили рекомендации по применению этих трендов на вашем сайте.
1. Юзабилити станет товаром
Пример улучшения юзабилити сайта http://www.telemirspb.ru/
Следование базовым принципам юзабилити помогает сайтам привлекать больше клиентов и снижать количество звонков в службу поддержки. Все больше компаний предлагают аудиты сайтов, так как есть спрос на поиск ошибок на сайте. Привычка делать покупки, заказывать услуги через Интернет увеличивает спрос на удобные сайты.
Увы, многие создают сайты сами, а потом с созданным безобразием приходят к нам. Важно продумать процесс взаимодействия с ресурсом заранее: какие разделы будут в первой версии, а какие будут добавлены позже. Все предусмотреть невозможно, но заранее спланированная навигация сэкономит время и деньги на доработки в будущем. Также тщательно выбирайте движок для сайта. Не стоит выбирать блоговый движок (к примеру, WordPress), если вы планируете продавать что-то на сайте, делать страницы товаров/услуг.
Если вы работаете в высококонкурентной среде, то понимаете как важно отличаться от конкурентов.
Именно поэтому при планировании создания сайта или улучшения существующего в первую очередь необходимо взглянуть на интерфейс глазами клиента, попробовать предугадать проблемы, которые могут возникнуть у пользователя.
2. Исчезнут длинные тексты
Будем честны с собой: длинные тексты никто не читает. Исключения составляют книги и статьи. Когда клиент хочет заказать какую-нибудь услугу или товар, то его интересует конкретная информация: цена, основные характеристики продукта/содержимое услуги, условия доставки/срок выполнения. Краткая и структурированная информация экономит время клиенту и располагает к заказу. Тем более если клиент сравнивает несколько сайтов, то наиболее лаконичное описание определенно выиграет.
Также длинные тексты неудобно просматривать с мобильных устройств, которые использует уже почти каждый. По результатам мировой статистики, в октябре 2016 года количество мобильных пользователей стало больше, чем десктопных.
Посмотрите аудиторию вашего сайта, например, в Яндекс.Метрике в отчете Сводка → Тип устройства и увидите, какой процент клиентов заходит с телефонов и планшетов. Не забывайте об этой аудитории при размещении контента.
Добавляйте анимацию на сайт с умом. Она должна быть максимально аккуратной и быстрой. Увеличение изображения при клике по нему, индикаторы прогресса во время ожидания результатов на сайте, возникновение всплывающего окна при добавлении товара в корзину, смена цвета кнопок и ссылок после нажатия - наиболее распространенные микровзаимодействия, которые точно будут помогать вашим пользователям.
6. Использование синемаграфий или «живых» изображений
На смену широкоформатным видео пришли синемаграфии - изображения, на которых движется лишь один элемент. Лучше всего размещать их в первом экране страницы, чтобы привлечь внимание пользователя и вызвать вау-эффект.
Если подобрать такую гифку под тематику сайта, то выглядеть будет очень круто. Например, можно сделать «живую» фотографию вашего основного продукта и разместить ее на Главной странице или на баннерах с акциями.
В России синемаграфию в основном используют в соцсетях, поэтому приводим примеры иностранных сайтов - сайт защиты воды и аренды автомобилей .
7. Отказ от «типичных» стоковых фотографий
Надеемся, что с сайтов исчезнут всевозможные человечки, девушки в наушниках и фотографии улыбающихся семей. Пример стоковых картинок:
9. Мобильные устройства в первую очередь (Mobile First)
Суть данного подхода в том, что при проектировании сайта необходимо подумать, как он будет отображаться на мобильных устройствах. На эту тему написано много статей и книг, например, советуем почитать Люка Вроблески «Сначала мобильные» .
Как уже говорилось выше (см. пункт 2), мобильный трафик растет и даже появляются пользователи, которые не имеют десктопного опыта. Именно поэтому, чтобы не терять клиентов, рекомендуем оптимизировать сайты для мобильных.
В статье перечислены только самые основные тренды. Посмотрим, что нас ожидает в этом году. Если вы тоже заметили какие-то тенденции и уверены, что они будут развиваться, пишите в комментариях, с радостью обсудим. А если сомневаетесь, что дизайн вашего сайта актуален или прочитали статью и нашли устаревшие элементы - обратите внимание на услугу редизайн .
Понравилась статья?
Да 178 Нет 16
Спасибо, мы старались!
Вашим друзьям тоже понравится. Делитесь: