Vsv-fin.ru

Финансовая грамотность
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

Представьте себе лицо прораба, которому вы даете задание построить дом без проектной документации? Именно таким прорабом чувствует себя и дизайнер, к которому вы придёте заказывать landing page без прототипа.

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

Лендинг без прототипа?

Кто может создать прототип лендинга

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

Какую программу использовать для создания прототипа сайта

Прототип landing page можно составить и карандашом на бумаге, и в обычном Word-овском документе. Он может выглядеть приблизительно так:

Фрагмент прототипа landing page для дизайн-студии IconDesignLAB.com, созданный в Google Docs

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

или любой другой.

Некоторые из этих сервисов для создания прототипа сайта имеют демо и работают онлайн. Созданные таким образом схемы посадочных страниц называются мокапами (mockup, или mock-up, что с английского означает — макет). При их создании могут использоваться шаблоны лендингов, готовые элементы, различные инструменты, которые упрощают работу над прототипом. Выглядит процесс создания мокапа приблизительно так:

Процесс создания мокапа в Balsamiq

Но главное не то, где вы создадите прототип, а каким вы его создадите.

Что должно быть в прототипе посадочной страницы

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

4 основные элемента прототипа

1. Заголовок и подзаголовки

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

2. Идеи изображений

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

3. Текстовые блоки

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

4. Форма захвата

По сути это как раз то, для чего вы и создаете свой лендинг. Здесь должны быть поля для заполнения и кнопка. Делайте минимум полей, народ нынче ленивый пошел, устанут заполнять — и закроют вкладку. Кнопка должна быть контрастной и объяснять, что будет происходить после ее нажатия. И напоследок, помните главное правило прототипирования: мысли, которые важнее остальных, должны быть ярче, располагаться выше и занимать больше места. Мы перечислили основные элементы, без которых ваш лендинг не будет качественным. А как усилить его эффективность, мы расскажем вам в статье о конверсионном слое лендинга.

Подытожим:

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

Как создать прототип лендинга в Google Docs

Главная страница » Все про Landing Page » Как создать прототип лендинга в Google Docs

Как создать прототип лендинга в Google Docs

Продолжаю серию статей о простых сервисах для создания прототипов посадочных и главных страниц сайтов. В прошлый раз я рассказывала, как создать прототип в Wireframe.cc онлайн, а в этот раз речь пойдет о Документах Гугл.

Копирайтеры часто пишут информационные тексты в Google Docs, но не всегда знают, в чем сделать прототип лендинга. Разберемся, как Гугл Документы помогут нам в прототипировании.

Предварительные настройки страницы

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

Настраиваем внешний вид страницы

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

Убирать поля не обязательно, но без них мне удобнее группировать элементы на странице.

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

Убираем поля и делаем страницу горизонтальной

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

Убираем разрывы страниц

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

Формируем каркас прототипа для лендинга

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

Читать еще:  Бизнес молодость лендинг

Чтобы создать таблицу в документах Гугл, в главном меню выберите пункт «Вставка», «Таблица». Клавишей мыши укажите необходимое количество строк и столбцов.

Формируем каркас лендинга с помощью таблиц

Вот так выглядит прототип первого экрана для главной страницы сайта. Пока без текста.

Каркас первого экрана

А это он же, но уже с текстом.

Заполняем таблицу текстом

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

Слишком много места перед таблицей

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

Убираем пустое пространство

После этих манипуляций пустое место перед и после таблицы сокращается раза в три-четыре.

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

Убираем видимость у границ в таблицах

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

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

Для создания простого прототипа для посадочной страницы не нужно изучать все возможности сервиса Google Docs.

Какие функции нам понадобятся:

  • рисование средствами Гугл документов;
  • вставка сторонних картинок;
  • работа с текстом;
  • работа с таблицами.

Этого достаточно, чтобы создать хороший прототип для лендинга.

Работаем с панелью рисования

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

Работаем с панелью рисования

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

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

Создаем кнопки с призывом к действию

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

Разделяем экраны лендинга горизонтальной чертой

Добавляем картинки

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

Добавляем картинки из сторонних источников

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

Элемент посадочной страницы

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

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

О плохом и хорошем

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

В Google Docs удобно работать над правками — комментарии заказчика привязаны к той части текста, которую нужно править.

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

Хотите заказать прототип лендинга? Загляните на страницу «Контакты» и напишите на почту или в социальные сети.

Прототип как фундамент дизайна landing page

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

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

Истинная цель дизайна

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

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

Пример 1. Недоработанный прототип

Рис.1. Пример недоработанного мокапа (прототипа)

Представляете, если вот такой макет дизайнер отрисует точь-в-точь? А ведь любые его попытки реализовать такое ТЗ будут субъективными, т.е. риск, что вы/клиент не примет дизайн, увеличивается.

Пример 2. Доработанный прототип

Рис.2. Пример доработанного мокапа (прототипа)

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

Читать еще:  Лендинг пейдж ремонт

1) Размеры рабочей области

Прежде чем приступить к созданию прототипа, вы должны знать, что есть определенные стандарты веб-дизайна посадочной страницы. Так, под контентную область в ширину дается 960px (общая ширина макета — 1920px — такого размера вам предстоит искать фоновые изображения). В высоту стандарта нет, но желательно придерживаться размеров до 700px.

Рис.3. Размеры рабочей области

2) Оформление элементов первого экрана

Уже на этапе составления ТЗ вы можете примерно представить, какого размера использовать шрифты. Необязательно знать точные размеры, главное — соблюдать пропорции относительно других элементов. Так, самый большой шрифт используется в заголовке первого экрана. Именно поэтому вам нужно заранее использовать не очень длинные заголовки (до 10 слов), т.к. текст может просто не поместиться в блоке. Чуть меньше — шрифт призыва к действию и кнопки, а также основных выгод/подзаголовка. Самый маленький — шрифт дескриптора. Телефон и логотип также должны быть крупными, т.к. логотип отвечает за узнаваемость, а номер — важный элемент следующего шага.

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

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

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

Рис.4. Пример первого экрана в доработанном мокапе

3) Выравнивание текстов и заголовков

В классических вариантах веб-дизайна часто использовались короткие обобщенные заголовки, которые не содержали в себе никакой конкретики и только направляли посетителя по структуре страницы («О нас», «Контакты», «Наши работы» и т.д.). Такие заголовки, как правило, выравниваются по центру.

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

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

4) Расположение текстов и графических элементов в блоке

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

Рассмотрим несколько примеров.

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

Рис.5. Пример оформления кейса на этапе разработки мокапа

Пример 2. Блок с дополнительными выгодами

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

Рис.6. Пример оформления блока с доп.выгодами на этапе разработки мокапа

5) Оставляйте свободное пространство

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

Главное — не переборщить с этим пространством (как в примере недоработанного прототипа).

Рис.7. Пример свободного пространства в мокапе

Вывод

Дизайн посадочной страницы — самый трудоемкий этап с точки зрения согласования, т.к. напрямую связан с субъективным «нравится/не нравится». Именно поэтому необходимо делать фундамент еще на этапе создания прототипа. Чтобы ускорить разработку проекта и упростить работу дизайнеру, нужно учесть следующие моменты в своем мокапе:

— Учитывайте размеры контентной области (960px в ширину)
— Соблюдайте пропорции в размерах шрифтов и элементов первого экрана
— Не экспериментируйте с расположением ключевых элементов первого экрана (логотип, номер, дескриптор, заголовок, форма заявки)
— Выравнивайте заголовки по левому краю (в редких случаях допускается по центру), тексты — только по левому краю (кроме триггеров и подписей фотографий)
— В блоках с кейсами и дополнительными выгодами старайтесь располагать тексты правее от графических материалов
— Оставляйте на мокапе достаточно свободного пространства

Как создать прототип лендинга в Moqups: инструкция для начинающих

О ЧЕМ СТАТЬЯ?

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

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

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

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

АВТОР СТАТЬИ

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

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

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

А еще этот сервис проверен личным опытом коллег-копирайтеров. Многие из них создают прототипы лендингов в «Мокапсе» и очень тепло о нем отзываются.

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

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

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

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

Чтобы начать работу, вам нужно будет нажать кнопку «Log in» и зайти под своим профилем. Если профиля пока нет, то система предложит создать его с нуля или войти под своим аккаунтом Google.

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

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

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

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

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

Бонусом к платным тарифам идет целый ряд полезных «плюшек». Это возможность работать в команде, приватные настройки (чтобы проект не видели другие пользователи), экспорт в PDF- или PNG-формате и многое другое.

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

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

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

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

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

Рисуем меню

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

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

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

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

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

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

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

Теперь все-таки напишем комментарий для дизайнера. Открываем меню Comments и нажимаем Add comment. На рабочем листе появляется синяя цифра, которая обозначает номер комментария. Кликаем по ней дважды и в открывшемся окошке пишем. Чтобы отправить комментарий, нажимаем Send.

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

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

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

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

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

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

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

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

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

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

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

Когда сдаешь клиенту прототип в «Мокапсе», а он ожидал просто текст, — это производит вау-эффект.

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

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

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

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

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

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

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

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

Ссылка на основную публикацию
Adblock
detector