Дизайн landing page: с чего начать?

Posted on by riasevastopol

Источник изображения

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

Но вот хоть ты тресни — «не идет концепт».

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

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

  • 10 примеров творческого подхода к сообщению об «неточности 404»

1. Начните с призыва к действию

Согласно точки зрения Брайана Мэсси (conversionscientist.com), разработка целевой страницы должна быть основана призыве к действию. В случае если контент и остальной дизайн органично вырастает из действия, которое вы желаете видеть от визитёров, то и страница будет действенна.

К примеру, дизайнеры лендинга ресурса по продаже компактных платежных устройств для сотовых телефонов начали работу Square с создания как раз этого элемента.Дизайн landing page: с чего начать?

А после этого нарисовали другое около CTA:

  • Как дизайн СТА-кнопки может расширить конверсию?
  • Привлеките внимание за счёт дизайна, либо принцип 3W!

2. Начните с изображения

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

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

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

Как как раз подать собственный товар либо услугу — решать вам. Это возможно соблазнительный большой замысел либо же абстрактное изображение, лишь намекающее на сущность вашего бизнеса. В любом случае, отыщите картину, которая соответствует вашему продукту — «и будет вам счастье!».

  • Изображения как реализовывающий контент

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

Хороший пример от Ovi Store:

Apple постоянно любили применять аппетитные фотографии продукта для привлечения клиентов:

  • Первое чувство, либо из-за чего серьёзен качественный дизайн?

3. Начните с блоков

Последние новшества в Facebook, Pinterest и продуктах Микрософт говорят о том, что применение «плиток» и блоков в веб-дизайне — весьма перспективный способ.

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

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

  • 5 правил плоского дизайна, сделавших его самым горячим трендом сезона

Последний пример от Pepsi замечательно иллюстрирует таковой подход. Данный дизайн — юный, современный, броский и динамичный. Он идеально подходит к неспециализированной стратегии бренда и одинаково прекрасно будет смотреться как на посадочной странице, так и на рекламном билборде с Таймс-сквер.

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

4. Начните с текста

В большинстве случаев дизайнеры так помешаны на визуальной составляющей, что совсем забывают о серьёзном компоненте любой рекламы — тексте. Это необычно, по причине того, что текст, вкупе с предварительно созданным макетом, способен повести за собой всю стратегию дизайна ресурса. Применение Lorem ipsum (текстовая «рыба», заготовка текста) в качестве текста-заполнителя — хороший метод проверить, как текст будет смотреться в готовом макете.

PsychPsych исходят напрямую из текста при создании иллюстраций, составляющих главную часть интерфейса web-сайта.

  • 6 неточностей копирайтера, талантливых «убить» конверсию

5. Начните с цвета

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

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

Цвета — это путь, талантливый привести нас к дизайну, что нам нужен. Так что прислушивайтесь к цветам.

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

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

Разумеется, что выбор цвета играется огромную роль в дизайн-стратегии.

  • Влияние цвета на конверсию целевых страниц

6. Начните с макета на три колонки

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

Из-за чего? Это беспроигрышный вариант. Как хороший костюм для мужчины.

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

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

А в то время, когда покажутся вправду уникальные идеи, вы постоянно сможете их применить.

  • 25 примеров прекрасного дизайна вебмагазинов
  • Эволюция веб-дизайна

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

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

Это и имеется творчество.

Желаете взять целевую страницу под ключ? Команда LPgenerator готова выполнить эту задачу!

Высоких вам конверсий!

По данным blog.crazyegg.com

Случайные статьи:

Дизайн адаптивного лендинга. С чего начинается разработка. часть 1


Подборка похожих статей:

riasevastopol

More Posts