Sevdresscode.ru

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

Сайт для создания прототипа сайта

Как сделать прототип сайта: пошаговая инструкция, инструменты и лайфхаки

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

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

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

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

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

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

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

Как создать прототип

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

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

Читать еще:  Сайты с музыкой для работы

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

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

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

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

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

Esk.one

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

Esk.one отлично подойдет новичку, который впервые взялся за макетирование сайта. Для регистрации достаточно ввести и подтвердить email или кликнуть по иконке социальной сети. После этого нужно нажать «Создать проект» в левом верхнем углу и выбрать «Прототип сайта». После этого можно добавлять на сайт элементы, редактировать их и выгрузить готовые страницы в HTML-формате.

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

Раздел «Получить идею» подсказывает, что еще можно разместить на сайте

NinjaMock

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

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

Интерфейс реализован на английском, но в самом прототипе кириллический текст выглядит органично, не превращается в «крокозябры» или пустые квадраты.

Читать еще:  Работа на проверенных сайтах

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

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

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

Moqups

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

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

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

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

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

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


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

Читать еще:  Проверка скорости работы сайта

Origami

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

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

Figma

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

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

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

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

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

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

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