Переяслав-Хмельницький колаж
місто Переяслав та Переяслав-Хмельницький район
Головна » Чому дизайнеру корисно розуміти CSS та HTML

Чому дизайнеру корисно розуміти CSS та HTML

Чому дизайнеру корисно розуміти CSS та HTML

Часто в командній роботі дизайнера і верстальника виникають конфлікти на грунті нерозуміння один одного. Верстальник нарікає на танцюючі відступи і заголовки. Дизайнер несе свою правду і каже, що верстальник не може нормально зверстати. Але ніхто з них не замислюється про те, що позбутися від цих конфліктів можна простим поясненням норм роботи один одного. Якщо ви хочете зрозуміти, як уникнути цих конфліктів, достатньо пройти спеціалізовані курс HTML + CSS для дизайнеров https://itea.ua/courses-itea/web-design-roadmap/html-css-course/ від центру навчання ITEA.

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

  • Позбавитеся від згаданого вище нерозуміння. Який би ідеальний макет не видав дизайнер, буває так, що його креативи вкрай складно реалізувати з точністю до пікселя. Тоді, або дизайнер незадоволений і не пропускає верстку, або верстальник приходить до дизайнера з претензіями з приводу кривих відступів і неможливості реалізації елемента.
  • Спростіть роботу верстальщику. Наприклад, робота по сітці дозволить значно спростити взаємодію між сторонами.
  • Будете розуміти, наскільки складну задачу ви формуєте і, якщо вона занадто важка, зробите її більш простий.

Всього 3 пункти, але вони зведуть конфлікти до мінімуму або виключити нерозуміння повністю.

Що варто робити дизайнеру?

Щоб робота ладилася, і ви побачили результат, точно відповідний очікуванням потрібно:

1. Показувати стан об'єктів

Класичний приклад - не показаний ефект. Як верстальнику здогадатися, що задумав дизайнер, якщо це не відображено? Та ніяк. А якщо незрозуміло, робота буде зроблена не так як задумано, а так як придумав верстальник, дизайнеру це не сподобається, загалом... знову конфлікт, знову витрачений час. Покажіть стан елемента простим способом-просто один з схожих об'єктів зробіть відмінним від інших і залиште на ньому курсор у вигляді руки. Так верстальник зрозуміє, що при наведенні, повинен працювати ось такий ефект.

2.  Типізуйте все, що потрібно

Якщо заголовок написаний за допомогою Open Sans 1.2 em, нехай всі заголовки будуть зроблені в такому ж стилі. Це знизить навантаження на верстальника, йому доведеться менше правити CSS.

3. Створіть stylegide

Це може бути окремий лист, в якому будуть закріплені всі типізовані елементи дизайну: всі рівні заголовків, варіанти кнопок, розділові лінії, блоки. Для кращого розуміння, залиште коментарі до розділів стайлгайда.

Хочете працювати в команді без зволікань і конфліктів? Дбайте не тільки про свою роботу, думайте і про тих, хто буде використовувати ваші макети для подальшого втілення в життя.



1