Система отступов простым языком | Воркшоп #2 | UI-kit
Вставка
- Опубліковано 8 чер 2024
- мой тг t.me/+2Q738JTfRfoxOWNi
Консультации по портфолио и собесам в дизайн студии и продукты clck.ru/39yssA
В этом вокршопе продолжаем качать системное мышление и более осознанный подход на примере UI-кита. Тема клевая, многие слышали, но материала не так много в интернете, поэтому, чаек-кофеек и погнали разбираться:
В воркшопе разобрали:
00:00 Вступление
01:41 Чему научимся
02:26 Что такое система отступов
02:49 Зачем нужна система отступов
04:00 Что такое базовый модуль
04:50 Какое базовое значение выбрать для проекта
06:46 Размерная линейка
08:25 Ритм в отступах
09:39 Компоненты на основе размерной линейки
12:56 Коротко о токенах
14:00 Нейминг в отступах
14:38 Нейминг в WISE
15:20 Нейминг в ECL
15:47 Нейминг в Carbon
16:55 Оформляем токены в Variables
17:56 Применение токенов. Компоненты
20:40 Применение токенов. Макеты
21:39 Документация. Как было раньше
22:30 Документация. Что следует документировать
24:00 Завершение
Ссылки на дополнительные материалы в телеграм-канале.
Как обычно, приглашаю всех в комменты, дополняйте, делитесь своим опытом 👇Приятного просмотра :)
Вау. Просто вау. Первый раз вижу настолько хорошо продуманную лекцию где ты буквально все понимаешь с первого раза. Большое спасибо
супеер! уложилось в голове, как родное 🙂 жду еще и еще
Какой же полезный канал, слов просто нет. Случайно наткнулся, когда искал гайды по variables.
Спасибо большое!
Рад помочь :)
Блин, я даже не искал чего-то конкретного, просто в рекомендации попало) Но люто плюсую, польза на единицу контента - лютая)
Спасибо, офигенный урок!
Еще раз спасибо, спасибо, спасибо!!!!!!!!!!!!!!
Познавательный контент, интересная подача, молодчина. Было бы интересно посмотреть на каком-то небольшом реальном проекте, последовательность действий от самого начала 🙂
Лайк не глядя! Оформленной информации по теме в сети почти нет
Благодарю, все четко понятно и звук чистый, голос приятный, без лишнего пафоса и рекламы. побольше бы таких видео
спасибо-спасибо-спасибо! после ваших воркшопов наконец-то всё уложилось в голове
Бро ты не понимаешь насколько ты и твой контент помогает мне]!!! Пожалуйста не бросай нас
Большой молодец, спасибо за контент
наконец-то я поняла, что такое ритм в отступах! спасибочки!
🙂🙂🙂
Спасибо. Очень полезно
Даня, спасибо большое! Приятно слушать и все понимаю ((: Шаблон охота посмотреть, конечно ж!
действительно классный контент, продолжай!!!
Отличный воркшоп, ждал новое видео не зря😀
Спасибо за твою работу, вдохновляешь. Не останавливайся!
Большое спасибо, очень нужная тема для дальнейшего развития.
посмотрел, пожалел... что нельзя поставить ОГОНЬ вместо лайка! 🔥🔥🔥
Крайне полезная информация! Спасибо огромное!) Как раз была проблема с отступами...)
Контент отличный, спасибо за такую пользу!
Спасибо за видео, всё предельно понятно и просто
Супер полезно! Спасибо тебе большое:)
Спасибо за полезное видео! Очень интересная и классная подача без воды. Кайф ☺
Спасибо! Новое уже в работе 🙂
Тебя очень приятно слушать, спасибо за такую годноту👏👏
Еее, спасибо 🙌
Топ материал. Немного сбивчиво, но все по сути. Очень полезно и интересно. Спасибо большое.
Хотелось бы нечто подобное про гайды мобильных и работу с ними. Качественную работу.
Спасибо, как всегда мегаполезно!
Даня, было бы круто узнать как организовываете систему компонентов)
У тебя отличная подача и это приятно и интересно смотреть. Лучший
Привет, спасибо!
Последние три недели занимался здоровьем, новое видео скоро будет 🙂
@@eldanielleee Выздоравливай, дорогой
15:00 Спец по ДС тут. Нейминг нужен, чтобы понять где ты находишься в размерной линейке и не обязан обозначать собой сколько он должен добавлять отступа. Например у другого заказчика могут быть совсем другие значения переменных, а нейминг тот же. И тебя это тоже не обязывает держать значения неизменными
Привет! Согласен, хорошее дополнение, спасибо!
Йо, Дань, огонь видео!
Классный воркшоп. Спасибо!
крутяк! последний раз слышала только на курсе)) но дизайнером не стала, поэтому не применяю хаха
Дерзай:) Все понятно и без воды!
Хочу больше таких видосов!! По кайфу
Скоро выпущу, простииите ребят 😂🥲 на новой работе весь фокус
Удивительно мало лайков под таким полезным видео
Самое главное, что те кто хотели, посмотрели и получили опыт, а лайки - приятный бонус :)
Это очень интересно!
Тот случай, когда думаешь, что на видео парень лет 20, а потом звучит отсылка к олдам и девяностым)
Занимаюсь разработкой игр (менеджер проектов) и вечно у нас в индустрии проблема повально во всех проектах с разработкой интерфейсов и на уровне ТЗ от гейм-дизайнеров и на уровне создания арта (ожидать, что игровой художник так будет трепетно относиться к тому, чтобы расстояния между кнопками были в разных окнах одинаковые не приходится). Хочу перестроить процессы, чтобы на уровне макетов в тз на фичи гейм-дизайнеры работали с дизайн-системой (пусть не копирующей Арт игры, но морально близкой), так и наткнулась на этот канал
Успехов, уверен, все получится!)
ps. 28 🥲
@@eldanielleee кровью джунов питаешься, оттого так молодо выглядишь)
я думаю в зуме они сделали так для того чтобы визуально отбить кнопку от инпута размером, если бы сделали одинаковым размером и не отбивали цветом было бы как два инпута. Хотя я бы пошел отбивкой через цвет или толщину линии.
Спасибо! 🎉🎉🎉
Вот это контент! Спасибо!❤
🙌☺️
дружище, ты молодец.
Спасибо! Работаем дальше :)
уау! круто
Спасибо
Хотим шаблон! Очень хотим))
Шаблон презы?)
Очень класснo, качественнo. Накoнец нашел канал где гoвoрят o таких вoт фундаментальных вещах прoстым языкoм, oчень надеюсь чтo будут еще видеoурoки!
Даня, привет!)
Подскажи плз по такому кейсу
-> для паддингов мы используем вот такую семантику: padding-compactData-horizonta-inputLabel его alias это padding-x3(12px). Сам токен юзаем в компоненте input field и т.п.
На сколько это норм подход? Или лучше будет внутри компонентов использовать отступы типа spacing-x3 для горизонтальных и spacing-x2 для вертикальных, если да то почему?
Спасибо за видео
Сорри за Оффтоп мне очень понравилься шрифт которую ты использовал в презентаций, скажи пожалуйста какой шрифт ты использовал ?
Очень крутой воркшоп, реально без воды. Хочу ещё!
И вопрос. Часто сталкиваюсь с тем, что когда ставишь отступ 4 пикселя, то контент как-то сильно сжат, ставишь 8 пикселей и появляется дырка. И вот в таких случаях я ставлю 6 пикселей. Заводишь ли ты отдельные токены spacing-x0.5 и spacing-x1.5? Как поступаешь в таких случаях?
Просто классическая сетка работает в случаях с стандартно разработанным шрифтом, а бывают шрифты где базовая линия например смещена в сравнении с другими шрифтами и тебе приходится оптически регулировать её внутри кнопки, чтобы текст внутри не казался излишне "парящим" или наоборот.
Спасибо!
Да - промежуточные можно заводить, но если у тебя их столько же, сколько «целых», надо подумать) может тебе лучше использовать другой модуль
Подскажи пожалуйста название шрифта, очень крутой видос, много полезного, спасибо за контент!
Ты про какой?
про наборный шрифт на 4:17 например, очень запал шрифт, но никак найти не могу@@eldanielleee
@@eldanielleee на 4:17 шрифт, для основного текста, будет очень благодарен за подсказку названия шрифта!!!
@@4e6yrek40 TT Hoves
@@eldanielleee спасибо огромное, благодарю
всю жизнь использую систему 5-10pt, для приложений там 4pt
посмотрел видео и мне стало интересно. я в uxui "самоучка" и многих нюансов просто... ну не понимаю. например зачем разрабатывать систему отступов х4 и соответственно их умножать и получать "неровные" отступы? ведь разработчики не любят "не ровных" чисел, ну и с ровными (целыми) отступами как то удобнее работать и самому дизу :) я например делаю отступы кратно 2м (10, 20,40 и тд) или я не прав? слышал про 8 пх сетку но не понимаю зачем оно надо... за видео спасибо, очень познавательно оказалось :)
Почему «неровные»? Ровные. Кратные
@@eldanielleee поясню) например когда числа кратные там хвостики получаются, 34 пх и тд, ведь они не будут по отступам ровными как просто 30 пх, а верстальщиков эти "хвостики" бесят, типо делайте "целые" числа, Бычков про это говорит, а он авторитет) ну либо я чего то не понимаю...
@@matthewmacarenkoff3807 к сожалению, не знаю кто такой бычков)
Самое главное, чтобы у вас была закономерность - кратность чему-либо. 5-10-15-20 - понятный шаг. 4-8-16-20.
То, о чем вы говорите - личные убеждения конкретного разработчика)
Вот пример из серьезной дизайн-системы carbondesignsystem.com/guidelines/spacing/overview/
Там, как вы можете заметить, есть «хвостики» 🙂
@@matthewmacarenkoff3807 Бычков говорит про десятичные доли, например 10,43px, а не 34px. Насчёт использования 10-20-30 и тд сетки не помню за ним такого, но здесь кроется очень опасный подводный камень, когда тебе нужен какой-то средний размер. Когда 5, слишком мало, а 10 слишком много. Скорее всего если использовать такие "ровные числа" в проектах будут дыры. Да, будет ровненько, но будет ощущение, что проект недокручен, что можно сделать его ещё лучше. Часто такое ощущение возникает из-за неправильно подобранных отступов.
Ну а про авторитетность Бычкова... Он классный спец, но не стоит ровняться на одного человека. Лучше изучите разные подходы к работе и выработайте свои правила. Гугл, в которой работают тысячи крутых специалистов, для вас авторитет?
@@catriarchiv ну у бычкова основной аргумент в пользу десятичных (и это не только про отступы) что верстальщикам больше "нравятся" эти числа, в целом как то так. твой коммент прочел, спасибо за мнение, попробую такую систему, возможно она покажется мне предпочтительней
Umolyaju, prodolzhaj snimat` vidosy !!!
Новый уже в работе 🔥
что за шейп? Горизонтальный шейп, кей шейп. Что это за такие понятия?
Дашь тайм код? контекст нужен
Вода
Спасибо за супер-полезное видео