Этапы работы
Кнопка закрытия меню
Кнопка открытия меню

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

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

1 Сбор требований и анализ аналогичных решений

Для начала следует понять для чего создается продукт и какие проблемы компании и пользователей он должен решать. (можно составить use cases)

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

Линия для разделения абзацев

2 Анализ целевой аудитории

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

Всю целевую аудиторию лучше разделить на группы, они могут формироваться исходя из возраста, цели юзера и так далее. после из каждой группы формируется несколько портретов пользователей. Как заключительный тап можно выделить создание user story, благодаря которым будет легче понять их путь на сайте и требования к нему.

Линия для разделения абзацев

3 Функциональная диаграмма и карта сайта

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

Линия для разделения абзацев

4 Прототип

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

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

Линия для разделения абзацев

5 Тестирование

Проведение юзабилити-тестирования для наблюдения за пользователями, позволяет выявить проблемы и неясности прошлого этапа

Линия для разделения абзацев

6 Дизайн

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

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

В процессе создания дизайн-макетов важно создать визуальный стиль, который будет привлекать и удерживать пользователей. а после создания всех основных дизайн-макетов не стоит забывать про их адаптивные версии