Designer

HTML Coder

*:focus {
  outline: none;
}

*:focus {
  outline: none;
}

"Як я перестав хвилюватись і полюбив outline"
yevhenorlov.com

Ці та інші чудові приклади:

Що не є нашим завданням?

Конвертація картинок в HTML/CSS

(для цього вже є автоматичні інструменти типу Photoshop/AI/Sketch/Figma etc.)

Що є нашим завданням?

Створити продукт, який люди будуть використовувати для вирішення певних задач

Яких задач? Хто ці люди?

Задачі залежать від продукту (маємо хороше уявлення).
Хто саме користується продуктом часто менш очевидно (і ми не завжди вгадуємо).

✅

❌

Якщо коротко:
це робота не переписувачів, а інженерів.

В чому відповідальність інженерів?

(в широкому значенні слова)

Продукт має бути:

Функціональним (дизайн вирішує задачі, наше втілення дизайну має відображати цю функцію)

Продукт має бути:

Функціональним (дизайн вирішує задачі, наше втілення дизайну має відображати цю функцію)
Надійним (має працювати в різних умовах)

Продукт має бути:

Функціональним (дизайн вирішує задачі, наше втілення дизайну має відображати цю функцію)
Надійним (має працювати в різних умовах)
Доступним (чим більше людей може користуватись продуктом, тим більше цінності він створює)

Які інструменти для цього є в UX-інженерів?

Відповідальність	Інструменти
Функціональність	Семантичні елементи HTML5
Надійність	Веб-стандарти (надійні кросбраузерні рішення, сумісні з майбутнім і минулим вебу)
Доступність

Відповідальність	Інструменти
Функціональність	Семантичні елементи HTML5
Надійність	Веб-стандарти (надійні кросбраузерні рішення, сумісні з майбутнім і минулим вебу)
Доступність	Web Content Accessibility Guidelines (WCAG) Описують вимоги до контрастності, розмірів шрифтів, навігації etc.

MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML cheat sheet: https://www.hostinger.com/tutorials/html-cheat-sheet

ресурси і шпаргалки по HTML5:

smoke testing (хоча б перевірити навігацію з клавіатури)

Контраст: material.io