Что такое прототип в веб-дизайне?
Прототип в веб-дизайне – это облегченная версия дизайна интерфейса, когда в интерфейсе не используются иконки и изображения. А вместо них делаются прямоугольные заглушки (Мы рисуем черно-белые квадратики и прямоугольники).
Почему вначале создается прототипы?
- Экономия времени. Макет создается в разы быстрее, что позволяет сразу увидеть «черновую» версию интерфейса;
- Быстрое тестирование. Многие сценарии в интерфейсе будут содержать ошибки и неточности. Гораздо быстрее вносить правки в «сырой» макет, чем в конечную версию;
- Нет прикрас. Об этом мало кто говорит, но когда мы делаем черно-белую версию дизайн-макета, без изображений и иконок, то мы можем с бОльшей вероятностью найти неудачные визуальные решения в плане оформления композиции. Когда же в интерфейсе размещены красивые картинки и иконки, то они могут создать эффект красивой обложки при плохом содержании.
Сервисы все?
Если вы начинающий UX/UI дизайнер, то прототипы вы будете создавать параллельно с созданием дизайн-макета в Фигме. Это необходимый минимум, который позволит заказчику посмотреть дизайн-макет, а также пройти по основным сценариям. Более продвинутые дизайнеры создают прототипы в сервисах Proto, Marvel и др.
Обновление: если вы находитесь в России, то большинство сервисов (на момент зимы 2024 года) скорее всего будет для вас недоступны. Поэтому я вам рекомендую сосредоточиться на оттачивания навыков прототипирования в Фигма.
Принципы создания прототипа
- Прототип рисуется в черно-белом формате либо в оттенках серого. Об этом мы говорили выше.
- Все отступы, расположение и размеры элементов рисуются в “окончательном” варианте, как-будто вы этот макет сдаете прямо сейчас для разработчиков.
- Внедряются шрифты из визуальной концепции, если она у вас есть. Если нет, то рекомендую создать ее перед разработкой прототипа.
- Под иконки и изображения делаются прямоугольные заглушки. Причина та же: мы должны быстро разметить интерфейс и протестировать грамотность прохождения сценариев. Если у вашей компании есть заготовки по иконка, то ТОЛЬКО в этом случае вы можете использовать их в своей работе.
Использование сеток
На этапе прототипа нужно использовать сетки. Какой формат и размер использовать — ваше предпочтение или предпочтение команды разработки. Если вы разрабатываете обычный многостраничный сайт, то я вам рекомендую использовать шаблон Bootstrap . Это очень популярная система сеток, которую понимают большинство дизайнеров и верстальщиков (разработчиков). Советую вам начать именно с нее.
Разметка блоков по сетке
- Крупные блоки размечаем по сетке
- Средние — желательно встроить в сетку
- Мелкие — не обязательно