вот хорошая подборка бесплатных ресурсов для дизайнера: https://esputnik.com/blog/25-poleznyh-resursov-dlya-marketologa-i-dizaynera
Scetch и продукты Adobe (Photosho, Illustrator, XD) и HTML5 главные инструменты дизайнера в современном мире. Есть и интересные сервисы которые совмещают в себе все эти инструменты и предоставляются по подписке. Platforma Web Wireframe Kit один из них.
Обычно рисуют дизайн фотошопе, а верстают в блокноте (не в стандартном блокноте Windows, а в специальзированном, для программистов, например, Notepad++). Использовать визуальные редакторы часто не рекомендуют, так как они портят код.
Photoshop для веб-диза давно устарел. Лучше использовать Sketch, Figma или Adobe XD. Я лично пользуюсь Фигмой. Она значительно ускоряет мне процесс работы. Можно один раз создать свою дизайн систему и потом ее использовать и адаптировать по новые проекты - пара кликов - и ты перекрасил цвета во всем макете. еще пара кликов - и все обводки у полей ввода, чекбоксов, выпадающих списков стали толще, появились скругления у кнопок и т.д.