Инструменты для создания макета сайта для новичков: чем отличаются и какой выбрать

Анна Гореванова

дизайнер группы разработки карты рассрочки «Совесть» (QIWI)

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

Photoshop/Illustrator

Удобны для создания растровой/векторной графики. Если вы хотите сделать красивый баннер для сайта, обработать фото под цветовую палитру сайта или нарисовать иллюстрацию, то эти инструменты самые подходящие. Но именно для отрисовки макетов сайта с его прототипированием и тестированием появились гораздо более удобные инструменты.

Photoshop | Illustrator

Canva/Crello

«Упрощённый фотошоп». С их помощью вы сможете составить несложные баннеры и визуалы для сайта, если не хочется разбираться с довольно объёмными продуктами Adobe.

Canva | Crello

Figma/Sketch/Adobe XD

Те самые «гораздо более удобные инструменты» для создания макетов (именно макетов) сайта. Они больше заточены под нужды проектирования и дальнейшей разработки, с возможностью быстро собрать и протестировать макет на пользователях, а также подготовить макет для вёрстки, правильно экспортировать графические элементы и т. д. Более того, в отличие от Photoshop, в Figma можно работать даже в браузере и поделиться ссылкой с заказчиком без пересылки тяжелых архивов.

Figma | Sketch | Adobe XD

Readymag/Tilda и прочие CMS

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

Readymag | Tilda