Как быстро верстать сайт по psd/png/jpg эскизам?

Question

[Михаил]

Пытаюсь оптимизировать свою работу, делаю через css_hat и sublime, как делать еще быстрее?Читал на форуме, ребята пишут , что несколько страниц делают за день, а я за неделю почти.

Comments

[xmoonlight]

Читал на форуме, ребята пишут , что несколько страниц делают за день, а я за неделю почти.

На каком?

[Дмитрий]

1 что мешает писать так же?)
2 наработайте опыт и "библиотеку решений"
Штуки, которые нужно верстать полностью с нуля, встречаются не каждый раз. Чаще все более-менее стандартно. Поправить готовый блок к тому, что на макете, быстрее, чем сверстать его с нуля.
3 старайтесь работать с одним дизайнером.
Особенно хорошо, если у него наработаны свои типовые решения для дизайна. Но, даже если дизайн каждый раз будет кардинально разным, прочие мелкие штуки (структуру слоев, шрифты, то, как передает макет и тп) будет одинаковым. Это тоже поможет немного выиграть по времени.

[Nikolay S.]

Вдруг кому понадобится: Использую собственные сниппеты/плагины +
Avacode + Мой стек SublimeText3 :
aligment
all autocomplete
autofilename
bootstrap # Autocomplete
bracketHighlighter
BufferScroll
Color Highligter
ConvertToUTF8
DocBlockr
Emmet
Emmet Css Snippets
FileDiffs
GitGutter
JavaScript Completions
jQuery
jQuery Snippets pack
Material theme
Plain tasks
Scss
Scss snippets
SublimeLinter
SublimeLinter-php
trailingSpaces
Писал список немного давно, может быть что то уже устарело..

[ilya404]

принимать макеты только в Zeplin

Answer 1

[Александр Синицын]

Пытаюсь оптимизировать свою работу

Любая оптимизация начинается с замеров... в данном случае, затраченного времени.

Запускаете трекер и смотрите результат. Можете выложить тут, тогда народ будет знать что проседает и чем это ускорить.

Хотя если самая времязатратная операция - поиск ответов в интернете и ожидание ответов на тостере, то тут поможет только очень большое количество сверстанных проектов ))

Answer 2

[freeman0204]

Сайты давно уже нужно не верстать, а собирать. Avocode, bootstrap 4 лучше, сниппеты(создай несколько десятков блоков которые часто встречаются и подключай в нужный момент для этого юзай pug & scss). Ну и БЭМ глянь. Также для сборки юзай gulp. Больше копируй своего, и меньше пиши с ноля(как уже научишься норм верстать).

Answer 3

[Николай Колесниченко]

Emmet для sublime, препроцессоры sass/scss. Browsersync экономит немного времени.

Верстая по jpg эскизам особо не ускоришься :)

Answer 4

[Андрей Трошков]

Использую Marsy (похоже на avocode) https://vk.com/markupeasy для быстрого копирования текста и стилей и сравнения текста в адаптивных макетах. Бутстрап, less, pug, собираю gulp, вместо pixel perfect использую картинку сайта как фон и вешаю горячию клавишу. Подгоняю с помощью live style. Плагины для gulp, на сбор pu, less, и релоад страницы, такой минимум. БЭМ и прочее лично мне не зашли, мне проще в pug блок сделать и его подключать.
Также использую самописный плагин для sublime, парсит кусок html и выдаёт правила css для него, очень ускоряет.

Получается так:
Пишем костяк на pug, быстро копируют текст с Marsy, прогоняют через плагин получаю список провил, вставляют в css или less , раскидываю стили также копируя в один клик из marsy, открываю браузер включаю live style и фоновую картинку и уже там подгоняю по пикселям. А после проверяют страницу скриптом, на наличие дублей в стилях, удаляю лишнее прям там же. Открываю css удаляю пустые правила. Готово.

Marsy тоже моя наработка, если что спрашивайте.

Answer 5

[Дмитрий Pacification]

Держи, это самый лучший верстальщик в Украине
https://www.youtube.com/watch?v=tdRuZfZW99A

Answer 6

[Михаил Завалко]

Вон тебе целый плейлист с практикой! https://www.youtube.com/watch?v=qAygyAzLnp8&list=P...

Comments

[Дмитрий Pacification]

Клевый чувак! Обожаю его!

Answer 7

[wbrapist]

Помимо оптимизации нужно просто делать что-то быстрее, чтобы было быстрее. Тут ты можешь просто напросто упираться в предел своих возможностей, которые зависят от текущих навыков, которые, в свою очередь, прокачиваются практикой, например.

Или что-то тормозит тебя: какие-либо внешние факторы, или простое отсутствие концентрации, в связи с чем, порою (а может и почти постоянно) твоя производительность падает.

З.ы. Оптимизации тоже есть место быть, но далеко не факт, что виной всему является именно оптимизация (или же её отсутствие).

Answer 8

[Виталий Кузнецов]

Зависит от сложности.

В любом случае — унификация вёрстки, типа секции, сроки, колонки, блоки должна создавать «автоматически» нативно с одного взгляда на jpg-эскиз.

Вообще методология БЭМ очень помогает и личный опыт.

Я в день 1-2 лендинга верстал легко и просто.

Comments

[Виталий Кузнецов]

По рынку около 150к-200к₽ можно легко, зависит от канала продаж и объёма продаж.

Ведь скорость = деньги, так как погружения только в 1 проект. А если денег меньше — скорость ниже и количество проектов меньше.

В среднем вёрстка около 15к стоит, в месяц легко можно делать 10 проектов до 3 дней на исполнение.

Answer 9

[Сергей Левченко]

pug, stylus(или др.), gulp - как минимум

Answer 10

[neatek]

Использую: Emmet, Adobe Assets, Sublime, Мозг.

Анализ всего сайта перед началом работы позволяет ускорить процесс. Все размеры шрифтов, цвета, сами шрифты и прочее. Нужные размеры блоков, создают блоки в css и уже дальше собираю сайт весь. Получается намного меньше кода чем при использовании всяких там "Бутстрапов", которые ток грузят. И заранее знаю как сайт будет "складываться" под мобильный экран - это необходимо.