Как правильно верстать такие сайты?

В данном случае использовались изображение формата jpg, размером 2640 x 1440 и весом 1.53 МБ, которое воспринимается как фон, но по факту фоном не является :)
Поверх него векторный слой svg с размечеными областями (в качестве редактора можно юзать Inkscape). Собственно вся магия реализована при помощи JS баблиотеки Raphaël.
Комплект на проверку оказывается не сложный: файлы изображения и svg от дизайнера, остальная работа за фронтенд девелопером.

обычно вся картинка идет фоном, а на ней размечаются невидимые области-ссылки, при наведении на которые появляются дополнительные элементы (подсвеченные здания, этажи с включенным светом и т.д.) - вот эти элементы нужно отдельно запросить у дизайнера. еще обязательно уточните параметры резиновости/адаптивности и кроссбраузерность, чтобы потом не было вопросов. области для наведения произвольной формы можно задавать при помощи map-area, советую генерировать из картинки.

это обычная png картинка, сверху которой положен слой свг, в котором отлавливается hover и производится вся "магия"