Как создать прототип сайта в Balsamiq Mockups

• Назар Ванна, ведущий специалист отдела разработки Конверт, представляет программу Бальзамик Макапс.  

• Программа бесплатна и доступна по ссылке бальзамик точка ком.  

• Интерфейс программы позволяет создавать прототипы сайтов.  

• Прототип показывает заказчику расположение блоков и структуру будущего сайта.  

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

• В Бальзамик Макапс можно создавать и форматировать прототипы в рамках контентной области.  

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

• Для многостраничного сайта можно дублировать или удалять макеты.  

• Начинается создание хедера сайта с задания дискриптора.  

• В интерфейсе программы есть разделы для создания элементов сайта.  

• Для создания дискриптора используется раздел команд и элемент айкон нейм.  

• Можно задать расположение и текст дискриптора, например, краткое описание деятельности компании.  

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

• Пример: "Обучаем с 2010 года".  

• Контактная информация, номер телефона и кнопка обратного звонка также добавляются в хедер.  

• В хедере создается навигационное меню с кликабельными элементами.  

• Пример: разделы "Блок кейсы", "Спикеры", "Контакты".  

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

• Офер включает заголовок, подзаголовок и триггеры.  

• Пример заголовка: качественное прилагательное, товар, конкурентная цена, ограничения по срокам, гео.  

• Подзаголовок и триггеры помогают пользователю понять выгоды продукта.  

• В офере добавляется форма заявки с заголовком, полями ввода контактных данных и кнопкой.  

• Пример заголовка формы: "Узнать стоимость обучения".  

• Поля ввода: имя, телефон, кнопка с текстом "Узнать".  

• Логически следующий блок - кейсы.  

• Задаем заголовок "Учитесь у лучших", выделяем жирным.  

• Располагаем фотографии спикеров и описываем их.  

• Задаем продающий копирайтинг для посадочной страницы.  

• Можно дублировать и изменять элементы.  

• Возможные блоки: характеристики товара, гарантия, достижения компании.  

• Через каждые два блока создаем форму заявки.  

• Используем кнопку "Узнать подробнее" и стрелочку для визуального отображения.  

• Задаем поля ввода контактных данных и кнопку.  

• Уменьшаем и увеличиваем контент с помощью контролов.  

• Логически последовательные призывы и кнопки.  

• Создали два блока и задали структуру экранов.  

• Определяем контентную область для дизайнера.  

• Создаем заголовок и текст для блока с характеристиками товара.  

• Вставляем текст и видео, задаем формат и подчеркивание.  

• Сохраняем прототип в формате PNG или PDF.  

• Задаем новое имя и сохраняем на рабочий стол.  

• Видео завершено, в следующем видео разберем продающую структуру и копирайтинг.