Прототип и прототипирование в веб-дизайне. Основные правила.

Что такое прототип в веб-дизайне?

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

Почему вначале создается прототипы?

Экономия времени. Макет создается в разы быстрее, что позволяет сразу увидеть «черновую» версию интерфейса;
Быстрое тестирование. Многие сценарии в интерфейсе будут содержать ошибки и неточности. Гораздо быстрее вносить правки в «сырой» макет, чем в конечную версию;
Нет прикрас. Об этом мало кто говорит, но когда мы делаем черно-белую версию дизайн-макета, без изображений и иконок, то мы можем с бОльшей вероятностью найти неудачные визуальные решения в плане оформления композиции. Когда же в интерфейсе размещены красивые картинки и иконки, то они могут создать эффект красивой обложки при плохом содержании.

Сервисы все?

Если вы начинающий UX/UI дизайнер, то прототипы вы будете создавать параллельно с созданием дизайн-макета в Фигме. Это необходимый минимум, который позволит заказчику посмотреть дизайн-макет, а также пройти по основным сценариям. Более продвинутые дизайнеры создают прототипы в сервисах Proto, Marvel и др.

Обновление: если вы находитесь в России, то большинство сервисов (на момент зимы 2024 года) скорее всего будет для вас недоступны. Поэтому я вам рекомендую сосредоточиться на оттачивания навыков прототипирования в Фигма.

Принципы создания прототипа

Прототип рисуется в черно-белом формате либо в оттенках серого. Об этом мы говорили выше.
Все отступы, расположение и размеры элементов рисуются в “окончательном” варианте, как-будто вы этот макет сдаете прямо сейчас для разработчиков.
Внедряются шрифты из визуальной концепции, если она у вас есть. Если нет, то рекомендую создать ее перед разработкой прототипа.
Под иконки и изображения делаются прямоугольные заглушки. Причина та же: мы должны быстро разметить интерфейс и протестировать грамотность прохождения сценариев. Если у вашей компании есть заготовки по иконка, то ТОЛЬКО в этом случае вы можете использовать их в своей работе.

Использование сеток

На этапе прототипа нужно использовать сетки. Какой формат и размер использовать — ваше предпочтение или предпочтение команды разработки. Если вы разрабатываете обычный многостраничный сайт, то я вам рекомендую использовать шаблон Bootstrap . Это очень популярная система сеток, которую понимают большинство дизайнеров и верстальщиков (разработчиков). Советую вам начать именно с нее.