Блог

Этапы прототипирования интерфейса

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

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


1)Делаем скетч

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

Выглядит это обычно вот так:
(Можно рисовать от руки, или найти множество сервисов в гугле)


Что же нам делать со скетчем ?
— Тестировать его с командой, проверять функционал и искать ошибки!
На данном этапе будет сложно тестировать интерфейс на потенциальных пользователях, однако скетч очень поможет нам на следующем этапе

Можно ли обойтись без скетча ?
— Да, можно, однако составить детальный прототип без скетча будет труднее и займёт это больше времени. Чаще всего скетч не делают, думая, что это лишняя время-затрата, однако делается он очень быстро, а возможные ошибки фиксятся в нём гораздо быстрее чем в детальном прототипе.

Проверили с командой функционал и всё классно, вопросов нет ? Тогда можем переходить к следующему этапу.

2)Делаем прототип

Он потребуется нам для полной проработки механик и удобства при создании макета.


Используя наработки из скетча, создаём прототип.


Что нам нужно проработать:

1)Сетку

2)Размеры основных элементов взаимодействия

3)Размеры разных текстовых начертаний


Почему это нельзя сделать в макете ?

  • Сетка может не подойти
  • Сложнее работать с цветом, не имея на руках прототипа
  • Может потребоваться дополнительное начертание, которое не подойдёт в сетку/композицию

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


Сделали прототип, а что дальше ?

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


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


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


Если было полезно, можешь написать мне об этом и у меня появится больше мотивации делать такой контент :)