Прототипирование.

Всем привет! Меня зовут Наталья и я — Product / UX / UI Designer в веб студии и на аутсорсе.

Сегодня я хотела бы поговорить на тему прототипирования в веб-дизайне.
Итак, все мы уже понимаем, что прототипировать нужно. Но как правильно это делать?
В нашей компании прототипами занимается маркетолог. Но, когда я беру заказы на аутсорсе, я создаю прототипы сама. Это всегда упрощает процесс согласования. Есть множество программ и сервисов для прототипирования. У каждого свой выбор. Я делаю прототипы в Фигме. Потому что так удобнее переходить на следующий этап — дизайн.

У меня есть несколько правил для моего идеального прототипа:

  1. Я стараюсь делать максимально просто и прозрачно.
    Я не загромождаю прототип лишними деталями. Всегда смотрю от чего можно избавится, что можно упростить. Никогда не делаю сложных блоков, в которых располагается много различных по смыслу функций. Такие блоки необходимо разделять. Это приведет нас к функциональному и понятному дизайну.
  2. Я не использую элементы дизайна.
    Весь дизайн держим и продумываем пока в голове. Не нужно стараться произвести визуальное впечатление на клиента прототипом. Нет необходимости прорисовывать кнопки, иконки или подбирать шрифты на этом этапе. Это может отвлекать заказчика от сути и основной функции прототипа. Это не то что нам нужно обсудить сейчас. И мы можем упустить важные моменты и перейти на обсуждение дизайна.
  3. Я не добавляю фотографии в прототип.
    На этапе прототипирования мы не можем качественно подобрать фотографии, которые в дальнейшем будут хорошо вписываться в дизайн. Но если клиенту понравятся фотографии или рисунки в прототипе и он согласует их, то в дальнейшем мы можем столкнуться с проблемами. Например, данные фотографии не будут вписываться в общий стиль сайта. Или, наоборот, заказчик не будет впечатлен фотографиями (не та тематика, не нравится стиль, плохое качество фотографий …), впечатление испорчено, и прототип может быть не согласован.
  4. Я не использую цвет.
    Прототип — это далеко не окончательный дизайн сайта. И использование цвета так же может сработать против нас. Первое, видя цветные блоки и элементы, клиент будет акцентировать внимание на них, а не самой структуре. И вместо обсуждения функционала, мы можем начать обсуждать цветовые решения и колористику дальнейшего макета. Но, мы это делаем на других этапах. Второе, может получится и так, что клиенту не понравятся цветовые сочетания в прототипе. И он может не согласовать прототип. Хотя это же цветовое решение могло бы быть удачным уже в дизайне.
    Мое мнение — никаких цветов на этапе прототипирования. Черный, белый, серый. Дизайн пока только у нас в голове.
  5. Максимальная работа с текстом.
    А вот с текстом я стараюсь поработать максимально. Продумать заголовки, текстовые блоки, максимальное количество строк в текстовых блоках. Но, так же не забываем, что в дальнейшем тексты могут меняться и мы должны это учитывать. Продумать, что будет, если текста будет больше или меньше. Сайт должен быть живым. Это позволит нам более грамотно выполнить дизайн.
  6. Кликабельность прототипа.
    В Фигме есть возможность сделать переходы на страницы сайта кликабельными. Вот это очень нравится заказчикам. И всегда производит нужное впечатление. Клиент начинает понимать, как все будет работать. Это улучшит наш ux, т.к. и мы можем увидеть какие-то недоработки и устранить их на этом этапе.
  7. Четкая структура и функциональность
    Что бы в дальнейшем сайт или приложение получились именно такими, нам необходимо вытянуть из клиента максимум информации, а это бывает не просто. Нам нужно знать, какие шаги будет совершать пользователь на сайте, и как мы можем это улучшить. Для улучшения ux у нас не всегда есть бюджет и время для долгосрочных исследований. И приходится пользоваться простыми способами. Чаще всего, я представляю себя на месте пользователя или разговариваю с возможными пользователями и стараюсь понять их логику.

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

Всем удачи! Надеюсь мои мысли пригодятся и помогут вам)) 😘😘

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Natali Haddadi

Natali Haddadi

Senior Product / UX / UI Designer

More from Medium

An American’s Love Letter to Canada’s Strange Advance

Ironhack Prework: Citymapper & It’s Efficiency for the US_Challenge 1

Returnal — She Only Ever Talks to Herself

My Youth is Yours: a euphoric nostalgia from Heartstopper