Пример хорошего ТЗ/гайдлайна для вёрстки?

Question

[Василий Васильев]

Хочется вот в глаза увидеть что люди знающие считают хорошей(полной?) документацией для верстки(при ее наличии, разумеется) чего-либо. Чеклист, ссылки на примеры и прочие заклинания приветствуются.

Answer 1

[Сергей]

Лучше ТЗ верстальщику - макет. Все таки в этой профессии должна быть доля креативности и нужно удивлять клиента своими решениями. Если это не профессиональная студия из ТОП50 рейтингов, где описаны действительно необычные решения, обычно все ТЗ сводиться к пунктам вида "спасибо, кэп". Например - клик на иконкe гамбургера должен открывать мобильное меню, стрелки вперед/назад слайдера должны сменять слайды и т.д.

По критериям - у каждого свои понимания о том что есть хорошо и плохо.

Я руководствуюсь такими стандартами
https://docs.google.com/document/d/1bZyzlhBvR1luYW...

Answer 2

[xmoonlight]

Основные требования: здесь
Примеры стайл-гайдов: здесь

1. Требования к вёрстке: здесь, здесь, здесь, здесь
2. Как проверять качество вёрстки: здесь.
3. Как определять стоимость (трудозатраты) вёрстки одной унифицированной страницы: здесь.
4. Требования к дизайнеру: здесь и здесь.
5. Пример документации (генератор шаблона, Helix3 для CMS Joomla!): здесь
6. Готовые "скелеты" шаблонов HTML5 для начала вёрстки: простой (с поясняющими комментариями), www.initializr.com (ещё 3 простых) и максимально полный html5boilerplate.com.
7. Вопросы на вакансию верстальщика (front-end developer): здесь

Бонус по-теме: Turning Design Mockups Into Code With Deep Learning

Comments

[Василий Васильев]

Я не совсем то имел в виду. Общие тезисы "верстки по понятиям" мне и так известны. Интересует больше практическая часть взаимодействия заказчика-исполнителя.
"Какое у вас представление об идеально оформленном заказе на верстку?" если переформулировать иначе. Отдельный гайдлайн по типографике(высота строк, ширина символа, ...), оформление макета(цвета и эффекты интерактивных элементов на отдельных артбордах, ...), гайдлайн по именованию, пометки про микроформаты и т.д.
Ведь львиная доля заказов - это "вот, сделай как на картинке jpg/psd, а потом - поиграй шрифтами/цветами, а то что-то оно не такое как мне показывали". А ты сам ковыряйся и додумывай что там у дизайнера на уме было во время творческого порыва и с какой палитры он цвета для сайта брал.
Хочется выделить какие-то основные моменты, которые и требовать в вежливой форме для сохранения нервов и времени.

[Василий Васильев]

Но за ссылки благодарю, пригодятся.

[xmoonlight]

Basil_Dev,

Ведь львиная доля заказов - это "вот, сделай как на картинке jpg/psd, а потом - поиграй шрифтами/цветами, а то что-то оно не такое как мне показывали". А ты сам ковыряйся и додумывай что там у дизайнера на уме было во время творческого порыва и с какой палитры он цвета для сайта брал.

Это требования к дизайнеру и UI/UX специалисту, а не к верстальщику. Верстальщик делает лишь то, что утвердил заказчик с этим(и) специалистом(-ами).
Смотрие 2-ю ссылку п.4 - дублирую линк.

Здесь пример шаблона для верстальщика с поясняющими комментариями.
И здесь полностью целиковый шаблон для начала вёрстки.

Answer 3

[Anton Filippov]

https://github.com/thedaviddias/Front-End-Checklist

Comments

[Василий Васильев]

Опять же, меня интересует не документация/best practices верстки, а примеры хорошего ТЗ от заказчика.

[Anton Filippov]

Basil_Dev, какие примеры? Держите псд и делайте пиксель перфект

[xmoonlight]

Basil_Dev,

Опять же, меня интересует не документация/best practices верстки, а примеры хорошего ТЗ от заказчика.

Ну, конечно... Вы его и за его же деньги заставьте всё под "ключ" сделать ещё...

То, о чём Вы говорите - это несколько шагов по утверждению с Заказчиком множества вопросов по следующим пунктам:
1. Статика: расположения блоков для разных типов страниц (мокапы) - делает UI/UX
2. Динамика: поведение блоков при взаимодействии со страницей (прокрутка страницы, наведение мыши на блоки/пункты меню, ввод данных в поля и т.д.) - UI/UX
3. Стилизация (стайл-гайд): сетки размещения, границы/отступы, цвета, стилизация элементов и типографика (для создания новых блоков/элементов взаимодействия и страниц в едином стиле) - создаёт и документирует дизайнер на основе созданного и СОГЛАСОВАННОГО С ЗАКАЗЧИКОМ! дизайн-макета.

После этого - читаем комментарий ниже :)

[xmoonlight]

flppv,

Держите псд и делайте пиксель перфект

Всё верно! Главное - чтобы psd был сделан грамотно: были слои с промежуточными состояниями отдельных блоков/элементов (hover, popup, edit hint, visited link и т.д.) и слои были по папкам и для разных разрешений экрана (не менее 3-х).

Этот PSD и стайл-гайд к нему от дизайнера и будет основной частью ТЗ для верстальщика.

[Anton Filippov]

xmoonlight, именно) я не стал расписывать, так как это подразумевается, ну и отвечал 12 часов назад тут про требования к макетам https://toster.ru/answer?answer_id=1169276#answers...