Как сделать прототип лендинга

Обновлено: 07.07.2024

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

Они были разные, но всё это походило на ситуацию “кто в лес, кто по дрова”. Такое мы до сих пор видим во многих компаниях.

Решений масса, но главное из них – это предварительное прототипирование сайта. Поэтому знать и использовать обязательно.

роста прибыли не будет

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

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

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

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

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

Схема и макет

самая сложная часть

Руководители бизнеса считают, что создать прототип landing page это самая лёгкая часть при разработке одностраничника.

Но я Вам открою тайну – это САМАЯ СЛОЖНАЯ ЧАСТЬ! Без преувеличения. Дизайн и программирование стоит не много. В своей статье я уже акцентировал на это внимание.

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

Аудит компании; ; ;
Разработка структуры;
Прототипирование;
Написание текста.

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

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

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

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

Четвёртый шаг – это написание последовательности блоков лендинга, что за чем идёт.

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

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

Меню;
Первый экран;
Продукт;
Свойства + выгоды;
О компании;
Команда;
Кейсы;
Отзывы.

Здесь нет конкретики. Но это существенно помогает в следующем шаге. Такую последовательность мы создаём на основе лестницы Ханта, критериев выбора, страхов и потребностей клиента.

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

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

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

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

Большинство маркетологов считают, что на этом процесс разработки прототипа сайта закончен.

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

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

Прототип с текстовым наполнением

Если Вам создали прототип страницы сайта за 1 день, то Вас обманули. Вы получили очень сырой продукт без глубокой проработки.

Важно. Хороший сайт невозможно сделать за 2-7 дней.

Как сделать прототип

Теперь, когда мы знаем основу создания прототипа, можно переходить к самому процессу. Для этого есть 4 варианта подхода, но наверняка у Вас всё сведётся к двум, самым удобным.

Для начала нужно понять , мы будем только смотреть прототип или потрогать его тоже будет необходимо. Звучит странно, но сейчас всё поймёте 😉

Кстати, узнать больше об UX/UI прототипировании можно изучив обучающие программы в нашей статье про курсы веб дизайна.

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

Что с этим делать? Ну, для начала нормально заполнять бриф, но об этом как-нибудь в другой раз. А пока поговорим про прототип.

Красота или читабельность?

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

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

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

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

В этой статье я пошагово расскажу и покажу:

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

Но сначала все-таки отвечу на ваш невысказанный вопрос.

АВТОР СТАТЬИ

Почему именно Moqups?

Потому что это — один из самых удобных сервисов для создания прототипов:

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

Так что давайте и мы познакомимся с ним поближе.

Moqups: первое знакомство

В Moqups можно попасть двумя способами — зайти по прямой ссылке или скачать расширение для Google Chrome.

В итоге, в обоих случаях вы увидите вот такую страничку:

Но прежде чем переходить к рисованию прототипа, давайте посмотрим повнимательнее на сам сервис.

Что тут есть такого, что нам нужно знать?

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

Во-вторых, у сервиса есть платная и бесплатная версия.

В бесплатной нас ограничивают только одним активным проектом и дают 5 МБ места для хранения изображений. В платной версии можно хранить больше — как проектов, так и картинок.

Создаем прототип лендинга в Moqups

Теперь можно переходить непосредственно к рисованию.

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

Рисуем меню

В сервисе Moqups слева есть вертикальное меню, в котором прячутся все нужные графические элементы. С него мы и начнем свою работу.

Нажимаем Stencils и выбираем Text Area — текст в рамочке. Перетаскиваем этот прямоугольник на рабочий лист, вписываем туда свой текст и форматируем, как нам нужно.

А потом копируем несколько раз и выстраиваем новые прямоугольники в один ряд. У нас получилось меню будущего лендинга.

Следующим шагом создаем фон

Для этого вытягиваем на наш лист прямоугольник (Rectangle) и треугольник (Triangle) и раскрашиваем их в серый цвет.

А вот логотип Академии обозначим картинкой. Я это сделала так: нашла в интернете логотип, загрузила его через меню Images — Upload images и перетащила мышкой туда, где он и должен быть.

В итоге получается вот такая картина:

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

Переходим к следующему этапу — делаем надписи

Заголовок и подзаголовок добавляем с помощью элемента Heading. Галочки находим в меню Icons и раскрашиваем в желтый цвет. Остальные надписи создаем с помощью элемента Paragraph в меню Stencils. Кнопку находим там же — она называется Button.

Рисуем нижнюю часть нашего фрагмента

Действуем по тому же принципу: иконки находим в меню Icons, а надписи делаем с помощью элементов Heading и Paragraph.

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

Как думаете, получилось похоже на наш исходник? На мой взгляд, очень даже.

А вот стоит ли рисовать именно так, в цвете и с картинками, ведь для этого есть дизайнер? Давайте посмотрим.

Цвета и картинки: стоит ли их подбирать

Да, в этом примере я сделала все по максимуму. Примерно так же работает и Юлия Третья — копирайтер, журналист и тренер:

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

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

Вот как это выглядит на практике:

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

Теперь вы знаете, как нарисовать прототип лендинга в этом сервисе и как его можно оформить.

А вы создаете прототипы для своих клиентов? Расскажите, как вы это делаете. В каких программах рисуете, в каком виде показываете клиенту? Пишите — жду вас в комментариях.

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

Содержание

Прототип сайта: что это

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

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

Кому нужен прототип

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

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

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

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

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

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

Прототипы дизайна сайта позволяют проводить маркетологам A/B-тестирование и проверять гипотезы. Все это проще и дешевле делать на черновом этапе, когда меняются только графические макеты, а не переверстывается готовый документ. Сайт — это маркетинговый инструмент, поэтому активное участие маркетолога в его создании повлияет на эффективность конечного продукта.

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

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

Какие проблемы решает прототипирование сайта

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

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

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

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

Этапы прототипирования

Создание прототипа — это не просто отрисовка эскиза. Здесь есть свои этапы: от подготовки до детализации. Рассмотрим по шагам, что входит в прототипирование сайта.

Ставим цели.
Формируем гипотезы.
Проводим исследования.
Составляем черновую схему.
Детализируем.

Ставим цели

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

Формируем гипотезы

Проводим исследования

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

Составляем черновую схему

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

Детализируем

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

Виды прототипов

По глубине проработки прототипы сайтов делятся на 2 вида:

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

чтобы выстроить структуру страниц;
чтобы прикинуть объемы текстовых блоков;
чтобы определить локации интерактивных элементов.

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

убедиться в функциональности проекта: насколько удобно пользоваться сайтом;
оценить качество и визуальную эффективность текстов;
проверить соответствие изображений общей стилистике проекта;
протестировать юзабилити.

High-fidelity прототипы позволяют проводить первичные A/B-тестирования. На этом этапе уже понятно, каким будет сайт, но еще несложно вносить кардинальные изменения.

Типы прототипов по способу реализации

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

Эскиз на бумаге

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

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

Цифровой эскиз

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

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

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

Интерактивный прототип

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

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

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

Сервисы для прототипирования

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

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

Бальзамик имеет базу ходовых элементов, которые просто выбирают из списка и подставляют в свой макет. Здесь можно трансформировать элементы, оставаясь в рамках привязки к сетке, группировать объекты, подгружать файлы в pdf-формате.

Онлайн-сервис для создания прототипов сайтов, мобильных приложений, составления схем бизнес-процессов и интеллект-карт.

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

Бесплатно доступен только один проект весом не более 5 Мб с ограниченным функционалом. На платных тарифах за команду из 3 человек придется заплатить $20, индивидуальная работа с неограниченным количеством проектов стоит $13.

Очень простой онлайн-сервис с минималистичным интерфейсом для черновых прототипов. Хороший инструмент для новичков.

Есть правдоподобная сетка, предусмотрена возможность комментирования. Сервис чем-то похож на Бальзамик, но с бесплатным тарифом. Платные тарифы в диапазоне от $16 до $99 в зависимости от численности команды.

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

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

Программа сложная, нужно время, чтобы ее освоить. Поюзать Axure RP можно бесплатно в течение месяца, потом придется заплатить $352 за продвинутую версию.

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

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

С тремя проектами 2 редактора могут работать бесплатно, начиная с трех человек и четвертого проекта, за совместную работу придется платить.

Графический редактор c большими возможностями для дизайна интерфейсов и прототипов сайтов на платформе Mac. Пока это лидер среди инструментов для UI-дизайнеров, но Figma наступает на пятки.

Здесь есть удобные инструменты для работы с векторной графикой, цветом, текстом, символами. Проблема Скетча в несовместимости с продуктами Adobe, это усложняет совместную работу с другими командами.

Программа от гиганта в мире дизайнерских инструментов Adobe. Занимает почетное третье место по популярности после Скетча и Фигмы. Трудно определить, кто из этой тройки объективно лучший: все активно развиваются, все очень похожи по функционалу и принципам работы, но у Adobe XD все же чуть больше возможностей для построения более сложных прототипов. К тому же программа отлично интегрирована с пакетом Adobe.

Доступен 1 бесплатный проект с двумя редакторами.

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

Пример алгоритма создания прототипа

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

Заключение

Мы рассказали об основах прототипирования сайтов. Это уже давно стандарт в web-разработке. Ни один вменяемый разработчик не будет делать сайт без прототипа: это экономит деньги, время, нервы всем участникам процесса.

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

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

Время чтения 10 минут

Вы можете перейти сразу к интересующему разделу:

Что такое прототип сайта

Что такое прототип? Это первоначальный образец чего-либо.

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

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

Плюсы и минусы прототипирования сайтов

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

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

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

Как сделать прототип сайта

Шаг 1. Продумайте путь клиента до того, как создать прототип сайта

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

Шаг 2. Сделайте набросок

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

Шаг 3. Оживите прототип

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

Ringostat для агентства

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

Программы для создания прототипов офлайн

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

Esk.one

Платформа: Онлайн-сервис

Цена: бесплатно, пользователь может сделать пожертвование на свое усмотрение

Интерфейс esk.one

NinjaMock

Платформа : Онлайн-сервис

Цена: от 7,7$/месяц

Бесплатный тариф : бессрочный, с ограничениями

У сервиса есть бесплатный тариф, в котором можно создать только один проект с не более чем 200 элементами. Созданные на бесплатном тарифе проекты доступны для просмотра всем посетителям сервиса, так что этот вариант вряд ли подойдет для коммерческого использования. Экспортировать прототип тоже получится лишь после оплаты. На PRO-планах доступны форматы PDF, PNG и HTML.

Здесь можно создавать проекты под разные платформы:

смартфоны;
планшеты;
умные часы;
браузер.

Также есть вариант freehand для кастомных проектов — в этом режиме пользователь может задать свои параметры холста, а не ограничиваться экраном конкретного устройства.

Moqups

Платформа : Онлайн-сервис

Цена: от 13$/месяц для фрилансеров, от 20$/месяц для команд

Бесплатный тариф : бессрочный, с ограничениями

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

При редактуре Moqups подсказывает похожие элементы, подсвечивает поля

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

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

У Moqups также есть расширение для браузера Chrome. Пока оно умеет делать скриншоты страниц и отправлять их в сервис.

Origami

Платформа : macOS

Цена: бесплатно

Если ваша основная аудитория — пользователи мобайла, попробуйте приложение Origami от корпорации Facebook. Программа заточена под создание прототипов для смартфонов. Здесь можно задать отклик будущего сайта или приложения на скроллинг, жесты, поворот экрана и прочие специфические способы взаимодействия. Здесь даже можно добавить изображение руки, которая держит смартфон, чтобы уточнить восприятие пользователем.

У сервиса есть приложения для iPhone и Android, но они предназначены для тестирования, а не разработки прототипов. Если синхронизировать их с программой на Mac, можно посмотреть работу созданных прототипов на телефоне.

Figma

Платформа : кроссплатформенный сервис, Windows, macOS, браузерная версия

Цена: от 12$/месяц

Бесплатный тариф : бессрочный, с ограничениями.

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

В сервисе есть шаблоны для сайтов, диаграмм, путей клиента и пользователя, постов для соцсетей и даже коллекция шрифтов. Доступна разработка под разные модели смартфонов и smart-часов. Есть векторный редактор и масса smart-функций. Figma пригодится на крупных проектах, когда прототип должен быть идеальным, прежде чем пойдет в работу. К слову, экспортировать файлы можно в форматах PNG, JPG, PDF и SVG.

Пользуясь бесплатной версией, можно создать до трех проектов, история изменений которых хранится 30 дней. Также можно добавлять в проект одного соавтора. Студентам сервис предлагает бесплатный доступ к PRO-версии. Но попытка перейти на страницу подтверждение статуса студента привела нас на страницу 404. Возможно этот функционал доработают.

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