Этапы проектирования интерфейса
Представь себе ситуацию: вся подготовительная работа по проекту готова и настало время дизайнить. А что конкретно делать?
Сразу оговоримся: прототип нужен не везде и не всегда, однако при проектировании сложных интерфейсов без него не обойтись.
Делаем скетч
Скетч — зарисовка будущего интерфейса от руки для первичного тестирования юзабилити. На этом этапе мы не думаем о визуальной составляющей, только предполагаем функционал и удобное расположение элементов.
(Можно рисовать от руки, или найти множество сервисов в гугле)
Что же нам делать со скетчем ?
— Тестировать его с командой, проверять функционал и искать ошибки
На данном этапе будет сложно тестировать интерфейс на потенциальных пользователях, однако скетч очень поможет нам на следующем этапе
Можно ли обойтись без скетча ?
— Да, можно, однако составить детальный прототип без скетча будет труднее и займёт это больше времени. Чаще всего скетч не делают, думая, что это лишняя трудозатрата, однако делается он очень быстро, а возможные ошибки исправляются в нём гораздо быстрее чем в детальном прототипе.
Проверили с командой функционал и всё классно, вопросов нет ? Тогда можем переходить к следующему этапу.
Делаем прототип
Он потребуется нам для полной проработки механик и удобства при создании макета.
Используя наработки из скетча, создаём прототип.
Что нам нужно проработать:
Почему это нельзя сделать в макете ?
- Сетка может не подойти
- Сложнее работать с цветом, не имея на руках прототипа
- Может потребоваться дополнительное начертание, которое не подойдёт в сетку/композицию
Почему нужно использовать в макете все шрифты, размеры и тд? Потому что использовав один шрифт в прототипе и другой в макете, вы можете ошибиться с их размерами и что-то где-то съедет :)
Сделали прототип, а что дальше ?
Проводим юзабилити-тесты и утверждаем его. Главное здесь — убедиться, что логика полностью продумана, сетка сделана, типографика готова и вопросов больше нет. После этого можем переходить к дизайн-макету.
После создания прототипа, нам остаётся лишь разобраться с колористикой, сделать графику и добавить изображения.
Подведём итоги сделанного:
- Прикинули варианты расположения элементов, композицию
- Получили начальную возможность демонстрации работы интерфейса
- Обдумали логику
На основе прототипа создали дизайн
Скажу ещё раз: я не вижу смысла делать прототипы для лэндингов, корпоративных сайтов и небольших интернет-магазинов, ведь правки в них вносятся очень быстро, тестировать их проще и создание прототипа будет только лишней тратой времени, однако создать крупный и, главное, правильно работающий, проект без использования прототипов будет очень сложно :)
Если было полезно, можешь написать мне об этом и у меня появится больше мотивации делать такой контент :)