Заметьте — все, кроме заголовка, здесь сделано одним размером шрифта, 16-м.

Далее идут контейнеры для текста — инпуты и кнопки. Если в таких элементах тексты одинакового размера, то у них должны быть одинаковые вертикальные поля. Добавляем контейнеры и у нас получается система модулей:

Горизонтальные поля могут варьироваться у разных типов элементов. Кнопки лучше выглядят с более широкими боковыми полями, чем инпуты. Думаю это связано с выравниванием текста внутри элемента — то, что отцентровано, требует больше пространства.

На последнем этапе добавляем оставшиеся мелочи:

В данном случае информационные слои различаются размером и цветом шрифта. У второстепенного слоя шрифт мельче и светлее

Часто дизайнеры делают так:

Не знаю с какой целью увеличивают кнопку, возможно чтобы добавить выразительности.

Но потом нужна другая конфигурация формы и ой:

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

Хорошо если такая ситуация возникнет в начале и можно быстренько привести все к одному виду. Но если мы уже нарисовали 20 экранов с такими формами, придется на ходу придумывать костыли из нескольких видов кнопок.

В общем мораль

Инпуты, кнопки, области под иконки и любые другие элементы формы должны быть одной высоты, или кратные по высоте, чтобы из них можно было сложить все что угодно. Текст в пределах одного информационного слоя также должен быть одного размера. Продумывать эти вещи нужно в момент работы над самой первой формой в проекте, поскольку потом это может обернуться неоправданной тратой времени на переделку старых макетов.

Текстовый контейнер

Если бы я был Дональдом Трампом, я бы законодательно запретил эти кнопки в Скетче и Фигме:

В интерфейсных макетах нет ни одной ситуации, когда без них нельзя было бы обойтись. Не для того же мы слезли с (деревь..) Фотошопа, чтобы текст вгонять во фреймы. Особенно мерзко бывает, когда у текста еще забыли выставить констрейнтс и после серии ресайзов случается такое:

В Скетче контейнер хотя бы выполняет роль маски, но я не могу предположить зачем эта функция может понадобиться в Фигме.

Такое поведение текстов в макетах встречается очень часто. Если вы вдруг захотите нажать на одну из тех кнопок выше — просто переборите себя и не делайте этого. Серьезно.

Я в процессе переезда в Москву и осваиваюсь в Тинькофф, поэтому канал временно поставлен на паузу. Но мы скоро возобновим вещание, stay tuned.

Можете пока фоточки в инстаграме полистать https://www.instagram.com/filipp_lyakh/

Свершилось, автолейаут в Фигме: https://www.figma.com/blog/announcing-auto-layout/

Они и правда сделали его круче и легче чем в Скетче

2.0

В прошлый раз жизнь у этого канала оказалась недолгой, но давайте дадим ему второй шанс

Если вы не можете вспомнить что это и почему подписаны — я Филипп Лях, на работе все почему-то зовут меня Фил (я не против). Пять лет назад я работал дизайнером в студии Скада, завел этот канал, а потом уехал в Москву и устроился в Тинькофф. На канал стало не хватать сначала моральных сил, потом времени, потом опять времени — так прошло пять лет

За эти пять лет многое произошло. В Тинькофф я устроился в команду, которая делает внутренние интерфейсы. Я переделал кучу проектов, мы росли, превратились в отдел и я стал лидом одной из команд, потом ещё росли и превратились в направление, а я стал лидом отдела, т.н. дизайн-менеджером. И сейчас у меня в отделе 6 команд из 25 прекрасных дизайнеров, а также все интерфейсы нашей операционки (кроме представителей). А операционка у нас большая — что-то в районе 60к человек

Поскольку я имею склонность к рефлексии, графомании, а также поучению других нелегкой дизайн-жизни, странно что этот канал так долго молчал. Во второй серии будет меньше про практику в UI/UX, как это было ранее, и больше про процессы, карьерный трек, грейды там всякие. Но про дизайн тоже будет, куда он денется. В общем посмотрим, сколько канал продержится в этот раз, го