Блог

Почему дизайнеру полезно понимать CSS и HTML

Наше собственное | 07 марта 2019 | 96

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

 

Почему дизайнеру важно знать HTML и CSS

Нет, не подумайте, вовсе не обязательно знать все подробности Javascript, работы с npm, git или препроцессорами, достаточно основ, но все же знания должны быть. Итак, понимая HTML и CSS, вы:

  1. Избавитесь от упомянутого выше непонимания. Какой бы идеальный макет не выдал дизайнер, бывает так, что его креативы крайне сложно реализовать с точностью до пикселя. Тогда, либо дизайнер недоволен и не пропускает верстку, либо верстальщик приходит к дизайнеру с претензиями по поводу кривых отступов и невозможности реализации элемента.
  2. Упростите работу верстальщику. Например, работа по сетке позволит значительно упростить взаимодействие между сторонами.
  3. Будете понимать, насколько сложную задачу вы формируете и, если она слишком тяжелая, сделаете ее более простой.

Всего 3 пункта, но они сведут конфликты к минимуму или исключить непонимание полностью.

Что стоит делать дизайнеру?

Чтобы работа ладилась, и вы увидели результат, точно соответствующий ожиданиям нужно:

1. Показывать состояния объектов

Классический пример – не показан ховер-эффект. Как верстальщику догадаться, что задумал дизайнер, если это не отображено? Да никак. А если непонятно, работа будет сделана не так как задумано, а так как придумал верстальщик, дизайнеру это не понравится, в общем… Снова конфликт, снова потраченное время. Покажите состояние элемента простым способом – просто один из схожих объектов сделайте отличным от других и оставьте на нем курсор в виде руки. Так верстальщик поймет, что при наведении, должен работать вот такой эффект.

2.  Типизируйте все, что нужно

Если заголовок написан с помощью Open Sans 1.2em, пусть все заголовки будут сделаны в таком же стиле. Это снизит нагрузку на верстальщика, ему придется меньше править CSS.

3. Создайте stylegide

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

Хотите работать в команде без проволочек и конфликтов? Заботьтесь не только о своей работе, думайте и о тех, кто будет использовать ваши макеты.  

 

 

 

 

 

Наши клиенты

Подписаться на рассылку

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