Система отступов простым языком | Воркшоп #2

Система отступов простым языком | Воркшоп #2 | UI-kit

Рет қаралды 11,753

Күн бұрын

мой тг 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 Завершение
Ссылки на дополнительные материалы в телеграм-канале.
Как обычно, приглашаю всех в комменты, дополняйте, делитесь своим опытом 👇Приятного просмотра :)

Пікірлер: 82

@Darvanti 8 ай бұрын

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

@user-xd4bl1gd1v 10 ай бұрын

Какой же полезный канал, слов просто нет. Случайно наткнулся, когда искал гайды по variables. Спасибо большое!

@eldanielleee 10 ай бұрын

Рад помочь :)

@nacpunk 7 ай бұрын

Блин, я даже не искал чего-то конкретного, просто в рекомендации попало) Но люто плюсую, польза на единицу контента - лютая)

@nick_yahodin 8 күн бұрын

супеер! уложилось в голове, как родное 🙂 жду еще и еще

@secretdigital5633 10 ай бұрын

Спасибо за твою работу, вдохновляешь. Не останавливайся!

@Dudeitissucks 10 ай бұрын

Лайк не глядя! Оформленной информации по теме в сети почти нет

@olegkanov6234 10 ай бұрын

Большое спасибо, очень нужная тема для дальнейшего развития.

@fredoomshnv 10 ай бұрын

Контент отличный, спасибо за такую пользу!

@user-tl2me5hv9k 7 ай бұрын

Познавательный контент, интересная подача, молодчина. Было бы интересно посмотреть на каком-то небольшом реальном проекте, последовательность действий от самого начала 🙂

@pavelsyramalotau1081 9 ай бұрын

действительно классный контент, продолжай!!!

@alexeyilin1 15 күн бұрын

Спасибо, офигенный урок!

@user-pu8mv9ps3s 7 ай бұрын

Крайне полезная информация! Спасибо огромное!) Как раз была проблема с отступами...)

@arrruzhan11 5 ай бұрын

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

@user-cu6ku3hs4f 7 ай бұрын

Даня, спасибо большое! Приятно слушать и все понимаю ((: Шаблон охота посмотреть, конечно ж!

@user-fj5pt5xz2m 7 ай бұрын

Спасибо за видео, всё предельно понятно и просто

@deadsoapbox 9 ай бұрын

15:00 Спец по ДС тут. Нейминг нужен, чтобы понять где ты находишься в размерной линейке и не обязан обозначать собой сколько он должен добавлять отступа. Например у другого заказчика могут быть совсем другие значения переменных, а нейминг тот же. И тебя это тоже не обязывает держать значения неизменными

@eldanielleee 9 ай бұрын

Привет! Согласен, хорошее дополнение, спасибо!

@leralymar 10 ай бұрын

Супер полезно! Спасибо тебе большое:)

@Sarzatta 10 ай бұрын

Отличный воркшоп, ждал новое видео не зря😀

@yomercury Ай бұрын

спасибо-спасибо-спасибо! после ваших воркшопов наконец-то всё уложилось в голове

@veronika_voynova 9 ай бұрын

наконец-то я поняла, что такое ритм в отступах! спасибочки!

@eldanielleee 9 ай бұрын

🙂🙂🙂

@jauynqurtt 4 ай бұрын

Бро ты не понимаешь насколько ты и твой контент помогает мне]!!! Пожалуйста не бросай нас

@emmortull6253 4 ай бұрын

Топ материал. Немного сбивчиво, но все по сути. Очень полезно и интересно. Спасибо большое.

@user-ge4jo3zd3v Ай бұрын

Большой молодец, спасибо за контент

@katsapunova 9 ай бұрын

Спасибо за полезное видео! Очень интересная и классная подача без воды. Кайф ☺

@eldanielleee 9 ай бұрын

Спасибо! Новое уже в работе 🙂

@sergeyfoxy 9 ай бұрын

Спасибо, как всегда мегаполезно!

@user-uf7kg5ij4r 4 ай бұрын

Хотелось бы нечто подобное про гайды мобильных и работу с ними. Качественную работу.

@llarenim 9 ай бұрын

Тебя очень приятно слушать, спасибо за такую годноту👏👏

@eldanielleee 9 ай бұрын

Еее, спасибо 🙌

@ankappp333 8 күн бұрын

Еще раз спасибо, спасибо, спасибо!!!!!!!!!!!!!!

@DGXY 5 ай бұрын

Дерзай:) Все понятно и без воды!

@PulsarOdyssey 6 ай бұрын

Классный воркшоп. Спасибо!

@MsGalimova 10 ай бұрын

крутяк! последний раз слышала только на курсе)) но дизайнером не стала, поэтому не применяю хаха

@natalyase2044 8 ай бұрын

Это очень интересно! Тот случай, когда думаешь, что на видео парень лет 20, а потом звучит отсылка к олдам и девяностым) Занимаюсь разработкой игр (менеджер проектов) и вечно у нас в индустрии проблема повально во всех проектах с разработкой интерфейсов и на уровне ТЗ от гейм-дизайнеров и на уровне создания арта (ожидать, что игровой художник так будет трепетно относиться к тому, чтобы расстояния между кнопками были в разных окнах одинаковые не приходится). Хочу перестроить процессы, чтобы на уровне макетов в тз на фичи гейм-дизайнеры работали с дизайн-системой (пусть не копирующей Арт игры, но морально близкой), так и наткнулась на этот канал

@eldanielleee 8 ай бұрын

Успехов, уверен, все получится!) ps. 28 🥲

@ferkatskyrim 2 ай бұрын

@@eldanielleee кровью джунов питаешься, оттого так молодо выглядишь)

@nacpunk 7 ай бұрын

посмотрел, пожалел... что нельзя поставить ОГОНЬ вместо лайка! 🔥🔥🔥

@user-xi5qt6ez7k 9 ай бұрын

Йо, Дань, огонь видео!

@artemnrv 7 ай бұрын

Хочу больше таких видосов!! По кайфу

@eldanielleee 7 ай бұрын

Скоро выпущу, простииите ребят 😂🥲 на новой работе весь фокус

@irashama 8 ай бұрын

Спасибо! 🎉🎉🎉

@maxbeztalanta4221 8 ай бұрын

Даня, было бы круто узнать как организовываете систему компонентов) У тебя отличная подача и это приятно и интересно смотреть. Лучший

@eldanielleee 8 ай бұрын

Привет, спасибо! Последние три недели занимался здоровьем, новое видео скоро будет 🙂

@maxbeztalanta4221 8 ай бұрын

@@eldanielleee Выздоравливай, дорогой

@angelinakhanikaeva709 10 ай бұрын

уау! круто

@daracaraboot 5 ай бұрын

Вот это контент! Спасибо!❤

@eldanielleee 5 ай бұрын

🙌☺️

@Sergeydk 2 ай бұрын

я думаю в зуме они сделали так для того чтобы визуально отбить кнопку от инпута размером, если бы сделали одинаковым размером и не отбивали цветом было бы как два инпута. Хотя я бы пошел отбивкой через цвет или толщину линии.

@vitaliyvitaliy6892 Ай бұрын

Спасибо

@igor5379 9 ай бұрын

дружище, ты молодец.

@eldanielleee 9 ай бұрын

Спасибо! Работаем дальше :)

@Bonaidea 10 ай бұрын

Удивительно мало лайков под таким полезным видео

@eldanielleee 10 ай бұрын

Самое главное, что те кто хотели, посмотрели и получили опыт, а лайки - приятный бонус :)

@MyRomers 6 ай бұрын

Даня, привет!) Подскажи плз по такому кейсу -> для паддингов мы используем вот такую семантику: padding-compactData-horizonta-inputLabel его alias это padding-x3(12px). Сам токен юзаем в компоненте input field и т.п. На сколько это норм подход? Или лучше будет внутри компонентов использовать отступы типа spacing-x3 для горизонтальных и spacing-x2 для вертикальных, если да то почему? Спасибо за видео

@qaigymoon Ай бұрын

Сорри за Оффтоп мне очень понравилься шрифт которую ты использовал в презентаций, скажи пожалуйста какой шрифт ты использовал ?

@user-ku4tr2lu9y 8 ай бұрын

Хотим шаблон! Очень хотим))

@eldanielleee 8 ай бұрын

Шаблон презы?)

@aregtigranyan 7 ай бұрын

Очень класснo, качественнo. Накoнец нашел канал где гoвoрят o таких вoт фундаментальных вещах прoстым языкoм, oчень надеюсь чтo будут еще видеoурoки!

@catriarchiv 7 ай бұрын

Очень крутой воркшоп, реально без воды. Хочу ещё! И вопрос. Часто сталкиваюсь с тем, что когда ставишь отступ 4 пикселя, то контент как-то сильно сжат, ставишь 8 пикселей и появляется дырка. И вот в таких случаях я ставлю 6 пикселей. Заводишь ли ты отдельные токены spacing-x0.5 и spacing-x1.5? Как поступаешь в таких случаях? Просто классическая сетка работает в случаях с стандартно разработанным шрифтом, а бывают шрифты где базовая линия например смещена в сравнении с другими шрифтами и тебе приходится оптически регулировать её внутри кнопки, чтобы текст внутри не казался излишне "парящим" или наоборот.

@eldanielleee 7 ай бұрын

Спасибо! Да - промежуточные можно заводить, но если у тебя их столько же, сколько «целых», надо подумать) может тебе лучше использовать другой модуль

@matthewmacarenkoff3807 8 ай бұрын

посмотрел видео и мне стало интересно. я в uxui "самоучка" и многих нюансов просто... ну не понимаю. например зачем разрабатывать систему отступов х4 и соответственно их умножать и получать "неровные" отступы? ведь разработчики не любят "не ровных" чисел, ну и с ровными (целыми) отступами как то удобнее работать и самому дизу :) я например делаю отступы кратно 2м (10, 20,40 и тд) или я не прав? слышал про 8 пх сетку но не понимаю зачем оно надо... за видео спасибо, очень познавательно оказалось :)

@eldanielleee 8 ай бұрын

Почему «неровные»? Ровные. Кратные

@matthewmacarenkoff3807 8 ай бұрын

@@eldanielleee поясню) например когда числа кратные там хвостики получаются, 34 пх и тд, ведь они не будут по отступам ровными как просто 30 пх, а верстальщиков эти "хвостики" бесят, типо делайте "целые" числа, Бычков про это говорит, а он авторитет) ну либо я чего то не понимаю...

@eldanielleee 8 ай бұрын

@@matthewmacarenkoff3807 к сожалению, не знаю кто такой бычков) Самое главное, чтобы у вас была закономерность - кратность чему-либо. 5-10-15-20 - понятный шаг. 4-8-16-20. То, о чем вы говорите - личные убеждения конкретного разработчика) Вот пример из серьезной дизайн-системы carbondesignsystem.com/guidelines/spacing/overview/ Там, как вы можете заметить, есть «хвостики» 🙂

@catriarchiv 7 ай бұрын

@@matthewmacarenkoff3807 Бычков говорит про десятичные доли, например 10,43px, а не 34px. Насчёт использования 10-20-30 и тд сетки не помню за ним такого, но здесь кроется очень опасный подводный камень, когда тебе нужен какой-то средний размер. Когда 5, слишком мало, а 10 слишком много. Скорее всего если использовать такие "ровные числа" в проектах будут дыры. Да, будет ровненько, но будет ощущение, что проект недокручен, что можно сделать его ещё лучше. Часто такое ощущение возникает из-за неправильно подобранных отступов. Ну а про авторитетность Бычкова... Он классный спец, но не стоит ровняться на одного человека. Лучше изучите разные подходы к работе и выработайте свои правила. Гугл, в которой работают тысячи крутых специалистов, для вас авторитет?

@matthewmacarenkoff3807 7 ай бұрын

@@catriarchiv ну у бычкова основной аргумент в пользу десятичных (и это не только про отступы) что верстальщикам больше "нравятся" эти числа, в целом как то так. твой коммент прочел, спасибо за мнение, попробую такую систему, возможно она покажется мне предпочтительней