- 24.10.2018
- Павел Морозов
С каждым годом интернет-технологии развиваются всё быстрее и быстрее. Но, пока мы успеваем следить за трендами, хотелось бы рассказать, что может войти в моду в 2017 году, а что уже давно используется, но претерпело некоторые изменения.
Новое – хорошо забытое старое?
Интерфейс сайта в какой-то степени можно сравнить с обложкой книги. Если читатель не знаком с именем автора и названием произведения, то дизайн в стиле Донцовой точно не заставит его взять издание и пролистать его. Так же и с сайтами – дизайнерские решения, словно маленькие крючки, цепляют наше внимание, заставляя проводить на ресурсе как можно больше времени и кликать на необычные элементы. Можете назвать это излишками, но мы назовем это хорошими идеями. Мы приготовили для вас небольшую подборку прогнозов на этот год.
Абстрактный интерфейс.
Страница со стандартным построением в виде сетки зачастую и работает как «сеть», которая сковывает полет мысли дизайнера. Так и рождаются «копипастовые» сайты, в которых меняются только названия элементов и цветовая гамма. Но находятся всё же светлые умы, которые ломают эту систему и вносят, как глоток воздуха, новые решения.
Используя невообразимое количество возможностей, можно создавать поистине нестандартные страницы, которые и страницами сложно назвать. Разработчики и дизайнеры превращают их в настоящие интерактивные пространства, где мы чувствуем себя словно в галерее, а иконки и элементы превращаются в экспонаты.
Смелая навигация.
<href=»http://maym.ru/wp-content/uploads/2017/04/2_navigacija-mini.gif» >Почему смелая? А потому, что пользователь самостоятельно знакомится с новым для него решением и отправляется в настоящее путешествие по сайту. Игра цвета, форм и глубины в меню – это приятный эксперимент. Мысля не только в пределах осей X и Y дизайнеры создают объем пространства.
Популярность набирают не очевидные варианты прокрутки страницы, в которых используются различные выплывающие элементы меню. Таким образом у владельца сайта появляется уникальная возможность разместить все необходимые навигационные элементы на одной странице. Единственным минусом может оказаться то, с чего мы собственно и начали – это смелая навигация и не каждый пользователь сможет самостоятельно освоить такое решение.
Карточный дизайн.
<href=»http://maym.ru/wp-content/uploads/2017/04/3_kartochki-mini.gif» >На первый взгляд, тут всё предельно понятно – такое решение использует большое количество ресурсов, в том числе и Facebook, Netflix и многие др. Но в течение предстоящего года мнение по этому поводу может кардинально измениться. Во-первых, благодаря карточкам информация на ресурсах прекрасно зонирована и систематизирована. Во-вторых, благодаря такому решению всё внимание пользователя невольно останавливается на необходимых элементах.
Поэтому такой результативный вариант интерфейса вряд ли куда-то исчезнет. Главная задача разработчиков – извлечь из него что-то новое, сохранив привычную эффективность, и у многих это выходит настолько хорошо, что рядовому пользователю разглядеть стандартные карточки в этом практически невозможно.
Сплит-макеты и разбивка страницы на две части.
<href=»http://maym.ru/wp-content/uploads/2017/04/4_split_maket-mini.gif» >Набрав ощутимую популярность в прошедшем году, данный метод, скорее всего, претерпит некоторые преобразования в этом году. Такие макеты уже во всю используются на лендингах, личных блогах и страницах творческих людей. Выигрышно сплит-макеты смотрятся в минималистичном решении, с изображениями высокого разрешения и большими заголовками.
Используя метод деления страницы на две части, мы словно ставим пользователя перед вполне естественным выбором, но в то же время акцентируем внимание на обоих элементах. Но здесь легко совершить ошибку – прогадать с сочетанием шрифтов и цветов, неправильно расставить визуальные акценты. Необходимо воспринимать оба элемента как одно целое.
Большая типографика.
<href=»http://maym.ru/wp-content/uploads/2017/04/5_bolshaja_tipographika-mini.gif» >Цвет и типографика – сами себе и элементы меню, и навигация, и информационные источники, поэтому трудно не учитывать их значение. Множество сайтов построено только на этом решении и смотрятся они просто великолепно. Почему так происходит? Просто представьте себе газету, в которой заголовки играют самую важную роль в привлечении внимания читателя. Так же происходит и со страницей.
Отсутствие различных отвлекающих факторов, таких как всплывающие окна, формы обратной связи и т.п. заменили крупным текстом, который словно указатель ведет взгляд пользователя от одной порции информации к другой. Собственно, ничего больше не нужно, если вы хотите познакомить посетителя с чем-то, или продать ему товар, услугу.
Градиенты и сочные цветовые решения.
<href=»http://maym.ru/wp-content/uploads/2017/04/6_yarkije_cveta-mini.gif» >Популярность плоского дизайна оставила свой отпечаток на многих стилевых решениях, но всё же с плоскостью нужно быть предельно аккуратным, иначе это может привести к невыразительности ресурса. На помощь приходят эксперименты с палитрой ярких цветов и градиентных переходов. Перекочевав со страниц интернет-сайтов, этот метод переместился и в мобильные приложения.
Градиентные переходы можно накладывать не только на фоновую часть, но и на изображения, добавляя тем самым ощутимую глубину и динамику. Не секрет, что цвета ещё и подчеркивают, главное сочетать их правильно и в пределах тематики ресурса. В интерфейсе деловых источников не стоит прибегать к ребячеству, что работает и в обратную сторону.
Анимация и элементы интерактива.
<href=»http://maym.ru/wp-content/uploads/2017/04/7_animacija-mini.gif» >Помимо особого стиля, выделяющего площадку в сети на фоне других, этот метод ещё и добавляет значительный вес сайту. Не стоит забывать, что огромная доля пользователей путешествует по сети с мобильных устройств, а при медленном интернете люди даже не будут ждать открытия страницы, не говоря уже от том, если она не адаптирована под устройство.
Сам по себе этот метод далеко не новый, но дизайнеры постоянно улучшают его и находят просторы для его применения. Небольшие интерактивные фрагменты меню могут оживить сайт, сделать его действительно интересным и уникальным. При макро-взаимодействии с интерфейсом пользователь может поиграть с какими-нибудь деталями, что повысит его лояльность и увеличит время пребывания на сайте.
Parallax.
<href=»http://maym.ru/wp-content/uploads/2017/04/8_parallaks-mini.gif» >Нет ничего страшного в этом названии, ведь все уже давно знакомы с этим приемом. Параллакс представляет собой несколько слоев фона, элементов и заголовков, которые движутся с разной скоростью. Причем часто скорость прокрутки можно контролировать. Это добавляет ощутимую динамику и глубину в картинку, особенно при смене цветов и направлений.
Предстоящий год обещает нам ещё большее количество слоев, разные направления движений (не только по горизонтали и по вертикали) и интересные эффекты. Если переборщить с использованием метода Параллакса, то вы отвлечете пользователя от информации, которую пытаетесь донести до него, ведь фон на сайте – это далеко не самое главное, за чем приходит посетитель.
Виртуальная реальность.
<href=»http://maym.ru/wp-content/uploads/2017/04/9_virtualnaja_real-mini.gif» >Пусть VR уже почти пережил пик своей популярности в виде очков для компьютерных игр и кинофильмов, это не могло не повлиять на web-дизайнеров, поэтому интернет-площадку стиль виртуальной реальности ещё только перебирается и, скорее всего, планирует там основательно укрепиться.
С помощью подобного эффекта присутствия пользователь посещает не только сайт какого-либо бренда, но и само здание компании. Можно погулять по коридорам, кабинетам и даже использовать детали интерьера в качестве элементов навигации по меню. Панорамные видеозаписи, фотографии в формате 360° превращают страницы во что-то непривычное и совсем новое.
Естественный дизайн.
<href=»http://maym.ru/wp-content/uploads/2017/04/10_estestvennyj-mini.gif» >Плоские и безликие страницы, инфографика и пр. устаревшие решения превращают сайты в пережитки прошлого. На повестке дня текстурные детали, объемные модели, качественные фотографии и приятные пастельные тона. Пользователи чувствуют себя уютно на таких площадках, им словно бы хочется прикоснуться к деталям фона, ощутить их натуральность, жизнь.
Натуральные текстуры лишь усиливают этот эффект. Часто подобные страницы можно увидеть у всевозможных творческих площадок, интерактивных выставок, лофтов, интернет-магазинов фермерских продуктов и т.п. Как мы можем заметить, иногда совсем не нужно добавлять что-то ультра современное, чтобы привлечь свою аудиторию и заинтересовать её.
Свежие идеи в союзе с юзабилити
Конечно, всё зависит от вида деятельности, которому требуется представительство в интернете. Но нелишним будет следить за тенденциями в мире IT, чтобы вовремя генерировать интересные идеи и внедрять их для своих проектов.
Самое главное, не забывайте – интернет-сайты делаются для пользователей, поэтому они должны быть понятны и удобны, а так же максимально адаптированы под современные устройства. Поэтому откладывайте в «копилку» самые яркие идеи, но их реализацию лучше всего обсуждать с профессиональными дизайнерами.