Как создаются современные прототипы сайтов?
Сергей, вас раскачает  Figma.
Без лишних слов:Фишки фигмыОбзор фигмы
Все то, что вы спросили, там есть. В одном месте.
В умелых руках (понимание формы и пропорций, цвета, композиции, типографики) такие программы просто восхитительны. 
p.s не углубляйтесь, попробуйте фигму в течение нескольких часов, если вам покажется, что этого мало, пробуйте скетчи и т.д
Скетч или Адоуби ХД