Блог almlex’a

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

Начинающие дизайнеры совершают очень много характерных ошибок в дизайне, но всё таки это не тема разговора, да и я не эксперт, поэтому я расскажу про основные ошибки в разработке макета и советы по их исправлению.

Но позвольте вначале рассказать о том, что заставило меня написать этот пост. Недавно Тимур (DeTeam) прислал мне макет дизайна его сайта сделанный не-будем-тыкать-пальцем-кем. И если на дизайн мне было совершенно наплевать, ведь не мне же его использовать, то вот сама «Рыба» оказалась совершенно неудобна для вёрстки.

Итак, первая ошибка — мелочи. Пожалуй, самая главная ошибка всех начинающих дизайнеров в том, что занимаясь дизайном они забывают про мелочи. Точнее зачастую они их не забывают, просто тот же цвет ссылок им кажется очевидным. Обычно такие дизайнеры всегда всё делали сами. Начиная от верхнего левого пикселя, заканчивая закрывающим тегом </html>. Именно поэтому они всегда вкладывают в «рыбу» только то, что нужно воспроизвести в графике, всё остальное они доделывают уже в процессе. Но такое недопустимо при работе со сторонним верстальщиком, ведь ясновидящие берут дорого, а на процессе надо экономить, ведь верстальщик не знает, что творится у вас в голове, поэтому все мелочи, которые кажутся вам даже самыми очевидными на свете нужно выражать.

Вторая ошибка — подгонка «на глаз» все размеры стоит округлять до кратности 5, если, конечно они не должны быть именно такого размера как вы задумали, те же иконки, например, их стандартные размеры — 16×16, 24×24, 32×32 и так далее. Также располагать элементы стоит по сетке и проводить прямые, много прямых.

Третья ошибка — размеры. По статичному макету очень сложно понять резиновый ли он. А если да, то сколько процентов занимает элемент или блок. А если статика? Верстальщику придётся измерять количество пикселей линеечкой или другими способами. Вместе с самим макетом стоит делать также картинку с отмеченными границами блоков и их шириной и/или высотой. Отступы тоже следует отмечать, желательно не на этой картинке, а на другой, так не создастся не читаемое месиво.

Четвёртая ошибка — оформление слоёв. Нет, конечно, то, что вы не даёте нормальных названий слоям здорово экономит время. Но это серьёзно мешает работе с макетом в последствии, как вам, так и верстальщику. Следует давать слоям название вроде Sub Header Line для линии под шапкой. Обязательно нужно делать группы и подгруппы, от общих «Header», «Middle», «Footer» до детальных «Block Title», «Thread Name» и т.д. Желательно эти самые группы ещё и помечать цветом, чтобы их было легче различить.

Хочу также отметить, что принцип «Мавр дело свое сделал, Мавр может уходить» здесь не работает. Просто сделать макет и сопроводительный материал недостаточно, нужно оперативно отвечать на вопросы верстальщиков по расположению элементов, к примеру.

Запомните — задача верстальщика сверстать дизайн, а не доделать его за вами.