Главное Свежее Вакансии Образование
5 924 13 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Тренды веб-дизайна интернет-магазинов в 2017 году

Думаете как улучшить свой интернет-магазин в грядущем году? Отвечаем на этот животрепещущий вопрос.

В 2017 году, все ecommerce вебсайты будут в первую очередь делаться для мобильных телефонов. Дизайнеры могут начинать рисовать сайты сначала для телефона, а впоследствии их оптимизировать под ноутбуки и компьютеры. Также, мы можем ожидать, что возрастет влияние Material дизайна, который был сделан Google специально для мобильных устройств.

Вебдизайн работает следующим образом: авторитетные компании а-ля Google, Apple или Amazon создают новую концепцию дизайна и дизайнеры по всему миру начинают использовать ее для своих вебсайтов.

Поэтому когда мы описываем тренды дизайна для какого-то конкретного года, как 2017 например, мы на самом деле пытаемся описать текущее состояние вебдизайна и предположить какие его аспекты будут в дальнейшем прибавлять в важности.

В данном случае, самое главное изменение – это то, как дизайнеры будут начинать мыслить о вебсайте. Раньше, когда шел мыслительный процесс, дизайнеры представляли, как будет выглядеть их сайт на мониторе. Затем уже этот образ оптимизировался под мобильные устройства. Но в последнее время все изменилось.

1. Вебдизайн – мобильный дизайн

Дизайн интернет-магазинов эволюционировал. Если вы читали статью про дизайнерские тренды годами ранее, вы точно слышали упоминания об адаптивном дизайне.

Идея состояла в том, чтобы трансформировать ваш дизайн для компьютеров таким образом, чтобы он мог быть использован на телефонах. Спустя некоторое время, начались появляться статьи про так называемый mobile first дизайн. Дизайнеры начали помещать CSS для мобильных устройств выше в документе, но все еще думали категориями «дизайна для компьютеров».

2017 год – время перевернуть эту идею с ног на голову. Большая часть посетителей интернет-магазинов (и, возможно, покупателей) приходит с мобильных устройств. Это означает, что дизайн интернет-магазинов должен быть сделан ДЛЯ мобильных устройств, а потом уже оптимизирован под бОльшие экраны. Время думать и рисовать дизайны в мобильной форме.

Несколько примеров того, как этот тренд может задеть отображение интернет-магазинов на компьютерах:

  • Больше сайтов станут использовать скрытые (похожие на бургеры) меню. Это тренд, которому уже пара лет от роду и он продолжит расти в популярности.
  • Сайты будут использовать всю ширину экрана. Мобильные версии сайтов очень часто заполняют собой весь экран устройства, чего не сказать о версиях для компьютеров. Время использовать это и для больших экранов.

9Q4uDtgcAkimuY51MjtDp_xBfo5GZVHp5T6XO7AY

Обратите внимание, что на этой странице продукта, очень маленькие отступы слева и справа.Контент занимает практически весь экран. Это отличный пример мобильного дизайна, распространившегося на компьютеры.

  • Большие кнопки, картинки и иконки. Большие «дружелюбные пальцу» иконки из мобильного дизайна будут огромными на бОльших экранах.

2. Влияние Material дизайна растет

Google впервые показал Material дизайн на мобильных устройствах, использующих Android, в 2014 году. Material дизайн был способом Google, если не контролировать, то как минимум оказать влияние на дизайн мобильных приложения и интерфейсов для Android. Своеобразный способ брендировать Android.

Также, Material дизайн – интуитивно-понятный способ дизайнить мобильные приложения или интернет-магазины.

3Wa27pTwyE0LYQPS3V-Tj8uYMgEy-h69bG5d0FHP

Большая часть интернет-магазинов уже имплементировала отображение товаров в виде карточек, анимацию и плавные переходы. Все 3 вышеперечисленных пункта – то, вокруг чего крутится Material дизайн. И этот тренд только продолжится в 2017.

Все больше сайтов будут воплощать Material дизайн и заимствовать из него идеи, что приведет к увеличению его влияния в 2017 году.

3. Бесконечные прокрутки и загрузка «по пути»

Иногда, на мобильных устройствах имеет смысл (в разрезе времени загрузки страницы и производительности сайта) подгружать объекты по ходу движения пользователя, а не открывать совершенно новую страницу с новыми объектами.

Попробуйте взять это решение на вооружение. Просите своих дизайнеров делать страницы, которые можно скроллить и скроллить, и скроллить… По пути загружая объекты (или куски страницы).

Категории товаров в вашем интернет-магазине – отличный пример использования этого тренда. Допустим ваша страница сразу загружает 12 товаров, пользователь скролит (свайпает) вниз и по пути у него происходит подгрузке следующих трех, шести, двенадцати (как вам угодно) товаров. В итоге, покупатель может просмотреть сотни ваших товаров не покидая страницы.

4. Бургеры слева

Компактные меню – бургеры – маленькое изменение, по сравнению со всем остальным. Меню смещаются в левую часть. Если дизайнер использовал Bootstrap и следовал примеру «Bootstrap 3 Navbar» – велика вероятность, что дизайн, который он делал, имеет меню-бургер слева.

Куча сайтов и интернет-магазинов используют этот элемент. Но Google и другие ведущие сайты, стали ставить бургер-меню в левую часть экрана. Таким образом это одна из первых вещей, которую видит пользователь на странице.

V5hhQIR0Ympi_flcqnUqgAtzmC3dBitBAUhtTAC5

Гугл стал использовать меню-бургер в левой части в большинстве своих продуктов.

5. Анимированные войны или Возвращение GIF

Анимированные GIF картинки могут вернуться в 2017 году. Очевидно, в более спокойной форме, которая называется Cinemagraph.

Cinemagraph это обычная картинка или фотография, к которой добавлена маленькая, повторяющаяся анимация. Своеобразное, зацикленное мини-видео. Не так навязчиво как GIF, но достаточно, чтобы зацепить глаз покупателя.

Cinemagraph’ы могут быть использованы как фоновые картинки, заголовки категорий, рекламные баннеры на главной странице и даже в качестве фотографии на странице продукта.

Только время покажет, увеличивают ли конверсию cinemagraph’ы или наоборот они ужасны и вызывают отторжение.

VculZ0ZFRnRD4a2UC5uImyXFRb2Xo7wH9kPs4lPq

Anne Street Studio, студия фотографии из Нью-Йорка, знаменита созданием соблазнительных cinemagraph’ов.

Глубокая адаптивность и яркие цвета

Есть несколько других трендов в дизайне интернет-магазинов, которые можно было бы включить в эту статью, но тогда бы она получилась очень длинной. Напоследок, заострим внимание на двух.

Первое, глубокая адаптивность. В данный момент, интернет-магазины адаптируют контент к экрану пользователя. Вероятно, в ближайшее время начнется адаптация в другую сторону. Контент будет персонализироваться под нужды каждого пользователя, в зависимости от возраста, качества зрения, в какой руке они держат телефон и так далее.

Второе, вероятный бум ярких цветов. Последние несколько лет в дизайне доминировал минимализм, поэтому мы можем ожидать бума ярких цветов и их повсеместного использования. Например, Zara уже использует яркие цвета для фотографий своих товаров.

А что вы думаете про тренды 2017-го? Пишите в комментариях, давайте обсуждать.

Источник перевода

+8
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
SaloonCRM
система для управления клиентами салонов красоты и мастеров индустрии красоты.
asizintsev 9580
хорошая статья +1. действительно все элементы щас в тренде.
Ответить
Артем Кошкин
Было бы круто сделать что-нибудь с ситуацией когда при недогруженной странице ты кликаешь на одну ссылку, но действие клика происходит уже после догрузки, например, изображений, которые сдвигают контент вниз и клик, соответственно, происходит уже по совсем другой ссылке. Может у меня одного такая проблема в мобильном браузере от гугла, но жутко бесит..
Ответить
Openi.ru
Всероссийский сервис аренды недвижимости. Подбираем самый лучший вариант.
Жилкевич Евгений
Не у одного)) как минимум и я такой же))

По статье: спасибо за полезную статью. Особенно о синематогрфах...очень перспективно, мне кажется, попробовать внедрить очень ненавязчивая гифки...
Ответить
Kleo Pickman
Четвертое это глубже расписанное в первом пункте.
А так статейка неплохая.
Спасибо автор ;)
+ к карме
Ответить
Иван Петрович
Бесконечные прокрутки в магазинах? Да бросьте, не будет этого, ибо это неправильно. Уже давно написано где это можно применять, а где нет.
Ответить
Kleo Pickman
Посоветуй, пожалуйста, где конкретно прочесть это можно
Ответить
Иван Петрович
https://habrahabr.ru/post/304166/
https://habrahabr.ru/post/143887/
http://www.shopolog.ru/metodichka/design-and-usability/chto-rabotaet-luchshe-beskonechnyy-skroll-paginaciya-ili-knopka-zagruzki-kontenta/

В общем бесконечный скролл хорош там где есть бесконечная лента чего-то и обычно это лента соцсети. В остальных случаях на десктопах, скорее всего есть лучшее решение чем бесконечный скролл.
Ответить
Kleo Pickman
Спасибо, первая статья больше всего понравилась, весьма полезная информация, много для себя подчеркнула.
Ответить
Weissfl 44387
Еще бы хотелось увидеть подборку примеров реальных магазинов, со всеми этими трендами.
Ответить
Convead
Инструмент увеличения онлайн-продаж
Владимир 55288
Это можно организовать. Спасибо за идею :)

Постараемся в ближайшее время.
Ответить
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Alex Fill
Технологии построения страниц должны стать адаптивны не только сейчас счёт прошлых интересов пользователей, но и локальных показателей. Погода посетителя прохладная - вывод шарфика или платка, жутко холодно - пузовика. Предстоит путешествие - бронь отеля и билеты..
Ответить
Василь Кирилич
Вот как я внедрил бесконечный скроллинг. Сайт полностью статический, здесь нет ни одного скрипта, который виполнялся бы на стороне сервера.
http://www.kyrylych.tk
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.