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