Прототип сайта: как создается, какими инструментами

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

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

Что собой представляет прототип сайта

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

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

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

Последовательность действий здесь следующая:

1. брифинг;

2. согласование с клиентом агрегированных требований к проекту;

3. координация с заказчиком основы прототипа, его структуры;

4. согласование идеологии дизайна;

5. верстка сайта;

6. тестирование;

При разработке самой простой версии web-сайта – лендинга – его прообраз с текстовыми пояснениями автоматически представляется как техническое задание для веб-дизайнера.

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

Зачем прототип сайта нужен заказчику и разработчикам

С помощью прототипирования решается сразу несколько насущных задач:

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

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

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

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

Как правило, изначально заказчик не представляет, как должен выглядеть его сайт. И свои пожелания он формирует крайне расплывчато: «Есть желание продавать через интернет». Все остальные параметры и функциональные особенности характеризуются мерилом «нравится / не нравится» (или даже еще проще – «хорошо/плохо»). Очень часто из-за этого разработчики не могут найти общего языка с заказчиками, и между ними разгорается конфликт.

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

Прототип – это наиболее эффективный инструмент разработчиков, и вот почему:

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

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

• Формирование web-прототипа сродни созданию макета. Еще перед тем, как будут готовы финальные результаты, разработчики могут продемонстрировать заказчикам, как их сайт будет выглядеть, и что полезное с его помощью можно будет делать. А если не понравится, то все можно будет быстро и дешево переработать.

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

• Создается визуальная картинка того, как будут выглядеть страницы web-проекта.

• Наличие прототипа снижает требования к планированию. Теперь его не нужно проводить досконально и точно. Зачем? – Ведь можно все поправить по ходу.

• Разработчики с помощью прототипа эффективно страхуют себя от произвола заказчиков, склонных менять свои требования по нескольку раз на дню. Корректировки вносятся очень легко и быстро – останется только должным образом их администрировать (чтобы потом заказчики не говорили, что им этот вариант не демонстрировался).

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

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

• Прототип позволяет понять реакцию пользователей на функциональную основу web-проекта (без дизайнерских примочек, которые подчас скрывают ущербность полезности ресурса).

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

  

• Прототип – это легко создаваемый каркас, он же – наглядный план будущей площадки в Сети.

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

• Создание web-ресурса с использованием прообраза значительно снижает количество ошибок при верстке.

• Использование виртуального каркасного плана разработки позволяет вовлечь клиента в процесс создания сайта на любом этапе.

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

Утверждение прототипа выгодно всем: заказчик будет уверен, что получит то, что ему нужно в соответствии с его ви́дением, а разработчик – то, что его усилия не будут перечеркнуты взмахом пера капризного клиента со словами: «Все не так!»

Проблемы, которые решает прототип сайта

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

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

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

   Такой винегрет существенно снижает количество заявок – посетитель ресурса просто не понимает, как сделать заказ. А исправляется эта болезнь как раз на этапе конструирования прототипа.

3. Нет концептуальной идеи. Это системная проблема, решить которую непросто. Ответственными за ее устранение являются вовсе не дизайнеры или программисты, а непосредственно заказчик, который путанно излагает общий замысел будущего ресурса. Как правило, это следствие того, что не были получены ответы на следующие вопросы:

   • Для продажи чего создается сайт?

   • Кто является целевым покупателем?

   • Что, по мнению этой группы людей, должно быть визуализировано на сайте?

   Прототип позволяет увидеть концептуальный вакуум с самого начала процесса проектирования (и исправить эту проблему).

   

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

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

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

Виды прототипов сайта

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

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

По глубине проработки деталей различают прототипы:

• с низкой детализацией;

• с качественной графикой (конкретизация высокая).

По возможности внесения корректив онлайн выделяют:

• статичные прообразы, которые сделаны в виде в виде изображения на плоскости;

• интерактивные проекты прототипов сайтов — с гиперссылками, рабочим слайдером, выскакивающими «менюшками» или всплывающими формами и т. п.

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

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

На английском языке «prototype» в web-дизайне означает макет, который можно реально «прокликать». В русском языке под этим понятием подразумевают пока только схему сайта (то, что в английском языке называется «wireframe»). Так что при международном формате взаимодействия разработчиков вполне возможна путаница в терминах. Помимо этого, существует еще несколько синонимов прототипа: мокап и скетч. Представляется разумным разобрать суть данных терминов подробнее.

Скетч

По-английски «скетч» – это набросок. В быту под этим словом подразумевается рисунок, созданный от руки (обычно на бумаге). Скетч делают для того, чтобы, не теряя времени, визуально отобразить внезапно пришедшую в голову креативную идею. Это бывает крайне полезно во время, например, мозгового штурма, как некий промежуточный результат заседания. Здесь не нужна излишняя детализация – только идея в общих чертах.

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

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

Разработчикам в данном случае остается только соотнести задумку клиента с реальными возможностями и, при наличии последних, откорректировать ее, а если такое сделать нельзя, то предложить собственное решение, похожее на то, что продемонстрировал клиент. Вероятность одобрения поправок в данном случае очень близка к 100 %.

Вайрфрейм (Wireframe)

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

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

Мокап (Mockup)

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

Вот перечень того, что должно быть отображено в мокапе:

• постраничный план;

• готовое текстовое наполнение;

• схема расположения элементов;

• пояснения, как работают те или иные функциональные блоки;

• референсы для изображений и типографики.

Живой прототип

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

Какой же тип выбрать?

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

Пошаговая инструкция разработки прототипа сайта

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

1. Формулировка и постановка целей

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

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

   • электронная коммерция (формирование заказов) — нужно создавать интернет-магазин;

   • привлечение клиентов в сфере консалтинга — сайт по продаже услуг (корпоративный);

   • вывод нового продукта на рынок, презентация — лендинг;

   • продвижение товара/услуги — продающий одностраничник;

   • формирование потока лидов — информационный сайт, блог;

   • презентация компании — корпоративный веб-ресурс;

   • информирование целевой аудитории — лендинг, визитка;

   • повышение узнаваемости бренда — сайт-представление компании.

   

2. Формулирование и отстаивание гипотез

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

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

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

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

   

   Еще один пример: предположим, идет разработка интернет-магазина. Давно известно, что чем больше полей, тем менее охотно покупатель их заполняет. Более того, это во многом отпугивает посетителей – они просто не хотят связываться с такой площадкой. Конверсия при этом значительно снижается. Выдвигаем гипотезу: двухшаговое заполнение формы способствует росту заявок – увеличению конверсии. Итак, на первом этапе у нас будет 2 поля: имя и номер телефона; на втором – только одно: адрес доставки.

   На основании этой гипотезы производится верстка структуры сайта (до дизайна здесь еще далеко, но результаты проверки гипотезы коренным образом на него воздействуют).

3. Исследование

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

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

4. Создание скетча web-проекта

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

   Теперь о дизайне: воплощение эскизных задумок начинается с зарисовок идей. Здесь как раз основным инструментом является скетч. Цель – создать «пространственную модель» сайта, которая позволит распланировать расположение объектов в виртуальном пространстве ресурса. Точность здесь не нужна, скорей востребована скорость, а что может быть быстрее карандашных зарисовок?

   

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

   Последовательность одобрения такова: сначала первые наброски, эскизы, которые поддерживают участники команды разработчиков. Они же должны иметь возможность вносить правки. Затем – одобрение на уровне проект-менеджера. Каждый раз правки должны быть оценены и учтены в следующей версии дизайна.

5. Оцифровка скетча и добавление деталей

   После создания нескольких скетчей и отсечения всех не устраивающих версий, следует довести до ума те, что кажутся наиболее подходящими. Нужно создать высокоточные прототипы (желательно несколько штук). Здесь не важно, что используется: Figma или Sketch –конструируем Lo-Fi-эскизы.

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

   

   Wireframe kit – это набор готовых шаблонов и инструментов для web-дизайна при прототипировании интерфейса создаваемого сайта. Вайрфрейм-кит лучше всего подходит на ранних этапах создания прототипа – он сильно экономит время. По мере набора опыта разработчик формирует личную библиотеку таких шаблонов интерфейса – это позволяет создавать эскизы модульно.

6. Формирование стиля и виртуальных образов с учетом бренда

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

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

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

5 сервисов для прототипирования сайтов

Раньше web-дизайнеры делали отрисовку страниц будущего сайта в Photoshop. Использовались и другие редакторы. В конце концов, некоторые элементы создавались даже в Paintе. Однако это было не очень удобно. В неприспособленных сервисах весьма сложно двигать блоки, изменять их так, чтобы это не повлекло крушение связанных с ними деталей, осуществлять присоединение видеоконтента. Также были сложности и с пропорциями. Поэтому очень скоро появились специализированные программы для создания прототипа сайта. Некоторые из них:

Balsamiq Mockups

Этот сервис создавался специально для low-fidelity-прототипов сайтов. Приложение имеет интуитивно понятный интерфейс и является весьма простым в освоении. Стоит только активировать сервис, и мастер сразу же запросит, какой именно прототип требуется создать: для сайта, приложения или же иного сервисного web-клиента. Также с помощью Balsamiq Mockups можно создавать и накапливать собственные шаблоны.

Ниже перечислены дополнительные возможности этого сервиса:

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

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

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

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

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

Сервисная демоверсия, как обычно, предоставляется бесплатно, так что все особенности программы можно будет оценить перед тем, как платить за нее деньги. К слову, полный однопользовательский вариант обойдется в $ 79 и $ 379 – для компании из 5 юзеров.

Moqups

Данное широко известное в узких кругах приложение позволяет создавать прототипы как low-, так и high-fidelity, а также майндмапы (описания функций для программистов). Последнее дает возможность непосредственно указывать, что в данном месте, например, предусматривается параллакс-эффект, а где-то еще – прокрутка с последовательной прогрузкой. Создать весь этот функционал позволили возможности HTML5, на основе которых и создано данное приложение.

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

Вот его прочие возможности:

• Наличие банка с более чем 60 единицами готовых шаблонов. Кроме того, все они еще и регулярно обновляются.

• Присутствует возможность экспортировать созданный элемент (или даже весь прототип) в различных форматах (в том числе в PDF).

• Адаптация к любым параметрам делает возможной интеграцию сервиса с другими приложениями (даже если дизайнер загрузит обычный сканированный набросок).

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

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

Wireframe.CC

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

Вот входящие в рассматриваемое приложение опции:

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

• Стилистика приложения сходна с Balsamiq: черно-белые заготовки для изображений, аутентичные тексты и кнопки.

• Установленные элементы перемещаются по экрану простым движением мышки.

• Здесь также можно на полях добавлять комментарии о функциональности.

А вот возможности экспорта у создаваемого проекта отсутствуют. Зато его можно сохранять и пересылать для последующего использования. Резюмируя, следует отметить, что основными преимуществами приложения являются интуитивная понятность и доступность.

Axure RP

Axure RP для создания прототипов web-ресурсов – это то же самое, что Photoshop для создателей компьютерной графики. ПО обладает мощнейшим движком, с помощью которого можно создавать скелеты и наполнения даже для очень сложных интернет-ресурсов. С помощью этого приложения можно прорабатывать любые макеты (даже high-fidelity) с высокой степенью детализации. После такой деятельности нужно только переместить созданный макет на сайт.

Возможности здесь следующие:

• При создании прототипов отслеживаются компьютерные и мобильные экраны – сразу же можно сделать выводы об адаптивности будущего ресурса. Ведь до 80 % всего трафика приходит именно через смартфоны.

• При помощи инструмента «Перо» графические элементы и детали прототипа сайта можно нарисовать с нуля.

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

• Специальное меню «Interactor» позволяет производить настройку различных эффектов: стиль появления объектов, прокрутку и др.

• Меню «Properties» дает устанавливать события на сайте по различным аргументам: по клику или по наведению мыши, при загрузке страницы. Это весьма полезный инструментарий формирования полноценной интерактивности.

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

Стоимость самой продвинутой версии - $ 352; есть и пробный период – 30 дней.

Figma

Это классика web-проектирования. Любой специалист в данной сфере (дизайнер, программист и даже специалист в области SMM и SEO) владеет данным инструментом на уровне advanced в обязательном порядке.

Сервис работает в облачном режиме и предоставляет пользователям доступ к своим ресурсам… условно бесплатно. Это означает, что мелкие пользователи (например, спайка из двоих разработчиков) могут пользоваться сервисом бесплатно. Но вот крупным компаниям придется раскошелиться.

Возможности:

• Сервис представлен как в виде приложения для смартфона, так и в десктоп-версии. Интерфейс простой и интуитивно-понятный.

• Разобраться с кнопками, пресетами и опциями получится быстро (в течение не более 2 часов).

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

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

• Режим «Prototype» добавляет интерактивности формируемому прототипу. Например, сделать так, чтобы по клику можно было перейти к нужному блоку или же открыть галерею.

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

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Рекомендации по созданию прототипа сайта

Перечислим их:

1. Начало. Создаем заголовки, некоторый объем текстов под ними и пару кнопок действия (основная — «Заказать», вспомогательная — «Изучать»). Чтобы не забыть, в шапке следует упомянуть оригинальную идею, в тексте же следует отражать принцип выдачи контента.

2. Пока что не нужно отвлекаться на цвета – создаем макет черно-белым.

3. Создаем сценарии, которые должны соответствовать бизнес-целям.

4. Делаем сетку. Это инструмент для организации материала на пространстве сайта.

5. Контент. Для наполнения сетки нужно задействовать максимально приближенные к реальности по размерам картинки и фотографии. При недостатке текста позаимствуйте его (содержание на данный момент не имеет значения).

6. Компоненты. Не следует специальным образом изобретать новые, не опробованные элементы управления. Лучше воспользоваться знакомыми образами.

7. Корректировки. Во время прототипирования нужно стараться совершать как можно больше редакционных действий. В последующем коррекции будут даваться все сложнее.

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

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

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

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

Автор статьи

Анастасия Гурьева

Руководитель интернет-проектов

Последние статьи этого автора:

• Google инструменты: шпаргалка для бизнесмена в Сети
• Продвижение услуг в Интернете: лучшие способы и фатальные ошибки
• Какие способы продвижения интернет-магазина самые эффективные

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB