1) Начать создавать такой дизайн можно с иллюстрации в Ai, вот тут был уже вопрос по поводу таких иллюстраций
С помощью каких программ рисуют такие картинки? И тени и градиенты в Ai создаются.
вот пример урока:
https://www.youtube.com/watch?v=VAHV6FHtzpg
2) Далее чтобы создать дизайн веб-страницы, например в PS, нужно (по слоям, если это потребуется, или целую картинку) перенести картинки из Ai, фон рисуем в Ps, текст набираем в Ps, кнопку тоже в Ps и заливает градиентом. Сохраняем Jpg.
3) Скачиваем Mockup,
например тут , ноутбука и вставляем сохраненную картинку из Ps. Всё это тоже можно сделать в Ps.
4) Вот и получается все то, что на вашем примере :)
А еще есть метод проектирования такой Изометрии с тенями в 3D программах, а потом в PS это все разукрашивается:
https://www.youtube.com/watch?v=RPyrUI6s10w&featur...
Вот в программе GRAVIT Designer урок:
https://vitorials.net/how-to-create-isometric-illu...
https://www.youtube.com/watch?v=yLg0Gl0EyGc