HTML-разметка — это просто текст, который делит страницу на смысловые (и не очень) блоки

Когда браузер получает HTML-документ, он на его основе создаёт древовидную структуру блоков, вложенных друг в друга. Каждый объект при этом называется узлом.

Потом к узлам применяются CSS-стили и получается та страница, которую мы видим в браузере.

К любому из узлов можно обратиться через JS как к объекту, чтобы узнать и изменить их свойства или содержимое, создать новые узлы или удалить старые. Структура этих объектов и называется DOM — Document Object Model. Она нужна для того, чтобы вы могли динамически менять содержимое документа после его загрузки в браузер.

Подробнее в видео: https://youtu.be/TKxR2tNxTcA
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

🏍️ Более быстрая лошадь

🏍️ Более быстрая лошадь

Продуктоводы любят цитировать Генри Форда:

Если бы я спросил у людей, чего они хотят, они бы попросили более быструю лошадь [а не автомобиль]

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

Кажется, в этой байке очень мало хорошего:

1. «Если бы спросил, они бы попросили». Да откуда ты знаешь? Спроси сначала — мало ли, вдруг ответы тебя удивят.

2. Допустим, реально ответили, что нужна «более быстрая лошадь». Это весьма полезная информация, только надо сфокусироваться на «быстрая», а не «лошадь». Почему важна именно быстрота, а не выносливость, комфорт или там стоимость владения? Что смогут они такого делать, чего раньше не могли? Сразу возникают вопросы, которые помогут увидеть правильное направление.

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

4. Средний продуктовод — далеко не Генри Форд (сорян). Не грех и спросить, корона не свалится.

В общем, я за другую цитату Форда:

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

Энтони из UX Movement написал, как показать в переключателе, какой вариант выбран.

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

Вместо инвертирования цвета может быть:

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

Выбранный вариант выделяется сразу несколькими способами, а невыбранный — выглядит минималистично.

https://ux.pub/pochemu-knopki-pereklyucheniya-toggle-buttons-sbivayut-s-tolku/

Давай ещё раз про созвоны

Давай ещё раз про созвоны

Я не планирую новые дела «на сегодня». Новое — только с завтрашнего дня. Это даёт мне шанс выполнить сегодняшний план. Если сегодняшний день не защитить от вторжения новых дел, такого шанса не будет. (Книга Марка Форстера «Сделай это завтра».)

Я не отвечаю на сообщения до 14. И не ставлю встречи до 14 с редкими исключениями. Это даёт мне шанс сделать что-то своё, что важно сделать именно мне. Другого способа у меня нет, проверял. В проекте может быть жопа, а я всё равно не отвечу — проектов много, а жизнь одна.

У тебя один проект или, может, два-три. У меня пять-десять. Ты можешь в какой-то момент мобилизоваться и отдать проекту больше сил. Я могу только «ходить по клеточкам», строго в рамках своего расписания и правил. Если я сломаю свой режим работы — сломаются сразу все проекты.

К тому же я старый.

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

Единственный способ гарантированно получить ответ — забить встречу. «На завтра», или сразу на пару дней в течение недели.

Да чёрт с ним, можно и «на сегодня», прямо с утра, прямо в календаре — вдруг я смогу. В чате не отвечу, а встречу подтвердить или отбить это ок, потому что там невозможен какой-то последующий диалог.

Второй по верности способ — спросить «когда ждать ответа», получить обещание и если я не сделаю — медленно уничтожать меня, пока я всё не выполню.

А отправить ссылку в чат и ждать, что я сразу же посмотрю, или не забуду посмотреть потом — это способ не получить ответ.

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

80% стратегии – это глубокое понимание вашего рынка и ваших пользователей; 20% – это диагностика проблем/трендов и создание рекомендации по тактике и политике.

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

1. Кто наши конкуренты и что о них говорят пользователи? Проверка: прямо сейчас назовите как минимум 7 ваших конкурентов. Ответ "мы одни такие в голубом океане" не принимается. Почитайте вот это (https://medium.com/no-flame-no-game/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-jobs-to-be-done-%D0%B8-job-stories-4c57c1dc84cf)

2. По каждому конкуренту – назовите как минимум 3 вещи, которые они делают не так, как другие. Почему они их делают не так?

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

4. Какие 3 ключевых события случились на рынке, на котором вы работаете, за последний год? Почему они важны?

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

6. Что мы НЕ будем делать в ближайшие три года?

Очень много информации можно найти просто поиском в гугле и через уточнение запроса; если вы в b2b - идите на специализированные форумы и чаты.
Я выделяю как минимум 2 часа в неделю, чтобы делать подобный мониторинг + слежу за новинками на ProductHunt и в отраслевых изданиях.
Это потрясающая точка роста - в том числе, для развития продуктового чутья и генерации идей.

Юрий Ветров #1 - об аутсорсе и развитии дизайн-системы.

Директор по дизайну в Mail.Ru Group (продукты под брендом “Mail.Ru”).
jvetrau.com

— Привет, Юр. Давай для начала поймем, за что отвечает дизайн-директор по продуктам в Mail.Ru?

Компания делится на продуктовые направления, я отвечаю за дизайн в нескольких из них.

У меня такие группы задач:
- Координация работы дизайнеров, помощь менеджерам в работе с ними.
- Найм и развитие команды.
- Задание направления для дизайна продуктов и его координация.
- Маркетинг нашей экспертизы для усиления бренда (публикации, конференции и т.п.).
- Работа руками, там где хватает времени.

В разных продуктах разная ситуация, поэтому эти обязанности комбинируются по-своему — где-то это всё и сразу, где-то, например, только помощь дизайнеру в развитии. В других подразделениях компании всё устроено по-своему; общий глава дизайна вряд ли возможен, учитывая разнообразие направлений и подходов (игры, социальные сети, e-commerce).

— В прошлом году вы искали аутсорс-дизайнера на продуктовые лендинги. В каком случае вы привлекаете внешних специалистов?

Работа над самим продуктом всегда делается внутри команды. Это позволяет быстро пробовать уйму разных направлений развития и экспериментировать с дизайном; скорость реакции и погруженность дизайнера тоже наилучшие только в таком формате.

Но для части маркетинговых задач (промо-сайты, иллюстрации, баннеры и т.п.), либо там где у нас нет сильной экспертизы и мало практических задач для её развития (например, шрифтовой дизайн, видео-продакшен, брендинг) — иногда обращаемся к внешним студиям. Ещё один повод — если нужно сделать прорыв в продукте и важно посмотреть на проблему со стороны (бывает, что ограничения слишком давят на дизайнеров внутри), здесь иногда заказываем концепты сторонним дизайнерам или студиям (и сами думаем параллельно). Вот неплохо описан процесс работы над брендом My.com, который шёл по такой схеме — be.net/gallery/10980469/Mycom-Identity.

— Вы уже давно занимаетесь развитием своей дизайн-системы Paradigm. Что бы ты сделал по-другому, начиная работать над ней сейчас?

Да, мы начали работу над технологическим фреймворком для дизайн-системы ещё в 2012 году, а первые продукты на ней запустились в 2013. Тогда тема была сырой как идеологически, так и технологически, так что путь приходилось прокладывать по ходу и я уверен, что можно было бы сделать всё гораздо быстрее, имея огромное количество публикаций и примеров, которые есть сейчас.

Я бы начал с идеи токенов (файлов с переменными, которые легко описать и раздавать в любые технологические фреймворки — medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421). Мы переводим Paradigm на эту архитектуру с прошлого года и это оказалось настоящей серебряной пулей — здорово сокращает расхождения, очень легко найти общий язык с фронтендом, для многих продуктов это очень дешёвый первый шаг перехода на Paradigm. Весной мы про это подробно расскажем.

— Как ты видишь её дальнейшее развитие?

Ничего особенного, просто чтобы она работала как задумано :) Это самое сложное — хотя дизайн-система начинает давать выхлоп очень быстро, путь к оптимальному состоянию очень длинный.

Из ключевых планов:
- Перевод на архитектуру токенов и замена полу-живого гайдлайна на настоящий живой.
- Раздача токенов в мобильные приложения.
- Перевод большего количества продуктов на дизайн-систему.
- Связка шаблонов в Sketch c настоящими компонентами в коде, чтобы их не пришлось поддерживать вручную.
- Сделать дешёвую адаптацию живого гайдлайна под мобильные. Нам для работы это вообще не надо, но устали получать пинки от сообщества.