Когда у вас есть логическая схема и детализированные вайрфреймы, можно приступать к финальному дизайну макетов, который будет проверяться на пользователях.
1
Карта сайта
2
Информационная архитектура
3
Вайрфреймы и логическая схема
4
Макеты
5
Прототипы
Но в случае работы с конструкторами сайтов собирать финальный макет в каком либо из дизайнерских инструментов особого смысла не имеет.
Почему?
Для того чтобы реализовать кастомный дизайн внутри конструктора сайта необходимо достаточно сильно прокачать свой навык работы в этих самых конструкторах. Этот навык нарабатывается в течение нескольких месяцев, и по факту после того как вы им овладели то вы уже смело можете продавать свои услуги по конструированию сайтов.
Но если у вас нет нескольких месяцев, то этот этап можно смело пропустить и воспользоваться уже готовыми шаблонными блоками, которые сразу будут адаптированы и под мобильные устройства.
А это невероятно важно, потому что сейчас в мире в среднем 70% трафика приходит именно на мобильную версию сайта. Скорее всего первая точка касания с вашим продуктом будет происходить в мобильной версии сайта, поэтому необходимо уделить ей пристальное внимание.
По факту то что вы соберете в конструкторе, будет легко в случае чего поменять, поэтому и относиться к таким страницам можно также как к макетам.
Если же вы собираете полноценный продукт, который будут разрабатывать программисты, или который невозможно реализовать на конструкторах то макеты вам нужны.
Там содержится важная информация, которой нет в вайрфреймах: - Точные шрифты, начертания и текста - Картинки, иконки - Цвета - Отступы и расстояния до элементов - Сетка и т.д.
Все это нужно для того чтобы в финале после разработки у вас получился результат максимально похожий на дизайн. Идеи для реализации макетов можно найти на двух крупных ресурсах: Dribbble Behance