Как идеально подготовить дизайн-макет к верстке?

Question

[mkking]

Всем привет!

Как должен выглядеть идеально подготовленный дизайн-макет, чтобы верстальщик заплакал от радости, увидев его?
Сетка, колонки для Bootstrap, слои по папочкам, разрешение, что еще и в каком виде? Нигде не могу найти полноценного внятного ответа.

Спасибо.

Answer 1

[Руслан Галиев]

- Все выровнено по сетке, в том числе и по горизонтальной
- Все максимально стандартизировано: везде, где это возможно, используются одинаковые размеры шрифта (1-3 варианта), кнопки, блоки одинакового размера, одинаковые или кратные 5 отступы и т.д.
- Отрисованы все состояния всех элементов, все модальные окна, анимация.
- Все слои с изображениями, иконками, векторными фигурами (в Фотошопе) названы именами файлов (logo.png), соответственно все картинки (+ варианты для ретины) уже готовые лежат в отдельной папке
- Все слои разложены по папкам, в соответсвии с иерархией, наложения слоев в "Normal", пустые слои удалены
- Отрисованы макеты для мобильного, планшета и десктопа. Но не три разных макета, а один адаптированный. То есть, вам нужно понимать и дать понять верстальщику, как страница будет адаптироваться.

Comments

[Нерон Лордов]

Почему отступы должны быть кратны 5? По своему опыту дизайна интерфейсов скажу, что размеры основных блоков/элементов как правило целочисленно кратны 8, 16, 40 и 48 пикселям, в зависимости от их назначения. Кратность 5 - это скорее из гайдлайна по метро-дизайну от микрософта, но он редко применяется

[Руслан Галиев]

Liquidos: тут я скорее хотел донести мысль, что отступы должны быть кратны какому-либо числу.

Answer 2

[D']

- шрифты
- отдельно отрисовка всех состояний (ховер, клик и т.д)
- отдельно макеты под разные разрешения

Другие возможно еще что-то скажут.

Comments

[Lorri]

забыли про шейпы - всё, что можно, делать шейпами

Answer 3

[mkking]

А что по поводу подготовки дизайн-макета для верстки на Bootstrap? Что при этом нужно учитывать?