Продающий дизайн сайта: разбираемся с правилами и приемами

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

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

Важность продающего дизайна сайта

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

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

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

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

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

Формула AIDA в продающем дизайне

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

1. A (attention) – внимание. Нужно привлечь внимание пользователей, чтобы они посетили ваш сайт.

2. I (interest) – интерес. Чтобы человек совершил покупку или подписался, сначала он должен заинтересоваться вашим магазином, а не просто посмотреть на него и выйти.

3. D (desire) – желание. Ваш потенциальный клиент должен захотеть сделать покупку, оформить подписку или оставить заявку на обслуживание.

4. A (action) – действие. Собственно, такое, которое вам нужно, — подписка, приобретение какого-либо товара, заявка. Чтобы посетитель вашего сайта с наибольшей вероятностью совершил это действие, желательно выстроить схему так, чтобы переход от одного этапа к другому совершался быстро.

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

Если дальше ничто не заставило его потерять интерес: сайт быстро грузится, контент внушает доверие, — пользователь будет двигаться дальше по формуле AIDA.

Возможно, вы спросите: «Что нужно сделать, чтобы вызвать желание купить товар или услугу?» Для этого понадобится сначала товар или услугу привлекательно презентовать: грамотно преподнести информацию, выгодно представить характеристики, нестандартно оформить ваше предложение, указать приятную цену.

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

5 китов продающего дизайна

Подробнее остановимся на ключевых моментах, которые делают дизайн сайта продающим.

Минимализм

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

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

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

Спросите себя:

1. Какой именно элемент сайта должен самым первым заинтересовать потенциального покупателя?

2. Как выделить ключевые моменты и привлечь к ним внимание?

3. С какого блока пользователь начнет и чем завершит?

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

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

Не размещайте ненужную информацию, не вынуждайте клиента к лишним действиям, и ваши шансы на то, что он оформит покупку, вырастут.

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

Правило «золотого сечения»

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

Чтобы понять секрет удачной композиции, вспомните о знаменитом принципе «золотого сечения» и о правиле третей, которое является его упрощенным вариантом. Их всегда соблюдают успешные компании при разработке дизайна сайтов и логотипов, даже в том случае, если проповедуют минимализм.

«Золотым сечением» называют соотношение величин a и b, при котором большая величина относится к меньшей так же, как сумма величин к большей.

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

Помните знаменитый логотип Apple в виде яблока? Его пропорции подобраны именно по принципу «золотого сечения». Поэтому он нравится огромному количеству людей.

Что касается правила третей, его суть в том, что изображение делится на 9 частей четырьмя равноудаленными линиями. Оно более часто встречается в практическом применении, чем «золотое сечение», так как проще.

При использовании правила третей самые важные детали изображения помещают или вдоль линий, или там, где они пересекаются, в так называемых «точках силы».

Как именно применить это правило для продающего дизайна сайта? Вам поможет фотошоп: выберите соответствующую сетку в настройках кадрирования.

Согласованность работы дизайнера и копирайтера

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

Чтобы текст и картинка были созвучны друг с другом, дизайнер и копирайтер должны работать в тесном взаимодействии. Не случайно многие успешные рекламисты совмещали оба навыка. Так, один из самых известных и профессиональных американских копирайтеров Джозеф Шугерман также был фотографом и дизайнером-графиком.

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

1. Копирайтер использовал фразу: «С нами вы сможете расслабиться и успокоиться…». Дизайнер поставил рядом ярко-красную плашку. Известно, что именно этот цвет наше подсознание расценивает как предупреждение об опасности и необходимости среагировать на нее. Таким образом, маловероятно, что пользователь будет спокоен.

2. Копирайтер заверил: «Вы сбросите 10 килограммов за месяц!». Дизайнер выбрал для этого заголовка жирный шрифт. Вроде бы, это незначительная деталь. Однако если бы был использован тонкий, изящный шрифт, человек, желающий похудеть, скорее поверил бы, что его мечта сбудется. Так получается тогда, когда дизайн и копирайтинг не взаимосвязаны друг с другом, поэтому рекламный посыл неэффективен.

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

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

Принципы типографики

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

Перечислим их:

• не используйте более 2-3 шрифтов;

• выбирайте интерлиньяж, равный примерно 150 % от размера шрифта, так людям будет удобнее читать тексты на сайте (значение будет зависеть от длины строки и типа начертания);

• если хотите сочетать два шрифта, ориентируйтесь на проверенные временем Verdana и Georgia, Tahoma и Garamond, Fira Sans и Courier New;

• пусть размер строки будет в пределах 50-70 символов;

• увеличивайте расстояние между заглавными буквами;

• не разряжайте строчные буквы;

• избегайте висячих строк в конце страницы (так называемых «вдов») и висячих строк, попадающих на начало новой колонки («сирот»);

• помните, что нужно использовать именно тире, а не дефис или минус.

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

Контроль результата

Веб-дизайнер, разрабатывающий продающий дизайн сайта, не может использовать распространенное объяснение: «Я художник. Я так вижу». У него должны быть веские аргументы для всех решений.

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

Правила продающего дизайна

• Уложиться в 10 секунд

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

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

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

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

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

• Только три клика

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

Принципы продающего дизайна сайта

1. Выгоды в приоритете

   Пока ваша продукция еще не стала так популярна и узнаваема, как Pepsi-Cola, нужно старательно улучшать мнение пользователей о ваших товарах и бренде, информировать их о нем. Помните о словах из книги «Не заставляйте меня думать!» Стива Круга: «Вы задержитесь на сайте, не поняв его назначения?»

   Про свою деятельность вы можете рассказать кратко. Наибольшее внимание нужно уделить выгодам вашего предложения. Его полезность, плюсы, достоинства — вот что должно быть в приоритете.

   Делайте акцент именно на этом, дополните эту информацию отзывами от клиентов: текстовыми, видео, с фотографиями.

   Продающий дизайн сайта должен подкреплять имидж вашей продукции, вызывать доверие и убеждать людей, что к вам стоит обратиться. Как рекомендует Frosmo.com, используйте больше социальных подтверждений. Посмотрите на Pepsi.com, они даже пользуются отдельным доменом для своих товаров, подчеркивая высокие стандарты качества.

   

2. Интерес плюс внимание

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

   Чтобы сделать свой сайт эффективным продающим и лидогенерирующим механизмом, помогите людям осуществлять все действия с комфортом. Никогда не задумывались о том, что заполнение полей форм вызывает стресс? Формулируйте призывы к целевым действиям не однословно и директивно, в стиле «Подписаться», «Заказать», а мягко, в форме предложения: «Ознакомьтесь с рецептом, «Оставьте заявку на демонстрацию». Так люди не почувствуют себя подавленными и перегруженными, а продающий дизайн сайта будет эффективен.

3. Социальные подтверждения

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

   Хорошим социальным доказательством станет информация о партнерстве с другими компаниями и упоминания ваших продуктов популярными СМИ. Оформите эти данные сдержанно и лаконично.

4. Яркий заголовок

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

   Перегружать название дополнительными задачами не нужно, но можно использовать подзаголовок, который будет усиливать эффект. Согласно результатам юзабилити-исследования от KISSmetrics, идеал — шесть слов (3+3). Это объясняется тем, что, если бегло посмотреть на поисковую выдачу, вы зафиксируете внимание на трех словах с начала или с конца. MOZ называет оптимальным заголовок из 57-59 знаков.

   Правила для привлекающего внимание заголовка:

   • Не содержит лишние обороты и четко выражает основную мысль.

   • Отражает ваши преимущества перед конкурентами, а не деловые качества бренда.

   • Дает реальное предложение с понятными сроками.

   • Внушает доверие, работая как продающий триггер.

   • Содержит напоминание о лимите времени или количестве товара.

   • Включает в себя яркие прилагательные и побуждающие к действию глаголы.

   • Имеет оттенок провокации, заставляет взглянуть на привычные вещи под другим углом, увидеть в них нечто новое.

   • Лаконичные тексты.

   Юзабилити-эксперт с двадцатилетним стажем Стив Круг советует удалять половину контента, а затем вычеркивать еще 50 % из того, что осталось.

   Если вам кажется, что ваше предложение звучит неубедительно, найдите в нем и удалите:

   • Банальные, очевидные заявления.

   • Штампы и набившие оскомину выражения.

   • Канцеляризмы и формальности.

   • Замысловатые словосочетания, вымышленные аргументы, бессмысленные фразы.

   • Обобщения, например: «Все в восторге от нашей эксклюзивной услуги».

   Вспомните изречение великого философа Аристотеля: «Людям приятны те слова, что дают знание». Пусть в ваших текстах содержится полезная и дельная информация, а не общие фразы и рассуждения, раздувающие объем. Контент для сайта с продающим дизайном должен быть прост и доступен. Попросите кого-нибудь из близких ознакомиться с содержимым вашего сайта. Если за 10 секунд человек не поймет, о чем ваши тексты, то над ними определенно нужно поработать.

   

5. Оформление с эмоциональным зарядом

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

   Так, исследования 3M Corporation показали, что люди принимают 83 % решений на основании визуальной информации. Образы, которые мы видим вокруг, быстрее запоминаются и влияют на нас. Визуальную информацию мы воспринимаем быстрее «текстовой» в 60 тысяч раз.

   Привлекайте внимание людей с помощью образов, вызывайте у них отклики и поощряйте их различными интересными дизайнерскими находками.

Читайте также!

«Проверка сайта на адаптивность: ручные и автоматизированные методы» Подробнее

6. СЕО-подход

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

   Важно учесть:

   • Как элементы расположены на странице.

   • Каким будет восприятие пользователя (UX).

   • Остальную СЕО-стратегию или социальный маркетинг.

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

   Что будет работать на вас, когда начнут реализовываться поисковые алгоритмы? Очевидная логическая связь заголовка главной страницы с текстами на остальных и включения слов по тексту. Можно использовать тематические и второстепенные ключевые фразы. Чтобы оптимизировать страницы веб-ресурса, структурируйте информацию, разместите ее в логической последовательности.

7. Удобная главная страница

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

   • Проявят избирательность.

   • Покинут сайт и найдут другие, с удобной и привычной навигацией (вы рискуете остаться без трафика и конверсии).

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

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

8. Адаптация под экраны любых размеров

   Продающий дизайн сайтов включает в себя приемы, которые помогут оптимизировать вашу веб-страницу под экраны всех технических, электронных устройств. Хотя создание кросс-платформенного интерфейса — это не самая простая задача. Она потребует многих корректировок. Используйте адаптивную верстку, помните про принцип «упрощенной нагрузки» — избегайте излишней пестроты на сайте, не мельчите элементы.

   Если вы хотите, чтобы ваш сайт хорошо выглядел на смартфонах, необходимо учитывать особенности интерфейсов сенсорных экранов, где стандартная ширина области касания составляет 44 пикселя.

9. Интересная идея vs Продуманные элементы

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

   Качественный дизайн — это не тот, что привлекает внимание, а тот, в котором все ключевые элементы находятся на своих местах. Если у вас большая целевая аудитория, объемный трафик на странице, то вам требуется эффективный продающий дизайн сайта.

Нюансы продающего дизайна для интернет-магазина

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

Заботьтесь об удобстве сайта, а не о креативном оформлении

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

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

Каким должен быть удобный сайт:

• Поисковая строка видна на всех страницах и располагается на них в одном и том же месте.

• Навигационное меню удобно скрыть или развернуть по необходимости.

• Доступна возможность фильтрации товаров по параметрам.

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

• В карточке продукта есть блок с похожими или сопутствующими товарами. Например, если вы покупаете кошачью переноску, то вам также покажут другие товары для питомца: шлейки, комбинезоны, игрушки. Грамотно продуманный сайт интернет-магазина будет показывать несколько категорий товаров, чтобы клиенту было удобно сразу купить все, что может понадобиться.

• Информация об акциях, скидках и бонусах на главной странице.

Оформление выдержано в едином стиле

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

Ваш личный стиль

Ищете секрет, который поможет вам выделиться среди конкурентов?  Главное — иметь свой уникальный стиль, который вы используете для продающего дизайна сайта. Шрифт, логотип, слоган, товарный знак, основные цвета оформления — все должно быть индивидуальным, ассоциироваться с вами. Айдентика должна работать. Так потенциальные клиенты будут вас замечать и реагировать на вашу рекламу.

Качественные фотографии

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

Кроме того, внимание потенциальных клиентов хорошо привлекают 3D-модели товаров. С их помощью можно делать рассмотреть продукт, оценить его, представить, как та или иная вещь будет смотреться в квартире.

Расставьте акценты

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

Если у вас мало собственных идей по этому пункту, посмотрите, как оформлены интерактивные страницы товаров Apple, Microsoft или Samsung.

Полезные идеи

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

Также вам, конечно, известно про чат-боты или помощники в шопинге. Например, у «Яндекс» есть Алиса — с ее помощью вы сделаете заказ на АлиЭкспресс за пару минут. Просто вводите данные или произносите их вслух, Алиса подключается к аккаунту, выбирает товар вместе с вами и оформляет заказ. Если вы сможете создать нечто подобное на своем сайте, это существенно повысит его эффективность.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Проектирование продающего дизайна

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

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

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

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

Что в итоге? Заказчик постоянно замечает какие-то недоработки, ненужные элементы, отсутствие необходимых компонентов и заставляет дизайнера всё исправить. Процесс создания сайта растягивается на долгий срок. И заказчик, и дизайнер тратят гораздо больше своего времени, чем потеряли, если бы привлекли к делу проектировщика. Специалист по дизайну не может полностью сконцентрироваться на своих задачах, погрузиться в творческий процесс. Печальная ситуация! Надеемся, что вы поняли: для создания продающего дизайна сайта сначала обязательно нужно уделить внимание проектированию.

6 распространенных ошибок продающего дизайна сайта

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

1. Большое количество текста

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

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

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

   Резюмируем: если текста много и он не структурирован, пользователь с большой вероятностью, уйдет с вашего сайта.

2. Фотографии без единого стиля

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

3. Кричащее оформление

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

4. Слишком крупный логотип

   Логотип, как и цветовое оформление, должен быть скромным. Возможно, он очень красив и эффектен. Может быть, вы сделали его сами и гордитесь результатом. И, тем не менее, — не растягивайте логотип на весь экран. Клиенту нужно видеть на главной странице и другие вещи: текст, меню, фотогалерею. Так он сразу поймет, куда попал и что тут можно найти.

5. Непонятная навигация

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

6. Автоматический запуск звуковых элементов

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

Примеры сайтов с продающим дизайном

Нуждаетесь в идеях для создания продающего дизайна сайта? Предлагаем рассмотреть несколько интересных лендингов, которые вас вдохновят.

• Le Balsoy

Сайт с интересным интерактивным дизайном. Он уникален тем, что создан с целью продвижения одного товара — соуса. На нем размещена информация о товаре и его «авторе», указаны ингредиенты соуса, есть рекомендации, с какими продуктами и блюдами сочетать, а также форма регистрации для получения бесплатного образца.

• Initiative

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

• Marco Sors

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

• Hardwicke Knight

Английский цифровой дизайнер Шон Нагиби создал этот лендинг для продвижения коллекции фотографа Хардвика Найта. Здесь использовано много креативных идей продающего дизайна сайтов для привлечения внимания: стилизованный курсор, удобная корзина, примеры наиболее интересных работ фотографа.

• Melanie Daveid

Это сайт дизайнера UX и арт-директора из Берлина Мелани Дэвид. Здесь можно ознакомиться с ее работами. Структура сайта не только весьма проста, но и удобна, информативна. Все главные элементы на своих местах и акцентированы.

• Aristide Benoist

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

• Your Wild Journey

Этот сайт рассказывает о приложении для медитации и релаксации для iPad и iPhone. Взгляните, какое у него оформление — оно сразу создает ощущение умиротворения и расслабленности. На сайте вы сможете увидеть все элементы приложения и понять, подойдет ли оно вам для использования.

• The Art of Texture

Лендинг, продвигающий одноименный документальный фильм о художнике-коллажисте из Амстердама. Здесь вы найдете его известные изречения, увидите примеры работ и кадры из фильма. Текстовые описания лаконичны, преобладают изображения, что помогает осознать очарование творчества художника.

• Android KitKat

Это промостраница новой серии конфет, которую KitKat запустил совместно с Android. Привлекательный дизайн, интерактивные элементы, краткие текстовые фрагменты — сайт яркий и удерживающий внимание пользователя.

• Fisher & Donaldson

Сайт британской семейной пекарни, которая существует уже около сотни лет. Несмотря на такой солидный стаж предприятия, страница выглядит очень современной и свежей, как выпечка, которая на ней продается.

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 09.09.2021

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB