Берёшь готовый HTML-шаблон, похожий под требуемую реализацию проекта на последней адаптивной версии Bootstrap. Меняешь классы у блоков до достижения необходимой структуры новых блоков/страниц. CSS желательно редактируя сразу на SASS. После тестирования на кроссбраузерность(основа Chrome) Десктопной версии переходишь к адаптивному мобильному виду.
Всё время следуя правилу - Достаточно ли я чисто выполнил вёрстку данного элемента, не наделал ли я лишнего из-за недостатка знаний. Не делайте лишних блоков для оформления, используйте псевдоэлементы и CSS 3.
Если необходимо создать новую страницу(если вы отвечаете за дизайн также), то до вёрстки желательно сделать её динамический прототип на Axure, утвердить данную страницу с программистами, директорами и только потом верстать. Таким образом максимум придётся дорабатывать готовую страницу 1-2 раза, а не 10-20 раз. Следовательно экономия времени.
Дизайнер должен знать как верстаются элементы по сетке. Верстальщик должен знать дизайн, чтобы быть уверенным что дизайнер спроектировал качественный адаптивный дизайн. А вот верстальщик необязательно должен сразу становится фронтендом, то есть изучать сразу JS.
Если нет чёткого представления оформления элемента, добейтесь этого, иначе даже качественная вёрстка не будет полезна для проекта и возможно всю разработку данного элемента вы произвели впустую.
Чем больше знаний и опыта у специалиста тем меньше требуется ему времени на разработку элемента. Однако спешить не следует, необходимо следовать системному подходу, продумывать юзабилити заранее и начинать с прототипа, который строится от максимально эффективно(функционально) реализованной идеи.
Древовидное руководство по вёрстке) Рекомендую побольше почитать про "шаблонизацию", думаю, вы про это хотите узнать.
