Прототипирование интерфейса для портала Svitmam.ua
Однажды я работал над большим порталом для интернет-сообщества Svitmam.ua. Моей задачей было собрать всю имеющуюся информацию, превратить её в прототипы основных страниц и передать это все программистам, и дизайнеру…
Сбор информации и формирование требований
Проект Svitmam.ua существует уже достаточно давно, и на опредленном этапе появилась задача сделать его более современным и удобным. До того как меня приласили в проект основная команда собирала информацию и анализировала ее около года. Фактически, после анализа появилось новое видение и описаны функциональные требования. Так же были прописаны основные пользовательские сценарии для основных типов пользователей.
Как я уже сказал выше, все это дает общее видение и примерное понимание как это все должно работать с точки зрения пользователя. Но что бы разработать прототипы нужно детализировать информацию, разбивать ее по экранам, уточнять функционал и наполнение.
Структуризация, детализация функционального и информационного наполнения
Для начала была определена общая логическая структура портала, проговорены все связи между разделами и общая логика работы с точки зрения пользователя.
Затем я начал описать все сценарии в виде одной большой структуры с помощь Метода скоростной фиксации сценариев, но быстро осознал, что в итоге получается громоздкая схема с которой сложно и неудобно работать.
После этого я начал детализировать функционал и наполнение отдельно для каждого раздела, это оказалось намного удобнее.
Таким образом у меня получилось несколько документов для каждого раздела в котором были описаны функциональные требования и требования к контенту для каждой страницы.
Прототипирование
Когда все подробно описано в голове появляется подробная картина, понятны связи между элементами, как они взаимодействуют, на каких элементах нужно сделать акцент. Все это намного ускоряет работу над прототипом так как дизайнер не думает над содержимым страницы а направляет все усилия на проработку удобства восприятия информации и взаимодействия с сайтом.
Всего я проработал 131 экран, для прототипирования использовались одна голова, две руки, молескин, карандаш и Adobe Illustrator.
После проработки прототипа я сделал карты переходов по экранам для основных пользовательских сценариев. Это здорово помогает лучше проработать связи и выявить недоработки.
Вывод
Любую сложную работу нужно разделать на этапы, которые, в свою очередь, разделяются на более мелкие шаги.
Хочешь изучить UX/UI Design и научиться проектировать сайты и приложения?
Приходи на онлайн-курс, который помогает изучить методику и прямо во время обучения сделать проект для портфолио. Зписывайся на курс по ссылке 👉 https://hyperschool-digital-product-design.webflow.io/
