Как называется такой дизайн? Как научиться правильно верстать такие макеты?
Называется инструмент Timeline. Ниже примеры того как можно делать на Bootstrap:

snippet

Развлекайтесь.
если задача сверстать 1:1
0. этот скрин кидаете бэкграундом (размер точно в пикселях) на body, выравниваете его как вам надо по краям
1. Вытаскиваете из рисунка все тексты (заголовки и блоки) и верстаете страницу дивами, вкладывая в них H2(numbers), H3(titles) и P(параграфы) == размерами шрифта и отступами регулируйте максимальное совпадение (перекрытие) бакгроунда вашими блоками с текстом(заливка у блоков прозрачная, чтобы видеть нижний скрин). 
2. Отделяете на скрине графику от текстов, тексты удаляете (в фотошопе например), и кладёте получившееся также бэкграундом вместо первоначального скрина
3. передайте текстам цвета
Готово

если стоит задача адаптивности, то бэкграунд нарезайте на части, (целыми кусками, не перерезая линии) и кидайте их бэкграундами в дивы

лучше освоить любую векторную прогу и переводить растровые рисунки в вектор, далее в SVG, с ним вам будет удобнее работать