Руководство по созданию прототипов веб-сайтов

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

Руководство по созданию прототипов веб-сайтов

Хотите иметь новый веб-сайт? Имеет смысл довериться творческой команде веб-дизайнеров и разработчиков, чтобы быть уверенным, что генерируемые идеи будут реализованы. Планирование и структурирование лежат в основе их реализации.

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

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

Хотите узнать больше о прототипах? Это краткое руководство поможет вам.

Откуда приходит вдохновение

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

Планирование содержания

Прототипирование включает 90% планирования контента. Первым шагом является определение характеристик пользователей. Кто является конечными пользователями?

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

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

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

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

Читать также:  От обмена к продаже

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

— Хорошо ли иметь динамические интерактивные компоненты?

— Будут ли включены ссылки на видео?

— Как будут работать эти ссылки?

— Будет ли список последних опубликованных материалов?

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

Выбор типа прототипа

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

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

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

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

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

Сотрудничество между всеми участниками проекта

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

Читать также:  4 важных решения в жизни предпринимателя

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

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

Добавление примечаний к прототипам

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

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

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

Точность прототипов не имеет существенного значения.

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

— Какие еще элементы вы хотели бы добавить в прототип?

— Изменили бы вы поток контента?

— Как вы находите фокус на различных элементах?

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

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

Читать также:  Отличный веб-дизайн

Использование обратной связи и решение вопросов по мере их возникновения

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

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

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

Использование возможностей отзывчивого дизайна

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

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

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

В заключение

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

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

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

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?