Познавательный контент, интересная подача, молодчина. Было бы интересно посмотреть на каком-то небольшом реальном проекте, последовательность действий от самого начала 🙂
15:00 Спец по ДС тут. Нейминг нужен, чтобы понять где ты находишься в размерной линейке и не обязан обозначать собой сколько он должен добавлять отступа. Например у другого заказчика могут быть совсем другие значения переменных, а нейминг тот же. И тебя это тоже не обязывает держать значения неизменными
Это очень интересно! Тот случай, когда думаешь, что на видео парень лет 20, а потом звучит отсылка к олдам и девяностым) Занимаюсь разработкой игр (менеджер проектов) и вечно у нас в индустрии проблема повально во всех проектах с разработкой интерфейсов и на уровне ТЗ от гейм-дизайнеров и на уровне создания арта (ожидать, что игровой художник так будет трепетно относиться к тому, чтобы расстояния между кнопками были в разных окнах одинаковые не приходится). Хочу перестроить процессы, чтобы на уровне макетов в тз на фичи гейм-дизайнеры работали с дизайн-системой (пусть не копирующей Арт игры, но морально близкой), так и наткнулась на этот канал
Не понимаю, почему для space-x1 не установить числовое значение - 4 px ? тот 1-й уровень токенов (0 = 0, 4 = 4, 8 = 8..) - он ведь, во-первых, нигде больше не используется, а значит никакой гибкости не дает; а во-вторых - токены в названии содержат свое значение (вернее название=значению), и в чем тогда смысл этих токенов, в сравнении просто с числовыми значениями?
Спасибо за видео и пример размерной линейки! Не поняла один момент: зачем создавать токены для цифр? То есть [4] = 4. Почему не [spacing-4x] = 16, a [spacing-4x] = [16] = 16. Разве может быть такая ситуация, что [4]= 8 ?
Очень крутой воркшоп, реально без воды. Хочу ещё! И вопрос. Часто сталкиваюсь с тем, что когда ставишь отступ 4 пикселя, то контент как-то сильно сжат, ставишь 8 пикселей и появляется дырка. И вот в таких случаях я ставлю 6 пикселей. Заводишь ли ты отдельные токены spacing-x0.5 и spacing-x1.5? Как поступаешь в таких случаях? Просто классическая сетка работает в случаях с стандартно разработанным шрифтом, а бывают шрифты где базовая линия например смещена в сравнении с другими шрифтами и тебе приходится оптически регулировать её внутри кнопки, чтобы текст внутри не казался излишне "парящим" или наоборот.
посмотрел видео и мне стало интересно. я в 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 ну у бычкова основной аргумент в пользу десятичных (и это не только про отступы) что верстальщикам больше "нравятся" эти числа, в целом как то так. твой коммент прочел, спасибо за мнение, попробую такую систему, возможно она покажется мне предпочтительней
я думаю в зуме они сделали так для того чтобы визуально отбить кнопку от инпута размером, если бы сделали одинаковым размером и не отбивали цветом было бы как два инпута. Хотя я бы пошел отбивкой через цвет или толщину линии.
Привет. Спасибо за видео. Подскажи, как делается такой шаблон, о котором ты говоришь на 12:40? Реализовано ли уже где-то подобное? Если да, то где? Очень хочется посмотреть :)
Большое спасибо! Смотрю вторую часть уже и очень довольна структурой и подачей. Нашла для себя новый подход, потому что раньше сразу заводила на светлую и темную тему без составления коллекции цветов/отступов/etc P.S. Было бы здорово приложить ссылку тг именно на пост с материалами, потому что тем, кто смотрит только сейчас это видео немножко сложно найти в канале
Даня, привет!) Подскажи плз по такому кейсу -> для паддингов мы используем вот такую семантику: padding-compactData-horizonta-inputLabel его alias это padding-x3(12px). Сам токен юзаем в компоненте input field и т.п. На сколько это норм подход? Или лучше будет внутри компонентов использовать отступы типа spacing-x3 для горизонтальных и spacing-x2 для вертикальных, если да то почему? Спасибо за видео
