December 19, 2021

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

Представь себе ситуацию: вся подготовительная работа по проекту готова и настало время дизайнить. А что конкретно делать?

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

Делаем скетч

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

Выглядит это обычно вот так:

(Можно рисовать от руки, или найти множество сервисов в гугле)

Что же нам делать со скетчем ?

— Тестировать его с командой, проверять функционал и искать ошибки

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

Можно ли обойтись без скетча ?

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

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

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

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

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

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

  1. Сетку
  2. Размеры основных элементов взаимодействия
  3. Размеры разных текстовых начертаний

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

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

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

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

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

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

Подведём итоги сделанного:

скетч -> прототип -> дизайн

Нарисовали скетч:

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

Сделали прототип:

  1. Получили возможность полноценного тестирования интерфейса
  2. Получили основу для создания дизайна

На основе прототипа создали дизайн

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

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