Чтобы обратиться к какому-либо узлу, его сначала надо найти

Для этого есть разные методы, но в современном прототипировании чаще всего применяются два метода:

let el = document.querySelector(selector)
и
let elems = document.querySelectorAll(selector)

Оба метода получают на вход CSS-селектор элемента. Например:

let el = document.querySelector(".someClass b");

Отличие их в том, что querySelector вернёт один узел, который попался первым, а querySelectorAll вернёт список всех узлов на странице, соответствующих селектору.

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

Если же вам всё-таки нужен метод map, то вы можете преобразовать список узлов в массив при помощи конструкции [...nodeList]:

let arr = document.querySelecroAll("a");
[...arr].map(el => el.innerText);

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

Довольно быстрое и самоочевидное определение 7 факторов, влияющих на опыт использования.

Довольно быстрое и самоочевидное определение 7 факторов, влияющих на опыт использования.

Если убрать все цитаты и сделать выжимку, то можно их коротенько изложить (позволю себе пересортировать их по субъективной важности)😉

1. Эффект. То, что вы делаете должно быть ценно для пользователя, решать его проблемы.

2. Эффективность. Отличие от прошлого пункта в том, что эффект — это «результат», а эффективность — с камими трудозатратами он достигается.

3. Удобство. Всем этим должно быть удобно пользоваться. Сюда ж идут количество ошибок, скорость работы, обучаемость и т.д.

4. Доверие. Пользователь должен доверять предлагаемому способу достижения цели и информации, которую ему предоставляют.

5. Удобным для поиска. То есть любая информация, должна быть и не только достойной доверия, но и возможным к нахождению. Сюда работа с вниманием и контрастом.

6. Желание. Люди должны хотеть пользоваться тем, что вы предлагаете.

7. Доступность. Всё, что вы делаете должно быть доступно любым пользователям с любых устройств.

Время — невосполнимый ресурс

Если вы придёте на новогоднюю вечеринку второго января вместо первого, то увидите пустую комнату с запахом алкоголя — вечеринки уже не будет.

Если 1 ноября вы запускаете на рынок новый корм для кошек, то к 1 октября у вас полюбому должны быть нарисованы макеты банеров для наружки, а к середине октября запущен сайт, который рассказывает о продукте. Если банеров или сайта не будет, то продукт банально никто не возьмёт с полки — результат вашей работы пропадёт.

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

Единственное, что вы не сможете сделать, когда опаздываете — это добавить себе ещё неделю, чтобы закончить проект: машину времени пока не изобрели. Пожертвовать деньгами или качеством — можно. Уменьшить проработку — можно. Добавить себе срок — нет.

Время стоит беречь не только в проектах, но и в личной жизни. Всё так же — если уже 20:00, а вы ещё не ходили в спортзал, то вы никак не можете сделать так, чтобы сейчас стало 18:00 — вы можете только не пойти в спортзал. Если вы приехали на работу в метро, а по дороге слушали музыку или изучали новинки в Arcades — вы просто приехали на работу на метро. А эти же 40 минут можно было потратить на чтение книги или спокойно поспать.

Берегите время.

Понедельничный разрыв пуканов про найм дизайнеров

Ко мне уже несколько раз приходили на собес UX-дизайнеры, которые работают в Сбербанке.
История всегда одна и та же.

Как происходит с ними диалог:
— А почему хочешь сменить место работы?
— Ну я вот уже 3 года работаю в Сбербанке. Но сделал всего несколько изменений, пару дашбордов. До прода это так и не дошло. Но в целом, делать там нечего и я не развиваюсь. Хочется чего-то динамичного, чтоб развиваться и расти, чтоб проекты доходили до пользователя.
— У нас как раз динамично: сроки, дедлайны, каждые 3 месяца новый проект с дизайн-концепцией. А что ты умеешь? Что было самым сложным, что ты проектировал?
— Ну я сам ничего не проектировал, доделывал и переделывал отдельные разделы и страницы. Добавлял кнопки, поля.
— Ок, а как к приходили задача, в каком виде?
— Есть менеджер, он приходит, озвучивает задачу и вместе придумываем как это сделать, у него уже есть видение как должно быть.
— Что знаешь про типографику, подбор шрифтов, цвета?
— В этом не было опыта, работал с готовыми элементами.
— А сам делал дизайн-концепцию UI кит? Может на фрилансе?
— Нет, ничего такого не делал.
— Что знаешь о том, как писать тексты в интерфейсе?
— Да я специально ничего не изучал, как кажется правильным, как везде пишут, так и пишу.
— Какие курсы проходит по дизайну?
— Не проходит, у меня нормальный уровень, я синьор-дизайнер.
— Поняла, а какую хочешь ЗП?
— Меньше текущего не готов падать — это 200К/мес на руки.
— Когда выйти готов?
— Я даже не знаю, меня в принципе сейчас всё устраивает, там проектики какие-то идут, я могу 2 часа с утра уделять своим задачам, есть бонусы, и жёстких сроков как у вас нет.
— Ага, у нас надо работать и быстро расти.

Вот что получается?
Человек получает 200К, поэтому считает себя синьором. Не из-за скилов, а чисто из-за ЗП, которую ему дали и должности, которую прописали. Скилов почти нет. Поэтому и не развивается, он же синьор, хули? Куда дальше стремиться…

Чтоб получить что-то выше на рынке, надо сделать невообразимо сильный скачок, вложить 2-3 года хорошего(жесткого) опыта, а денег будет не сильно больше.
Потому что сейчас его скилы на рынке стоят не больше 90К — ну не умеет он ничего. На рынке ему никто не даст больше, а значит надо сильно падать, а потом долго расти даже до текущих 200К.
Зачем куда-то дёргаться, если сейчас он уже их получает?

Apple придумал опционы и срок работы, не отработав который, нельзя получить опцион.
Сбербанк придумал ЗП в 2 раза выше рынка, чтоб люди не могли выйти в рынок чисто психологически 🙂

Вы должны побывать на «дне», чтоб было с чем сравнивать

Вы должны побывать на «дне», чтоб было с чем сравнивать

— Мониторы у вас излишне чёрные и недостаточно эстетичные
— Не хочется делать проекты для behance
— Не хочется ездить в офис на работу
— Ой, чё-то я прям не могу себя заставить за эту задачу взяться

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

Однако, всё познаётся в сравнении и если у вас нет этого «дна», с которым можно сравнивать — ценить то, что есть сейчас, вы полноценно не сможете.

Вы даже не сможете понять, что это нечто иное, нечто классное и уникальное и надо здесь задержаться.


Вспоминаю, как пришла работать в 1C:Битрикс.
По грёбаному дождю еле нашла их офис в какой-то вонючей(буквально) промзоне. Сначала час на вот этот текст на логику с шнусмумриками…

Потом задача на цикл, которая не хотела решаться. А в результате оказалась с ошибкой в условии. Какой-то прыщавый лид-программист, чьё ЧСВ было таким же жирным как и он сам.
Скептический настрой, только потому что ты девочка.
И вообще всё это нахер ему не надо. Эти тупые кандидаты, которые не могут решить придуманную задачу. «Господи, как же вы заебали» — читалось в его уставших красных глазах.


А работа в банке Русский Стандарт.
Более депрессивный, подставляющий друг друга персонал ещё поискать: тёлочки конкурировали друг с другом, рвали бумаги, вырывали клиентов друг у друга. Двухнедельное(с утра до ночи) бесплатное обучение всей системе рассчёта кредитных продуктов, страховок, выявления мошенников и поддельных документов. Страх отчисления, ежедневные чистки, унижения. Отсутствие эмоций и поток людей. Угрозыск, задержания, показания, золотые цепи на груди. Немые младенцы мошенников. Стопки налички из рук в руки под столом.


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


Для 90% компаний, люди — это мясо, средство достижения цели.
На ваши эмоции плевать. Ваши идеи никому не нужны.


Иногда нужно побывать на «дне», чтоб было с чем сравнивать и научиться ценить.


С любовью ❤️ гав-гав

Юрий Ветров #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 настоящими компонентами в коде, чтобы их не пришлось поддерживать вручную.
- Сделать дешёвую адаптацию живого гайдлайна под мобильные. Нам для работы это вообще не надо, но устали получать пинки от сообщества.