Дизайн интернет-магазина: базовые настройки и советы

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

• Выбор шаблона

• Логотип

• Баннеры

• Шапка сайта

• Изображения

• Мобильная версия

Выбор шаблона

Чтобы предпринимателю не создавать дизайн-проект с нуля на Адвантшоп существуют шаблоны. Каждый из них можно настраивать под себя: менять цвета, оформление и шрифты. Главное преимущество шаблонов — все пользовательские «фишки», которые делают сайт интуитивно понятным и удобным для использования, уже заложены в них. 

На Адвантшоп шаблоны делятся на платные и бесплатные. Доступ ко всем функциям платформы сохраняется в любом варианте, основное различие платного от бесплатного — уникальные дизайнерские решения. К примеру, на шаблоне Sushi переход по категориям происходит на главной странице. Это позволяет сайту работать в режиме лендинга. 

Функция перехода по категориям на шаблоне Sushi

Шаблоны универсальны для любых ниш за счет гибкой настройки. Однако некоторые варианты имеют дизайнерские функции, которые эффективнее работают в определенных сферах. Например, шаблон Yes-2000 отлично подойдет для продажи запчастей и стройматериалов, благодаря небольшому формату фотографий и подробному текстовому описанию. Таким образом, пользователь быстрее найдет необходимое среди визуально похожих товаров. 

Может быть интересно: Как цвета влияют на продажи в интернет-магазине

Магазин шаблонов

Логотип

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

Как создать?

Для создания логотипа существуют следующие способы: 

• Заказ. Проверенный способ создания логотипа — заказать его у дизайнера. Самое главное составить грамотное и подробное техническое задание и выбрать специалиста с хорошим портфолио.

• Генерация. Есть как платные, так и бесплатные программы генерации логотипов нейросетями. Преимуществом этого способа являются минимальные затраты на создание, однако есть и серьезный минус — нейросеть может выдать вам не подходящий результат, генерацию придется проводить снова и снова. 

• Самостоятельно. Если есть навыки, время и ресурсы, то можно создать логотип самостоятельно. Таким образом можно передать именно тот стиль, имидж и смысл бренда, который вы хотите.

• Текст. На Адвантшоп можно создать быстрый текстовый логотип, вписав название магазина и настроив цвет и шрифты. 

Процесс создания текстового логотипа

Как должен выглядеть?

При разработке логотипа важно совместить три свойства: 

• Легкость. Простые образы запоминаются легче, чем сложные структуры.

• Ассоциативность. Логотип должен быть связан с услугами или товарами, которые продает компания.

• Цветовой минимализм. Рекомендуем использовать не более 3 цветов, иначе логотип может раздражать пользователя.

Эти три свойства будут обеспечивать логотипу самое главное — запоминаемость.

Какой размер?

Чтобы логотип отображался в хорошем качестве на разных типах устройств, следуйте рекомендациям по размерам. Обычно они составляют 200x100px, в Адвантшоп — 200x50px.

Баннеры

Баннеры — это изображения на сайте, которые привлекают внимание к товарам, акциям, условиям доставки и сервиса. Они побуждают пользователей к целевому действию: переход на сайт, оформление заявки, использование промокода и др. Советами по созданию баннеров поделится дизайнер Адвантшоп, Виталий Паскарь.

Пример баннеров

• Правило акцентов. Чтобы сочетание цветов было комфортным для пользователя, стоит знать про принцип «60-30-10». 60% — доминанта, основной цвет или фон, 30% — цвет крупных объектов, 10% — акценты, например, заголовки.

• Максимум 2 шрифта. Разнообразие шрифтов на баннере может запутать потребителя. Из-за этого он может проигнорировать информацию в объявлении.

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

• Выравнивание объектов. Людям, которые пишут слева направо, удобнее воспринимать информацию, выровненную по левому краю.

Шапка сайта

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

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

Читайте также:  5 ошибок в юзабилити, которые убивают продажи интернет-магазина

Изображения

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

Допустимые разрешения изображений на Адвантшоп

Для изображений в формате «Карусели» существуют свои лимиты: 

• Для компьютерной версии: одна колонка — 1160х553 px, две колонки — 865х400 px. 

• Для мобильной версии: 375х150 px. 

Результат выгрузки изображений с разным соотношением сторон

Также следите за весом файла. Из-за большого веса файла изображения сайт начнет работать медленнее. Скорость загрузки страниц напрямую влияет на SEO-индекс интернет-магазина. 

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

Мобильная версия

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

Заключение

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