Вы когда-нибудь замечали, как определенный элемент дизайна продолжает появляться вновь и вновь? И иногда даже мелкие, несущественные детали становятся индикаторами тенденции дизайна. Особенно это было заметно в этом месяце. Каждая из тенденций, рассматриваемая нами в обзоре усиливает визуальную составляющую для пользователей.
Итак, что же было в тренде в этом месяце.
1) Белые кромки
Много веб-дизайнов используют белые края или обрамление по периметру веб-браузера. Это новый поворот к старой идее, когда большинство сайтов были разработаны в определенных размерах и использовали кадрирование для разрозненной ширины браузеров.
Эта тенденция была несколько утрачена, когда большинство дизайнеров выбрали отзывчивые конструкции для веб-сайтов.
Новый поворот с обрамлением интересен как хороший способ создания холста для дизайна. Большинство сайтов, использующих эту тенденцию включают в основном белый (но не обязательно) край вокруг дизайн-конструкции. Эти края в несколько пикселей в ширину, обычно помещают вокруг трех (некоторые дизайнеры предпочитают не делать рамку в нижней части конструкции для поощрения скроллинга) или четырех сторон макета.
Особо приятным в этой тенденции является то, что чистые белые линии помогают привлечь внимание к выбору основного цвета, увести глаза от края экрана к другим элементам (например, текстовым призывам к действию). Также окантовка помогает создать фон для параллакс-прокрутки и других анимированных эффектов.
Camden Town Brewery делает это просто исключительно. Белая рамка заполняет пространство между элементами дизайна, создавая глубину и фокус для пользователя. Белые части отделяют на экране каждый новый раздел с контентом и вносят свой вклад в общую организацию дизайна. Кроме того, белые акценты помогают дизайну выглядеть не слишком подавляющим, несмотря на сильную красно-черную палитру.
2) Синемаграфия
Синемаграф — фотография с незначительными повторяющимися движениями. Это может быть что угодно — от фотографии человека, который моргает глазами, до тонких движений облаков в неподвижном небе. В то время как наиболее распространенные виды использования этого тренда по-прежнему представлены в рекламе и социальных медиа, веб-дизайнеры также начинают включать технику «живой» фотографии в свои проекты.
Это работает, потому что пользователей интригуют движения. Эта техника эффективна, так же, как и видео, и является хорошим вариантом привлечения внимания. Движение и действие — это интересно и выглядит реалистично.
Бонус от использования синемаграфии — то, что, в отличие от видеопроекта, можно создать дизайн с движением без потери производительности.
Фокус техники в том, чтобы сделать работу синемаграфии приближенной к действительности. Даже если сцена воображаема, законы физики все-таки должны применяться к движению на экране. Вода должна течь по течению, движущиеся предметы подчиняться силе тяжести.
Движение также должно быть простым и тонким. Стоит хоть немного перебрать с этим — и сразу же возникает чувство, что в этом месте лучше было использовать видео. Пользователей привлекает в синемаграфии элемент неожиданности. На первый взгляд обычная фотография героя, но на самом деле с ним что-то еще происходит. Этот маленький прикол способен привлечь внимание людей и удерживать их на сайте довольно долго, что в результате приводит к повышению конверсии.
3) Мелкие анимации загрузки
Время загрузки очень важно в веб-дизайне. Но вы не всегда можете рассчитать скорость сети пользователя, и мелкие анимации загрузки очень помогают дизайнеру.
В этом тренде элементы иногда являются частью дизайна, иногда — нет. В любом случае, решив использовать этот тренд, разработчики предприняли особую осторожность, чтобы гарантировать каждому пользователю положительный опыт использования сайта.
Мелкие анимации представляют собой простые элементы, которые привлекают ваше внимание на несколько секунд, пока основной дизайн сайта окончательно загружается.
Самое крутое в этой тенденции то, что эти крошечные загрузки-анимации действительно крошечные, занимающие очень маленькую часть экрана, но наблюдать за ними абсолютно восхитительно.
Вот три классных примера этого тренда:
Анимация загрузки сайта Hannah Purmort – это одна движущаяся линия, выполненная в контрастном к основному фону экрана цвете. Также, она передает эффект прокрутки.
Susa Ventures в качестве анимации загрузки использует маленький значок с небольшим набором движений. Но тем не менее, он захватывает все ваше внимание, потому что крошечная горилла — визуально интересный элемент, который вызывает любопытство у пользователя, заставляя его ожидать появления полного контента сайта.
FPG использует эскиз, который, как потом становится понятным, будет присутствовать на полной версии домашней страницы. Эффект бесшовных линий длится довольно долго, и пользователь даже не сразу понимает, когда страница окончательно загружена.
И в заключение…
Мелкие детали находятся в сердце каждого хорошего дизайна. Важно помнить, что их проработка имеет важное значение. Каждая из рассмотренных тенденций соединяет элементы проекта, хотя и не является очевидной частью общей эстетики веб-сайта. Эти крошечные элементы цепляют пользователя и могут стать источником восторга, который испытывают люди, посещая ваши сайты. Детали могут быть дифференцирующими между успехом и провалом. Если вам нравятся (или не нравятся) эти тенденции, дайте знать в комментариях.
Источник: https://www.creativebloq.com/features/5-big-graphic-design-trends-of-2016
Давайте создадим что-нибудь крутое вместе!
