Тренды веб-дизайна интернет-магазинов в 2017 году
В 2017 году, все ecommerce вебсайты будут в первую очередь делаться для мобильных телефонов. Дизайнеры могут начинать рисовать сайты сначала для телефона, а впоследствии их оптимизировать под ноутбуки и компьютеры. Также, мы можем ожидать, что возрастет влияние Material дизайна, который был сделан Google специально для мобильных устройств.
Вебдизайн работает следующим образом: авторитетные компании а-ля Google, Apple или Amazon создают новую концепцию дизайна и дизайнеры по всему миру начинают использовать ее для своих вебсайтов.
Поэтому когда мы описываем тренды дизайна для какого-то конкретного года, как 2017 например, мы на самом деле пытаемся описать текущее состояние вебдизайна и предположить какие его аспекты будут в дальнейшем прибавлять в важности.
В данном случае, самое главное изменение – это то, как дизайнеры будут начинать мыслить о вебсайте. Раньше, когда шел мыслительный процесс, дизайнеры представляли, как будет выглядеть их сайт на мониторе. Затем уже этот образ оптимизировался под мобильные устройства. Но в последнее время все изменилось.
1. Вебдизайн – мобильный дизайн
Дизайн интернет-магазинов эволюционировал. Если вы читали статью про дизайнерские тренды годами ранее, вы точно слышали упоминания об адаптивном дизайне.
Идея состояла в том, чтобы трансформировать ваш дизайн для компьютеров таким образом, чтобы он мог быть использован на телефонах. Спустя некоторое время, начались появляться статьи про так называемый mobile first дизайн. Дизайнеры начали помещать CSS для мобильных устройств выше в документе, но все еще думали категориями дизайна для компьютеров.
2017 год – время перевернуть эту идею с ног на голову. Большая часть посетителей интернет-магазинов (и, возможно, покупателей) приходит с мобильных устройств. Это означает, что дизайн интернет-магазинов должен быть сделан ДЛЯ мобильных устройств, а потом уже оптимизирован под бОльшие экраны. Время думать и рисовать дизайны в мобильной форме.
Несколько примеров того, как этот тренд может задеть отображение интернет-магазинов на компьютерах:
- Больше сайтов станут использовать скрытые (похожие на бургеры) меню. Это тренд, которому уже пара лет от роду и он продолжит расти в популярности.
- Сайты будут использовать всю ширину экрана. Мобильные версии сайтов очень часто заполняют собой весь экран устройства, чего не сказать о версиях для компьютеров. Время использовать это и для больших экранов.
Обратите внимание, что на этой странице продукта, очень маленькие отступы слева и справа.Контент занимает практически весь экран. Это отличный пример мобильного дизайна, распространившегося на компьютеры.
- Большие кнопки, картинки и иконки. Большие дружелюбные пальцу иконки из мобильного дизайна будут огромными на бОльших экранах.
2. Влияние Material дизайна растет
Google впервые показал Material дизайн на мобильных устройствах, использующих Android, в 2014 году. Material дизайн был способом Google, если не контролировать, то как минимум оказать влияние на дизайн мобильных приложения и интерфейсов для Android. Своеобразный способ брендировать Android.
Также, Material дизайн – интуитивно-понятный способ дизайнить мобильные приложения или интернет-магазины.
Большая часть интернет-магазинов уже имплементировала отображение товаров в виде карточек, анимацию и плавные переходы. Все 3 вышеперечисленных пункта – то, вокруг чего крутится Material дизайн. И этот тренд только продолжится в 2017.
Все больше сайтов будут воплощать Material дизайн и заимствовать из него идеи, что приведет к увеличению его влияния в 2017 году.
3. Бесконечные прокрутки и загрузка по пути
Иногда, на мобильных устройствах имеет смысл (в разрезе времени загрузки страницы и производительности сайта) подгружать объекты по ходу движения пользователя, а не открывать совершенно новую страницу с новыми объектами.
Попробуйте взять это решение на вооружение. Просите своих дизайнеров делать страницы, которые можно скроллить и скроллить, и скроллить… По пути загружая объекты (или куски страницы).
Категории товаров в вашем интернет-магазине – отличный пример использования этого тренда. Допустим ваша страница сразу загружает 12 товаров, пользователь скролит (свайпает) вниз и по пути у него происходит подгрузке следующих трех, шести, двенадцати (как вам угодно) товаров. В итоге, покупатель может просмотреть сотни ваших товаров не покидая страницы.
4. Бургеры слева
Компактные меню – бургеры – маленькое изменение, по сравнению со всем остальным. Меню смещаются в левую часть. Если дизайнер использовал Bootstrap и следовал примеру Bootstrap 3 Navbar – велика вероятность, что дизайн, который он делал, имеет меню-бургер слева.
Куча сайтов и интернет-магазинов используют этот элемент. Но Google и другие ведущие сайты, стали ставить бургер-меню в левую часть экрана. Таким образом это одна из первых вещей, которую видит пользователь на странице.
Гугл стал использовать меню-бургер в левой части в большинстве своих продуктов.
5. Анимированные войны или Возвращение GIF
Анимированные GIF картинки могут вернуться в 2017 году. Очевидно, в более спокойной форме, которая называется Cinemagraph.
Cinemagraph это обычная картинка или фотография, к которой добавлена маленькая, повторяющаяся анимация. Своеобразное, зацикленное мини-видео. Не так навязчиво как GIF, но достаточно, чтобы зацепить глаз покупателя.
Cinemagraph’ы могут быть использованы как фоновые картинки, заголовки категорий, рекламные баннеры на главной странице и даже в качестве фотографии на странице продукта.
Только время покажет, увеличивают ли конверсию cinemagraph’ы или наоборот они ужасны и вызывают отторжение.
Anne Street Studio, студия фотографии из Нью-Йорка, знаменита созданием соблазнительных cinemagraph’ов.
Глубокая адаптивность и яркие цвета
Есть несколько других трендов в дизайне интернет-магазинов, которые можно было бы включить в эту статью, но тогда бы она получилась очень длинной. Напоследок, заострим внимание на двух.
Первое, глубокая адаптивность. В данный момент, интернет-магазины адаптируют контент к экрану пользователя. Вероятно, в ближайшее время начнется адаптация в другую сторону. Контент будет персонализироваться под нужды каждого пользователя, в зависимости от возраста, качества зрения, в какой руке они держат телефон и так далее.
Второе, вероятный бум ярких цветов. Последние несколько лет в дизайне доминировал минимализм, поэтому мы можем ожидать бума ярких цветов и их повсеместного использования. Например, Zara уже использует яркие цвета для фотографий своих товаров.
А что вы думаете про тренды 2017-го? Пишите в комментариях, давайте обсуждать.