🧑🏻🎨 Компоненты в UI-дизайне
Какие есть, для чего нужны + примеры.
Находятся в этой библиотеке:
https://component.gallery/components
@ux_advocate
Какие есть, для чего нужны + примеры.
Находятся в этой библиотеке:
https://component.gallery/components
@ux_advocate
👁🗨 Как я считаю межстрочный интервал
1. Для заголовков
120% от размера текста. Затем округляете до ближайшего значения, кратного 4.
2. Для интерфейсных текстов (короткие тексты, подписи, пояснения, сноски)
130% от размера текста. Округляете до ближайшего значения, кратного 4.
3. Для наборных текстов (большие абзацы текстов, статьи)
150% от размера текста. Округляете до ближайшего значения, кратного 4.
💡Нюанс
Можете округлять до 2, или до 5, или до 8 — зависит от того, какому модулю должны быть кратны элементы в вашей дизайн-системе.
⚠️ Исключения
Могут быть и исключения — для 14-го размера я сам использую высоту строки 18. Но этот текст все равно вложен в какой-то компонент, кратный 4-м. А заголовки кратны 4-м всегда, так как используются как самостоятельные блоки.
@ux_advocate
1. Для заголовков
120% от размера текста. Затем округляете до ближайшего значения, кратного 4.
2. Для интерфейсных текстов (короткие тексты, подписи, пояснения, сноски)
130% от размера текста. Округляете до ближайшего значения, кратного 4.
3. Для наборных текстов (большие абзацы текстов, статьи)
150% от размера текста. Округляете до ближайшего значения, кратного 4.
💡Нюанс
Можете округлять до 2, или до 5, или до 8 — зависит от того, какому модулю должны быть кратны элементы в вашей дизайн-системе.
⚠️ Исключения
Могут быть и исключения — для 14-го размера я сам использую высоту строки 18. Но этот текст все равно вложен в какой-то компонент, кратный 4-м. А заголовки кратны 4-м всегда, так как используются как самостоятельные блоки.
@ux_advocate
Мое первое большое выступление 🥳 Последний раз выступал в 2022 году на аудиторию не-дизайнеров на 15-20 человек. И вот опять!
Тема: дизайн-токены, как применять, зачем нужны на примере моей работы в Сбер Домклик
Дата: 16 сентября
Место: Липецк
2023.itfest.site
Тема: дизайн-токены, как применять, зачем нужны на примере моей работы в Сбер Домклик
Дата: 16 сентября
Место: Липецк
2023.itfest.site
Словарь с дизайнерскими терминами
https://www.interaction-design.org/literature/topics
Объясняются, наверно, все дизайнерские слова — и кто такой Норман, и кто такое поле ввода, и черные паттерны — в общем, кому-то пригодится)
@ux_advocate
https://www.interaction-design.org/literature/topics
Объясняются, наверно, все дизайнерские слова — и кто такой Норман, и кто такое поле ввода, и черные паттерны — в общем, кому-то пригодится)
@ux_advocate
☘️ Каталог мировых дизайн-систем: фигма+код
Изучайте для вдохновения)
Много не заезженных систем, не таких популярных как материал, есть что почерпнуть!
https://www.designsystemsforfigma.com/
@ux_advocate
Изучайте для вдохновения)
Много не заезженных систем, не таких популярных как материал, есть что почерпнуть!
https://www.designsystemsforfigma.com/
@ux_advocate
То, ЧТО Я ДАВНО ИСКАЛ и уже сам начал собирать такую библиотеку 😱
Это коллекция разных компонентов со ссылками на примеры действующих дизайн-систем.
Выбираем кнопку и смотрим, как она сделана в других дизайн-системах: Atlassian, Uber, Ant, IBM, Microsoft и множестве других!
Также там есть не «избитые» системы — Pinterest, Volkswagen, Adobe.
Смотреть тут component.gallery/components
Ещё системы можно фильтровать по особенностям, например, по доступности или по технологии (Angular, React и т. д.)
А если нужен UI Kit в фигме, то читайте этот пост: фигмы мировых дизайн-систем.
@ux_advocate
Это коллекция разных компонентов со ссылками на примеры действующих дизайн-систем.
Выбираем кнопку и смотрим, как она сделана в других дизайн-системах: Atlassian, Uber, Ant, IBM, Microsoft и множестве других!
Также там есть не «избитые» системы — Pinterest, Volkswagen, Adobe.
Смотреть тут component.gallery/components
Ещё системы можно фильтровать по особенностям, например, по доступности или по технологии (Angular, React и т. д.)
А если нужен UI Kit в фигме, то читайте этот пост: фигмы мировых дизайн-систем.
@ux_advocate
Любопытно 🤔
Часто слышал, как ламода очень упорно занимается тестированиям и улучшением UX. Мне знакомый из ламоды рассказывал, как они тестят месяцами разные оттенки.
История. На дворе уже 2022 год. Чтобы вернуть товар, нужно заполнять бумажное заявление в пункте выдачи.
И совсем недавно они сделали возврат онлайн без бумажных заявлений, как это сделано уже у всех. 🤷🏻♂️
Теперь 2023 год. На ламоде появилась опция частичного выбора товаров в корзине. Только в 2023! (Это очень поздно).
Мы в вайлдберриз это сделали чуть ли не первые (может, наравне с озоном). Но мы не болтали часто, как упорно проводили исследования. Да, проводили.
Лучше слушать людей и быстро внедрять, проверять свои идеи. А не зацикливаться на пикселях и мелочах. В ВБ до сих дизайн-система не доделана, но зато они номер один☝️
Но… тем не менее, я все равно клиент ламоды и очень рад, что появилась такая удобная опция. Но очень долго я ее ждал! Уже думал, что это настойчивый план ламоды не делать этот частичный выбор)
Часто слышал, как ламода очень упорно занимается тестированиям и улучшением UX. Мне знакомый из ламоды рассказывал, как они тестят месяцами разные оттенки.
История. На дворе уже 2022 год. Чтобы вернуть товар, нужно заполнять бумажное заявление в пункте выдачи.
И совсем недавно они сделали возврат онлайн без бумажных заявлений, как это сделано уже у всех. 🤷🏻♂️
Теперь 2023 год. На ламоде появилась опция частичного выбора товаров в корзине. Только в 2023! (Это очень поздно).
Мы в вайлдберриз это сделали чуть ли не первые (может, наравне с озоном). Но мы не болтали часто, как упорно проводили исследования. Да, проводили.
Лучше слушать людей и быстро внедрять, проверять свои идеи. А не зацикливаться на пикселях и мелочах. В ВБ до сих дизайн-система не доделана, но зато они номер один☝️
Но… тем не менее, я все равно клиент ламоды и очень рад, что появилась такая удобная опция. Но очень долго я ее ждал! Уже думал, что это настойчивый план ламоды не делать этот частичный выбор)
🎤 В фирменной толстовке Домклик Сбер на конференции :D
Лекция про дизайн-токены: что это такое, зачем нужны и как они работают у нас в компании.
Скоро будет еще одна лекция, уже побольше по масштабу 😮 И уже для фронтендеров)
Лекция про дизайн-токены: что это такое, зачем нужны и как они работают у нас в компании.
Скоро будет еще одна лекция, уже побольше по масштабу 😮 И уже для фронтендеров)
Кто понимает, зачем «реклама» написана крупно, а ссылка на сайт — мелко?
Ссылку, вообще, и не видно почти.
Кстати, без слова Vacancy было и непонятно, что это за реклама. Какая-то продюсер, а для чего она тут?
Яндекс Go тоже рекламу с программистами делает, но там показывают, что не надо никуда ехать самому, чтобы передать посылку.
А тут непонятно вообще.
Ссылку, вообще, и не видно почти.
Кстати, без слова Vacancy было и непонятно, что это за реклама. Какая-то продюсер, а для чего она тут?
Яндекс Go тоже рекламу с программистами делает, но там показывают, что не надо никуда ехать самому, чтобы передать посылку.
А тут непонятно вообще.
Ещё один успешный успех. Мои консультации помогли человеку устроиться в ВК 🥳🥳🥳
Мы провели репетицию собеседования, разобрали портфолио. Пару собеседований и работа найдена!
📩 Заказать консультацию по вашему вопросу можете лс @uxradio
💰5000₽ за консультацию
🧑🎓 Помогу устроиться на работу, разработать портфолио, решить дизайнерскую задачу с работы или из тестового задания.
Ученики работают в Газпром, Сбер, VK, IBM (да, тот самый).
Мы провели репетицию собеседования, разобрали портфолио. Пару собеседований и работа найдена!
📩 Заказать консультацию по вашему вопросу можете лс @uxradio
💰5000₽ за консультацию
🧑🎓 Помогу устроиться на работу, разработать портфолио, решить дизайнерскую задачу с работы или из тестового задания.
Ученики работают в Газпром, Сбер, VK, IBM (да, тот самый).
Forwarded from Игорь Пименов
Привет! Мне ВК оффернул на другую позицию 🏆
Please open Telegram to view this post
VIEW IN TELEGRAM
30 сентября поеду в Ижевск на конференцию uic.dev 🧑💻🚙
Теперь аудитория больше, чем на прошлой конференции и тема уже не для дизайнеров, а для фронтенд-разработчиков.
Вот тут запись уже будет.
Ещё мне дали мой промокод UXADVOCATE, там скидка по нему будет.
🥳 💪🏼 🔥
@ux_advocate
Теперь аудитория больше, чем на прошлой конференции и тема уже не для дизайнеров, а для фронтенд-разработчиков.
Вот тут запись уже будет.
Ещё мне дали мой промокод UXADVOCATE, там скидка по нему будет.
🥳 💪🏼 🔥
@ux_advocate
This media is not supported in your browser
VIEW IN TELEGRAM
Как вам? Свежо, удобно?
Я попробовал, глючит, кряхтит. Но было бы круто, если бы они делали такие инновации, когда они основную часть UX доведут до стандартов, которые наиболее удобнее, чем их ноу-хау.
Меня уже не первый год раздражают их модальные окна.
Сначала товар открывается в модальном окне. Затем описание перекрывает это окно и прячет кнопку выхода из окна. Выйти из карточки товара не получится, пока не закроешь описание. Почему так сложно??
Далее. Сценарий замены адреса вообще не проработан! Почему я не могу из корзины выбрать адрес доставки?! Я уже в корзине, готов отдать деньги, но хочу выбрать другой адрес. А меня из корзины посылают хуй пойми куда.
Их сценарий замены ю адреса сейчас такой:
Корзина
А можно и нужно делать так:
Корзина
Заметили, сколько бесполезных лишних шагов нужно сделать сейчас, чтобы сменить адрес доставки?
С учётом их модальных окон этот путь — ад.
Они тратят много времени на исследования, а где отражение этого в приложении?
Я и мои знакомые часто заказывают на разные адреса — и на работу, и домой. Да и если нас таких мало, почему смена адреса такая запутанная? У ВкусВилл, Яндекс Еды и других доставщиков продуктов это учетно в приложении.
Зато у Самоката самый необычный фильтр цены.
Очередной пример, как для понтов делают фичи, а на главное забивают.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Типичная жизнь дизайнера интерфейса 👨🎨
Рад сообщить, что вчера я стал участником престижной организации W3C.
Эта организация разрабатывает единые принципы и стандарты для интернета, такие как HTML, CSS и многие другие.
Меня включили в рабочую группу по разработке стандартов дизайн-токенов (www.w3.org/community/design-tokens).
Теперь я буду участвовать в определении того, каким будет стандарт дизайн-токенов в будущем.
В группе 395 участников, из России всего 2, включая меня.
Много специалистов из Amazon, General Motors, Framer, Atlassian, Abode, Cisco, Google и множества других корпораций.
Эта организация разрабатывает единые принципы и стандарты для интернета, такие как HTML, CSS и многие другие.
Меня включили в рабочую группу по разработке стандартов дизайн-токенов (www.w3.org/community/design-tokens).
Теперь я буду участвовать в определении того, каким будет стандарт дизайн-токенов в будущем.
В группе 395 участников, из России всего 2, включая меня.
Много специалистов из Amazon, General Motors, Framer, Atlassian, Abode, Cisco, Google и множества других корпораций.