Обнаружены в консоли тренажёра Практикума некоторое искусство и ссылочка на вакансии 🌚

Собрала как-то в статью, что может пригодиться интерфейсному дизайнеру знать про URL. Если захочется добавить что-нибудь, уточнить или спросить, жду ваш комент – разберёмся вместе)
–––––
👉 Читать на Teletype

Сегодня – пара дизайнерских красивостей, которые, оказывается, можно сделать кодом.

Текст с градиентом
Раньше я думала, что такое можно сделать именно текстом (а не картинкой) только с помощью фильтров. Ан нет, можно написать короткий изящный CSS. Суть в том, что на фон строки текста кидается градиент, а потом применяется свойство background-clip: text, которое как бы говорит: "Отобрази указанные свойства фона, но в маске из этого текста". Можно добавить сколько угодно цветов и задать градиенту угол. А ещё так можно не только с градиентом, но и с картинкой. И текст останется копируемым текстом!
–––––
👉 Читать в Доке

Зернистый градиент
Имею ввиду что-то такое или такое. Суть приёма в том, чтобы послойно создать в коде "зерно" и градиент, а потом объединить их эффекты CSS-фильтрами. А меняя значения свойств, можно такой градиент анимировать.
–––––
👉 Читать на Хабре
–––––
👉 Играть в песочнице

Скажу я вам "брейкпоинт" и вы наверняка подумаете "это ширина экрана, при которой меняется что-нибудь в вёрстке". А есть ещё одно значение, причём в той же разработке – это строка в коде, на которой разработчик намеренно может приостановить выполнение программы, чтобы посмотреть её состояние и поправить код. Коротко говоря, это инструмент 🛠 дебаггинга .

По-русски это назвается кринжовым на первый взгляд слух словосочетанием "точка останова". Но это потому что я не знаю, что слово такое есть – останов) Говорят, что оно уместно только в технических текстах, но теперь я точно планирую ввести такое словцо в обиход.

Кстати, вот такие большие красные кнопки называют "аварийный останов":

Приглянулась статья от слабовидящего веб-разработчика про alt-текст. Коротко и с примерами рассказывает об особенностях скринридеров, даёт рекомендации к формулировкам, а ещё приводит ситуации, когда alt-текст наоборот, противопоказан.
–––––
👉 Читать на Хабре

А курсоров-то больше, чем я думала. Дефолтный вид курсора каждого типа на разных ОС может выглядеть по-разному. Кстати, их можно кастомизировать! Лучше для этого передавать в разработку svg-файл.
–––––
👉 Посмотреть живые примеры
–––––
👉 Почитать значения

Нашла красоты. Поглядите сами, что вытворяют карточки на скролл)
–––––
👉 Посмотреть эффект
–––––
👉 Забрать код
–––––
👉 Пост автора

Вообще на Codrops куча кайфовых вещей, которые можно сделать кодом. Авторы чаще всего открыто делятся кодом – можно предложить разработчикам попробовать в проекте 🌚

Сегодня – рубрика #обследование

🔬ССЫЛКИ в интерфейсе
Попробовала оформить в статью всё про тег <a></a>, что влияет на видимое пользователем на экране во время взаимодействия с интерфейсом.
–––––
👉 Читать о ссылках на Хабре

Прикладываю, что помогло подготовить статью и приглянулось мне в дополнение.
–––––
Про тег <a></a> в Доке:
https://doka.guide/html/a/
–––––
Про тег <a></a> на MDN Web Docs:
https://developer.mozilla.org/ru/docs/Web/HTML/Element/a
–––––
Наглядно, как стилизуется ссылка (как бы наблюдения за действиями разработчика в коде):
https://thecode.media/css-links/
–––––
Тоже про стилизацию ссылок, но чуть посложнее:
https://developer.mozilla.org/ru/docs/Learn/CSS/Styling_text/Styling_links
–––––
Почему гиперссылки исконно синие:
https://ux.pub/editorial/istoriia-dizaina-pochiemu-ghipierssylki-siniie-lo2

Утренней красоты и баловства. В блоке Configuration можно менять размер и положение центрального круга с большим текстом.

Как подготовить одноцветные SVG-иконки к покраске в коде

Делюсь решением, которое недавно нашли в рабочем проекте. Вам оно подойдёт, если:
1) иконки одноцветные и содержат только формы (т.е. все контуры «разбиты» в формы);
2) одни и те же иконки используются в разных местах в разном цвете;
3) хочется сделать дизайн-систему гибче на будущее: например, быстро поменять цвет всех иконок парой строк кода.

В этих случаях резонно «красить» иконки кодом. Но нужно чуть-чуть похимичить при их подготовке к разработке. Если коротко, то в SVG-файле иконки при экспорте из Фигмы нужно избавиться от всех лишних параметров <fill>, которые управляют цветом. Должен быть только один fill="currentColor" в верхнеуровневом теге <svg>. Делать это вручную с каждой иконкой долго.

Мы используем плагин для Фигмы 👉 SVG Export 👈
Он позволяет применить нужные настройки экспорта сразу ко всему паку. А ещё создать несколько пресетов настроек для разных нужд и разделить с командой.

Создали свой пресет и задали следующие настройки:
– [да] Use currentColor as fill
– [да] Remove svg element fill
– [да] Remove fill opacity
– [да] Black -> currentColor

Это сочетание настроек чистит от всех лишних fill внутренние составляющие SVG теги <path> и <group>. И оставляет единственный fill="currentColor" в верхнеуровневом теге <svg>. Теперь разработчики могут «накинуть» цвет из дизайн-системы на блок с иконкой, а иконка подтянет этот цвет благодаря параметру fill="currentColor". В будущем будет достаточно поменять в дизайн-системе значение цвета, отвечающего за иконки, и они автоматически подтянут себе этот цвет.

SVG удивителен и достоен отдельного разбора 🙌 Потихоньку готовлю)
Ниже скриншот из плагина:

В апреле буду на Дизайн-выходных с докладом про веб для дизайнеров

Помню момент, когда я преисполнилась осознанием, как работает веб – макеты больше не были прежними. Ощущаю теперь что-то такое в работе с задачами и заманиваю коллег в разработческое экранное закулисье. Здесь отгадываются загадки, дизайн обретает структурность и глубину проработки, рушатся аналитические горы, закрываются гештальты, подстерегает вдохновение, да и просто прикольно)

В повестке:
1) Суть работы веб-сервисов и приложений. В чём конкретно она определяет UX и как влияет на дизайн.
2) Как у нас дизайнеры прорабатывают экраны через «диалог Клиента и Сервера» и «UI-стек».
3) Как всё это👆изменило нашу команду, процессы и общение.
4) Как дизайнеру подтягивать знания по разработке.
Будет полезно и дизайнерам мобильных приложений: дополню и подчеркну отличия.

Побочные эффекты от доклада:
– уверенность в проработке экранов и элементов;
– увеличение предсказуемости интерфейса;
– расширение способов решить дизайн-задачу;
– минимизация бесячих ошибок и возвратов к сценарию после сдачи в dev.
Возможно открытие суперспособности общаться с разработчиками на их языке 🤝

Увидимся на Д-в.!

У Дизайн-выходных появилось расписание, я буду выступать 19 апреля в 12:00 (Зал №8, площадка Купно.Старт).

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

А ещё выступает моя коллега Настя Зыбинская с рассказом о том, как устроить дизайнерскую революцию и запустить в проекте редизайн: 21 апреля в 12:00 («Партизанский редизайн», зал №4). Ждём вас, волнуемся, заряжены 🌚

Презентация с моего выступления на Д-в.

Ребята, кто спрашивал про оформление у нас и передачу в разработку глобальных ошибок. Прикладываю в комментариях пример одного из проектов.

Мы занесли коды ошибок, параметры и текстовые токены в таблицу в Ноушене. Из неё ссылались на макеты.

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

Чтобы определиться, какие ошибки вам нужно детально отобразить для пользователя, пробегитесь по всем кодам ошибок (4 и 5). Какие смыслы важно конкретизировать? Например, если у вас админка или система управления со сложной структурой прав, может понадобиться конкретизировать ошибку 403 (нет прав на просмотр содержимого).

Отдельно в макетах стоят случаи, когда:
1) Нет интернета (это Клиент знает однозначно);
2) Сервер вообще не прислал ответ.
В этих случаях тип ошибки помогает понять не трёхзначный код в ответе Сервера, а сам факт отсутствия ответа или связи.

👉 Смотреть коды ошибок на MDN Web Docs

Наконец-то кое-что поняла, делюс!
Сразу обращу внимание – работаю на макбуке, информация актуальна для MacOS. Кто на винде, будет здорово, если проверите и поделитесь 🙌

Допустим, вы экспортируете из Фигмы фрейм, секцию или один из слоев внутри. В зависимости от пунктуации в названии получатся разные ситуации:

1) Если в названии только буквы и цифры, например image3, то на выходе вы получите:
– файл с названием image3
– в том формате, который выбрали
– в той папке, куда вы выбрали экспортировать
Экспортировать объект с точкой в начале названия, например .image3, Фигма не даст, т.к. с точки начинаются названия системных файлов.
–––––
2) Если в названии есть знак /, например atom/image, то на выходе вы получите:
– файл с названием image
– в том формате, который выбрали
– внутри папки atom, которая лежит в той папке, куда вы выбрали экспортировать
Соответственно, если у вас несколько знаков /, то получится столько же вложенных папок с названиями из символов между знаками /. Скажем, фрейм с названием atom/default/sales/image преобразуется в файл image в папке sales, в папке default, в папке atom 💁‍♀️
–––––
3) А вот если в названии есть знак /, да в начале ещё и точка есть, например .atom/image, то Фигма такое позволит экспортировать. На выходе вы получите:
– файл с названием image
– в том формате, который выбрали
– НО! в скрытой папке .atom 🕵‍♀️
Которая будет невидима. И возможно вы будете, как я, недоумевать)

Проверила свой рабочий стол командой CMD + Shift +. (точка) – а там целая вселенная забытых скрытых папок.

Ребята, изредкий привет)
У нас в компании открыто две дизайнерские вакансии:

1. Джун/миддл в интернет-банк для юрлиц (Банк Санкт-Петербург);
2. Миддл во внутренний продукт – систему, где менеджеры банка обрабатывают заявки от юрлиц.

Офис 1-2 раза в неделю (СПб). Если интересно, напишите пожалуйста мне в личку: @ovsyanur, расскажу подробнее 🌚