Landing pages Подготовка к созданию сайта Сайты

Лучше один раз увидеть: создаем прототип будущего лендинга

4_via_4

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

Ликвидируем ошибки на корню

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

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

Прототипы бывают двух видов:

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

    Это еще вайрфреймblog

    А это — уже мокап

  2. Динамические. Они полностью интерактивны: можно переходить по ссылкам, нажимать на кнопки, оценивая взаимодействие посетителя с Вашим одностраничником.

Технический вопрос

Где и на чем рисовать Вашу модель? Инструментов масса. Набросать «скелет» можно вообще карандашом на бумаге. Несмотря на кажущуюся нетехнологичность, этот метод регулярно используется проектировщиками интерфейсов во всем мире. Дальше — по ситуации. Если Вам нужна статика — можно вооружиться любым графическим редактором. Динамику — написать на html или воспользоваться специальными программами, наподобие AxureRP или InVision. Кроме того, в интернете доступно множество онлайн-сервисов попроще — к примеру, Gomockingbird или Mockflow. Функционал у них, конечно, не такой богатый, но минимально необходимым набором возможностей они обладают.

Не забываем о клиенте

Что еще нужно для того, чтобы создать грамотный макет? Понимание того, кто Ваш покупатель и что он будет делать на Вашей веб-странице. Помните, мы писали о картах персонажей? Здесь они снова Вам понадобятся! Первый вопрос, который Вы должны себе задать: «С каких устройств аватары могли бы заходить на Вашу landing page?» Это даст Вам возможность понять, каким образом ее оптимизировать, нужна ли версия для смартфонов и др. Второй — «Что они будут делать, попав на нее?» Ответом на него будут несколько так называемых user story — сценариев поведения усредненного пользователя.

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

vopros

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

comments powered by HyperComments
Похожие записи
5_via_1
Знай клиента своего: персонализируем сайт с помощью Big Data
via_16
Смертельно опасные заблуждения о landing page (part I)
Как веб-дизайн способствует конверсии? | Блог
2017-03-13 10:58:04
[…] Мы не устаем повторять: веб-дизайн — это не только про цветовое оформление, шрифты и картинки! Дизайнер разрабатывает весь интерфейс портала, определяет его структуру, поэтому именно он «решает», будет ли посетителю удобно им пользоваться. Если он не может найти, скажем, корзину или форму обратной связи, или и вовсе не понимает, каковы конкурентные преимущества Вашего продукта — плакала Ваша прибыль. Так что напомним еще раз — ставьте удобство во главу угла. В идеале этим аспектом стоит озаботиться на одном из первых этапов разработки — при создании прототипа. Вы ведь еще не забыли, что это — неотъемлемое условие для эффективности посадочной страницы (как они делаются, узнайте из одной из наших предыдущих статей)? […]