#2 урок. Базовый курс WDi
Скелет макета. Как делать прототип
Прототип — это схематичный набросок сайта в черно-белых тонах. Он нужен дизайнеру и клиенту. Дизайнеру, чтобы построить логику сайта: где ставить заголовки, фотографии и текст. Клиенту, чтобы понять, как сайт будет выглядеть в будущем.

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


Входные данные

Входные данные — это информация о целевой аудитории, бизнесе и продукте. Без неё прототип не сделать.

Входные данные дизайнер получает от заказчика. Встречается в скайпе или в офисе, и методично задает вопросы:

  • Кто покупатели?
  • Какая у них самая больная проблема?
  • Как продукт решает проблемы?
  • Что хочет сам заказчик?

В нашей рассылке нет живого клиента для интервью. Поэтому мы встретимся с учебным:

— Здравствуйте! Меня зовут Константин Пылесосный. У меня бизнес по продаже роботов-пылесосов. Есть 2 точки в Москве, а сейчас хочу выйти в интернет. Мне нужен лендинг. Текст я сделал с копирайтером, остался дизайн. Возьметесь? Могу выделить 20 тысяч рублей.

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

Кто у вас покупает?

— Мужчины и женщины, у которых дома живут кошки.

Почему они покупают?

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

Что вы хотите?

— Заработать с продаж Панды-5 в интернете.

Оформляем:

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


Логика прототипа

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


Заголовок объясняет пользователю, что сайт продает робота-пылесоса. Чтобы человек понял, что этот пылесос для него — ставим расшифровку:
Теперь человеку интереснее, потому что робот-пылесос поможет решить его проблему. Но одного текста для этого мало. Чтобы пользователь увидел, как продукт решает задачу — ставим фоном видеодемонстрацию, как пылесос едет по квартире и собирает мусор. Если у заказчика на съемку нет денег, сойдет тематическая фотография. На прототипе мы покажем цветом, где будет фото или фоновое видео:
Что хочет человек, когда понял, как продукт решает его задачу? Узнать, что компания создана не вчера и работает в его городе. Никто не хочет купить то, что в итоге не будет доставлено. Поэтому ставим телефон и название:
Последний штрих — целевое действие. Что должен сделать человек на главном экране. Давай поставим кнопку, на которую он нажмет, чтобы узнать о пылесосе больше.
Первый экран мы сделали вместе, а дальше ты сам. Забирай текст лендинга.
Когда накидаешь схематичный прототип, можешь улучшить и сделать более эстетичным. Например таким:
Прежде чем уйти собирать прототип, посмотри подарочные уроки.

Подарок — 5 уроков курса Старт

Мы дарим тебе 5 уроков курса Старт. Уроки о том, как делать прототипы и какую информацию вытаскивать из заказчика, чтобы делать успешные проекты.

Перед созданием прототипа, посмотри уроки.

Что мы узнали

  1. Прототип нужен дизайнеру и заказчику. Он помогает понять, что и в какой последовательности пользователь увидит на сайте.
  2. Чтобы сделать прототип лендинга, нужно понять бизнес-задачу клиента и проблему пользователя.
  3. Для быстрой работы над прототипом, нужно посмотреть подарочные уроки курса Старт

Задание


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

Скоро увидимся!
WDI