Главный экран: не повторяйте ошибки новичков

Мы собрали 4 основные ошибки, которые совершают новички при оформлении главного экрана, и на примерах показали, как делать не надо.

Легко смеяться над беднягой, который в фильме не может с первого раза расстегнуть бюстгалтер красивой подружки, и совсем не смешно попытаться повторить этот трюк самому. Также и с веб-дизайном  — когда видишь чужой сайт, к которому словно в пьяном бреду приложил руку дружище Чарли Шин, в голове возникает мысль «что за придурок cделал это лендинг». Но когда начинаешь делать — оказывается, что этот придурок ты сам.

Читайте материал и не повторяйте чужих ошибок.

Ошибка №1. Не делайте текст частью изображения

Почему нет

В мобильной версии фото обрезается, и люди увидят только часть изображения.

Через некоторое время вам захочется исправить текст, а вы не сможете — придется менять фото.

Текст, вшитый в картинку, не индексируется поисковиками — потенциальный клиент просто не найдет ваш лендинг.

Решение

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

Ошибка №2. Не перегружайте первый экран текстом

Почему нет

Слишком много информации сбивает с ног и смывает способность соображать.

Когда текста много — не видно акцентов, и основное предложение теряется.

В мобильной версии длинный текст займет несколько экранов. Кому захочется тратить лишнее время на чтение?

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

Решение

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

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

Ошибка №3. Не пишите слишком много текста на кнопке

Почему нет

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

Нет призыва — человек не поймет, что именно он получит, нажимая на кнопку.

Если на кнопке несколько призывов — непонятно, что именно произойдет после нажатия.

Решение

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

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

Ошибка №4. Не используйте изображения плохого или даже среднего качества

Почему нет

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

Решение

Заказывайте у фотографа, это обойдется вам от 500 до 3000 ₽. Или берите изображения из интегрированного в конструктор Flexbe фотостока unsplash.com На все фотографии дано официальное разрешение авторов использовать снимки в коммерческих целях. А если этого будет мало — ниже дополнительный список.