Создать прототип сайта
Прототип сайта – технический эскиз будущего интерфейса. На нем уже видно, какие элементы где расположены, как они связаны между собой и что должно происходить при нажатии на кнопки. Прототипирование сайта позволяет оценить идею на самом раннем этапе, пока ошибки исправлять еще дешево и быстро. А уже на основе этого черновика команда будет делать живой и работающий сайт.
Маленькая схема, которая решает большие проблемы
Прототип сайта для заказчика – это возможность сразу прикинуть, как все будет выглядеть. Увидеть примерную структуру и визуальную составляющую. Для разработчика это защита от капризов заказчика. Все согласовали, подписали – и вперед. Если клиент в середине проекта вдруг предлагает «а давайте все переделаем», вы просто открываете согласованный черновик.
Можно еще долго рассуждать о пользе прототипирования сайтов, но проще перечислить, что именно вы получаете:
- Прототип дает команде и заказчику общую картинку. Каждый блок на схеме имеет свое обоснование. Исчезают бесконечные «а что вы имели в виду?» и «мне казалось, тут будет по-другому».
- Схему можно показать, пока нет еще ни строчки кода. Собрать обратную связь, понять, что не так, и поправить. Найти проблему на уровне каркаса сайта стоит копейки. Переделывать готовый продукт – совсем другие деньги.
- Вы фиксируете требования. У всех появляется единое понимание задачи. Разработчик и заказчик смотрят на один и тот же документ и видят один и тот же продукт. Никаких сюрпризов.
- Вы экономите деньги. Если пропустить этап разработки каркаса сайта и сразу уйти в верстку, вы гарантированно сольете бюджет. Правки на этапе черновика – дешево. Правки в дизайне – дороже. Правки в готовом коде – катастрофа.
Все, что вы хотели знать о прототипах, но боялись спросить: виды, этапы, сроки
Важно не путать прототип с макетом и с минимально жизнеспособным продуктом. Графический макет – черновик дизайна с цветами и шрифтами. MVP – первая работающая версия с базовыми функциями, которую можно запустить в люди. А прототип (вайрфрейм) – техническая основа, с которой все начинается. Ничего лишнего – только структура и логика.
По степени проработки все прототипы делятся на три категории:
- Low- fidelity – быстрые схемы без дизайна. Для начальных гипотез и мозговых штурмов.
- Mid- fidelity – появляются примерные тексты и стили. Для согласования структуры и ключевых экранов.
- High- fidelity – выглядит почти как настоящий дизайн. Для тестирования и передачи разработчикам.
С точки зрения того, как вы будете использовать прототип сайта, важно различать статику и интерактив. Статичные варианты – просто изображения. Вы их показываете, обсуждаете, все кивают или спорят. Они отлично подходят, когда вам нужно быстро убедиться, что все поняли структуру одинаково.
Кликабельные макеты – симуляция работы. Вы кликаете – происходит переход. Вы наводите курсор – кнопка меняет цвет. Вы жмете на иконку – вылетает всплывающее окно. Незаменимы, когда нужно продемонстрировать продукт инвестору или начальству, проверить, не запутается ли пользователь в сложной логике, или быстро прогнать тест на пятерке случайных людей.
Большинство новичков сразу начинают рисовать экраны. И через пару часов уже не понимают, куда двигаться дальше. Сложно разобраться, что именно рисовать, сколько страниц делать, когда останавливаться.
Поэтому сначала – порядок действий. Потом – инструменты.
Этапы создания макета пошагово:
- Определяем цели. Выясняем, какую бизнес-задачу решает сайт. Изучаем аудиторию, смотрим на конкурентов, понимаем, какую проблему закроет продукт. Без этого прототипирование теряет смысл.
- Собираем требования. Запрашиваем у заказчика бриф или ТЗ. Обязательно фиксируем все пожелания по контенту, вся команда опиралась на один документ, а не на устные договоренности. Продумываем информационную архитектуру.
- Первая версия. Быстро делаем эскиз на бумаге или собираем грубый прототип главной страницы сайта. Согласовываем направление.
- Прорабатываем весь проект. Рисуем остальные страницы. Для сложных продуктов собираем многостраничную структуру с переходами.
- Анализируем и тестируем. Показываем прототип программистам – они первыми увидят слабые места с технической точки зрения. Потом проводим короткие сессии с реальными пользователями.
- Дорабатываем. По результатам тестов вносим правки. Финальную версию отправляем клиенту на утверждение.
Сроки зависят от того, кто работает над прототированием сайта. Можно сделать прототип самому, тогда со сроками – как повезет. Кто-то справляется за пару недель, особенно если инструмент знакомый и требования понятные. А кому-то нужно подольше, и это нормально. У профессионалов стандартный срок на обычный макет веб-сайта – пять-десять дней, но если переделок от клиента немного, можно уложиться и в три.
Где рисовать прототип, чтобы потом не было мучительно больно
ОК, с тем, зачем нужен прототип сайта и как его делать, разобрались. Теперь вопрос: в чем его рисовать? Вариантов много. От наброска на салфетке в кафе до профессиональных инструментов для прототипирования, в которых можно настроить сложную информационную архитектуру и анимацию.
Figma
Золотой стандарт индустрии. Позволяет команде работать над одним макетом одновременно, настраивать переходы и всплывающие окна. Здесь же рисуют интерфейсные элементы и векторные иллюстрации. Если базовых функций мало, подключаются плагины. В Figma есть библиотека шаблонов и система компонентов: изменили кнопку в одном месте – она поменялась везде. Для разработчиков – режим выгрузки стилей и кода. Бесплатной стартовой версии хватает для большинства задач.
Axure RP
Этот инструмент берут, когда нужно прорабатывать очень сложную логику. Скажем, банковское приложение или CRM-систему с десятками сценариев. Axure позволяет прописывать ветвления, условия, работу с данными. Интерфейс при этом довольно простой – поизучаете минут пятнадцать и уже соберете несложный макет.
Sketch
Редактор дает много возможностей для детальной проработки интерфейсов, умеет делать интерактивные связки, хорошо стыкуется другими сервисами. Плагинов тоже хватает. Минус – есть версия только для macOS.
Adobe XD
Редактор от Adobe, который хорош для интерактивных макетов. Красиво анимирует переходы, дружит с Photoshop и Illustrator. Но разработчик фактически забросил развитие XD, плюс компания ушла с нашего рынка и купить новую лицензию официально нельзя.
Framer
Здесь можно делать сложную анимацию. Логика управления похожа ту, что в Figma, а импортировать файлы можно напрямую. Подходит для презентационных кликабельных макетов, в которых важны плавные движения и эффекты.
Proto.io
Облачная платформа, на которой собирают сложные сценарии без кода. Внутри много готовых шаблонов под разные задачи. Полученную ссылку легко отправить на тестирование в специальные сервисы – реальные люди будут тыкать прототип и записывать экран.
Pixso
Платформа, позиционирующая себя как полноценная замена Figma. Умеет импортировать файлы из Figma и Sketch. Есть библиотека компонентов, настройка навигации, анимация, совместная работа. Многим пригодится встроенная нейросеть для генерации картинок и возможность скачать код прототипа в формате CSS.
Webflow
Отечественный сервис, позволяющий делать детальные прототипы. Черновик можно будет превратить в работающий сайт без кода, но без понимания HTML и CSS все равно не обойтись. Есть два режима приложения – для дизайнера и для редактора. В библиотеке десятки шаблонов, есть возможность подключить Вордпресс как CMS. Есть Free-версия и платные тарифы.
Tilda
Популярный конструктор, который подходит и для прототипирования сайтов. Но здесь своя специфика. Вы пошагово собираете кликабельный макет на живой платформе, используя готовые блоки. Это быстро, но не очень гибко. Бесплатный план есть, но с ограничениями. Подписку можно оплатить российской картой.
Лучший инструмент – тот, который вы освоили. Можно нарисовать отличный прототип даже в PowerPoint, если умеете. Но работая в Figma вы сэкономите кучу времени.
Хотите слить проект? Совершите любую из этих ошибок
Кажется, что главное в прототипе сайта – красиво расставить блоки и кнопки. Кажется, что lorem ipsum никому не мешает. Кажется, что если мама все поняла, то и пользователи поймут. Кажется... На самом деле эти «кажется» опаснее, чем вы думаете. Давайте разберем восемь ошибок, из-за которых макет веб-сайта часто оказывается бесполезным.
1. Полагаться только на свою фантазию
Вы садитесь рисовать свой гениальный вайрфрейм, даже не посмотрев, как устроены конкуренты. Но зачем придумывать то, что уже работает? Вы не только теряете время на решения, которые уже кто-то проверил, но и рискуете повторить чужие ошибки. Перед тем как открыть инструмент для прототипирования сайтов, откройте браузер и изучите хотя бы три-пять вариантов из вашей ниши. Не копируйте, но учитывайте чужой опыт.
2. Откладывать контент на потом и использовать текст-заполнитель
Вы расставили блоки, накидали структуру, а внутри написали «здесь будет текст», «здесь будет картинка» или вставили lorem ipsum. И все вроде красиво. А потом приходит настоящий контент. И оказывается, что заголовки в два раза длиннее, а фотографии имеют другое соотношение сторон. Весь аккуратный прототип превращается в кашу. Лучше либо дождаться реальных текстов и изображений до старта прототипирования сайта, либо хотя бы договориться с заказчиком о примерных объемах. К примеру, заголовки не длиннее 60 символов, описания – не больше трех строк.
3. Думать только о десктопной версии и делать прототип в одном размере экрана
Вы сделали красивый прототип сайта для широкого экрана. А потом кто-то открывает сайт на телефоне, а там микроскопические кнопки, меню не открывается, текст вылезает за края, навигация становится неудобной. Игнорировать адаптив – значит терять половину аудитории. Не обязательно сразу рисовать все экраны для телефона на этапе создания макета, но хотя бы прикиньте, как ваша структура сожмется на узком экране. А лучше – создайте отдельный адаптивный прототип параллельно с десктопным.
4. Пытаться уместить все и сразу на одном экране
Вам кажется, что все важные элементы должны быть на виду. Но так пользователь ничего не увидит – его взгляд мечется, он не понимает, что главное, а что второстепенное. В итоге он не находит нужное, и уходит. Заранее определите приоритеты. Что пользователь должен сделать в первую очередь? Кнопка «Купить» важнее блока «Мы на карте». Заголовок важнее сноски. Вычеркивайте все лишнее без жалости. Если без какого-то элемента можно прожить – уберите его подальше или вообще удалите.
5. Прорабатывать только правильный путь пользователя
Вы проработали идеальный сценарий: счастливый пользователь заходит, находит нужную кнопку, заполняет форму идеальными данными, получает результат. Красота. А что будет, если он введет неверный пароль? Если пропустит обязательное поле? Если он нажмет не туда? В реальной жизни пользователи постоянно ошибаются. Поэтому в прототипе сайта обязательно прописывайте сценарии с ошибками. Проработайте хотя бы основные случаи.
6. Гнаться за визуальной красотой и детализацией на ранних этапах
Вы добавили в прототип сайта все возможные анимации, плавные переходы, тени, градиенты. Прототип выглядит как готовый дизайн, но на него его потратили в три раза больше времени. И когда потребовались правки, переделывать все это хозяйство оказалось долго и мучительно. Лучше создать простой кликабельный макет веб-сайта без сложных анимаций. Быстро, дешево, легко переделывать. Главный принцип: сделал, показал, получил обратную связь, поправил, пошел дальше.
7. Тестировать прототип на кто не является вашей целевой аудиторией
Вы показали прототип сайта маме, программисту и дизайнеру. Все сказали, что все отлично, красиво и понятно. Вы успокоились и отдали в разработку. А потом сайт выходит в люди, и реальные пользователи ничего не понимают. Потому что мама никогда не покупала авиабилеты онлайн, программист мыслит не как обычный человек, а дизайнеру все равно красиво.
Найдите нескольких реальных пользователей. Сформулируйте четкие задачи: «Найди, где тут кнопка регистрации», «Сравни два тарифа и выбери подходящий», «Оформи заказ, но введи неверный номер телефона». Посмотрите, где человек спотыкается, что его сбивает, какие вопросы возникают. И не защищайте свой прототип – вы проверяете его, а не рекламируете.
8. Делать один вариант и закапываться в детали
Вы сделали один вариант прототипа, вроде бы неплохой. А могли бы за то же время набросать три-пять разных структур и выбрать лучшую. Вместо этого вы залипли на мелочах – цвете кнопки, шрифте заголовка, отступе между блоками. Скорость итераций убита, прототипирование сайта потеряло смысл. Всегда пробуйте разные варианты. Сделали три эскиза главной страницы сайта, показали пятерым пользователям, один вариант явно победил – отлично. Остальные выкинули и пошли дальше. Скорость итераций – ваше главное преимущество.
Можно начать разработку без прототипирования сайта. Можно сразу уйти в дизайн, а потом в верстку. Можно надеяться, что «и так договоримся». Но это почти всегда заканчивается переделками, конфликтами и перерасходом бюджета. Так что не торопитесь. Начните с черновика. Нарисуйте на бумаге, в Figma, в любой программе – но нарисуйте. А если нет времени сделать прототип самому или не доходят руки – закажите. Мы сделаем для вас прототип, который закроет все вопросы еще до старта разработки.