Что должен знать дизайнер о html-верстке? Детали этого вопроса можно обсуждать очень долго и многие будут не согласны друг с другом. Однако все как правило сходятся на одном: дизайнер обязательно должен знать как минимум общие принципы верстки.

В этом цикле статей я постараюсь максимально доходчиво объяснить как работает html-верстка и как работают html-верстальщики, не углубляясь сильно в детали, так чтобы все было понятно для любого дизайнера.

Почему?

Я периодически работаю как дизайнером так и верстальщиком, поэтому на определенном уровне понимаю принципы как web-дизайна, так и html-верстки. Очень часто приходится получать в верстку недоделанные, кривые макеты или такие, что сверстать просто невозможно. Многие дизайнеры даже не представляют себе хотя бы немного как вообще работают сайты. Из-за этого непонимания часто возникает головная боль и прежде всего именно у верстальщика. А если у верстальщика болит голова, то он может начать ругаться на дизайнера и тогда уже головная боль возникнет у второго. Данный цикл — это попытка донести до дизайнеров, ни разу не сталкивающихся с сайтостроением, общие принципы и концепции, чтобы убрать головную боль у обеих сторон.

Итак, как нужно взаимодействовать с верстальщиком?

1. Используйте Photoshop.

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

2. Порядок в слоях.

Посмотрите на картинку справа. Как вы думаете, в какой из панелей слоев проще разобраться? Ответ очевиден — в той что справа.

Самые распространенные ошибки в слоях:

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

 Как надо делать:

  • Подписывать слои.
  • Использовать папки и иерархию.
  • Использовать цвета.
  • Не использовать наложение слоев без понимания дальнейшей работы с ними.

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

3. Тестируйте элементы разным контентом.

Одно дело, когда вы нарисовали маленькую красивую кнопочку с надписью «это кнопка» и совсем другое дело, когда заказчик прикажет верстальщику уместить в эту красивую кнопочку целое предложение с деепричастным оборотом. Я конечно утрирую, однако эта проблема имеет место быть и довольно часто.

Решение очень простое: представьте себе как этот элемент будет выглядеть, если контента в нем будет значительно больше, чем вы предполагаете, а так же если его будет значительно меньше (пустые элементы ведь тоже совсем не есть хорошо). Если вы вдруг осознали, что в этом случае ваш красивый элемент внезапно становится не таким уж и красивым — есть хороший повод переделать его.

4. Не используйте режимы наложения слоев, если не уверены, что это прокатит.

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

Когда мы верстаем, то все элементы находятся отдельно друг от друга и никаких режимов наложения у них нет. Перед версткой каждый верстальщик «мерджит» (сливает воедино) все слои, которые отвечают за определенный элемент и делает из этого всего отдельную картинку.

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

5. Прикладывайте шрифты.

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

Если вы используете какой-то нестандартный шрифт (шрифт, которого по умолчанию нет в большинстве ОС, вроде Arial, Verdana, Times New Roman и.т.д.), то обязательно прикладывайте его к макету в формате .ttf или .otf. Если шрифтов несколько, то прикладывайте их все.

В html-верстке до сих пор есть некоторые затруднения с нестандартными шрифтами, поэтому рекомендую изначально, еще до начала работы над макетом выбрать шрифты из Google Fonts. Любой верстальщик скажет вам спасибо за это. Что уж говорить, если вы вообще остановитесь на системных 🙂

Если же без каких-то уникальных шрифтов совсем не обойтись, тогда просто приложите их к макету, это не сложно.

6. Учитывайте адаптивность.

Да, я знаю, что до сих пор не во всех проектах требуется адаптивность, однако это уже повсеместно. Обсуждайте этот вопрос с заказчиком сразу же, чтобы потом не перекладывать свою работу на верстальщика, который сделает совсем не так красиво, как надо, а в процессе еще и проклянет вас раз эдак 100500.

Очень часто дизайнеры высылают один единственный макет для десктопа, а на вопрос об адаптивности отвечают что-то вроде:
— Адаптивность? Конечно нужна! Макеты? Нет, макетов нет. Нет, рисовать не будем. Ну сделайте просто чтобы смотрелось нормально везде!
Это несерьезный подход. Верстальщик конечно все сделает и клиент за это безусловно заплатит, но сделает скорее всего так, что у любому толковому дизайнеру станет от этого плохо. Верстальщики не дизайнеры, давайте не будем вешать на них не свойственную им работу.

Если требуется адаптивность рисуйте несколько макетов, как правило 3 (десктоп, планшет и смартфон). Этого как правило вполне достаточно.

Однако, чтобы правильно рисовать адаптивные макеты, необходимо самое главное:

7. Понимание основных принципов верстки.

Дизайнер может расположить элементы как угодно. В графическом редакторе он практически ничем не ограничен. Совсем иная ситуация в html-верстке. И пусть говорят, что «опытный верстальщик сверстает что угодно», это так же неправильный подход. Верстальщик всегда чем-то ограничен и если ему приходится верстать вещи, которые изначально делались без оглядки на основные принципы верстки, то он верстает плохо, даже если он верстальщик от Бога. Ему приходится использовать множество громоздких и ненужных «костылей», которые в итоге глючат, загружают оперативную память и значительно влияют на скорость загрузки сайта. Понятное дело все это крайне негативно сказывается на общем качестве итогового продукта.

В следующей части цикла я расскажу об этом пункте подробнее.

Дополнительно.

Тут, в паре пунктов, я опишу то что в принципе можно и не делать, но что делать желательно и за что многие верстальщики скажут вам спасибо.

1. Делайте UI Style Guide.

Делайте отдельные макеты, где содержатся все элементы интерфейса. Этим самым вы облегчите работу как себе, так и верстальщику. Вам будет проще дальше рисовать макеты, просто компонуя уже готовые элементы интерфейса, а верстальщику не надо будет их выискивать.

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

В итоге головная боль у всех, в том числе и у заказчика.

2. Используйте сетки.

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

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

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

Итог:

Никогда не ленитесь узнать немного нового и расширить свой кругозор. Это всегда вам поможет в вашей работе и не только. Взаимопонимание значительно ускоряет любой вид деятельности.