Material Design на русском. Часть 8 — Отступы | by Ruslan Sharipov | Jan, 2021

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь. Работа с пространством осуществляется за счет базовой сетки, направляющих, прогрессивной шкалы отступов, работы с соотношением…

Отступы в списках – Дизайн-кабак

На курсе я рассказываю про верстку списков, и меня часто спрашивают, нужно ли прижимать первый пункт к верхнему абзацу. Вот так: Ответ: не нужно. Это смотрится так же несуразно, как висячая пунктуация. Список не выглядит отдельным блоком, а первый пункт похож на продолжение абзаца. Проблема особенно заметна, если пункта всего два. Первый слипается с текстом,…

Отступы в дизайне: системный подход

У нас не было системного подхода к решению. Если в верстке встречались заметные расхождения с макетом, то проблема фиксилась локально. Дизайнер составлял баг-репорт, фронтендер правил по чеклисту: вот здесь текст прилип к иллюстрации, а здесь не уследили за лейблом, который убежал к другому инпуту. Часто дизайнер садился рядом с фронтендером, и они вместе правили отступы…

Отступы в дизайне: системный подход

У нас не было системного подхода к решению. Если в верстке встречались заметные расхождения с макетом, то проблема фиксилась локально. Дизайнер составлял баг-репорт, фронтендер правил по чеклисту: вот здесь текст прилип к иллюстрации, а здесь не уследили за лейблом, который убежал к другому инпуту. Часто дизайнер садился рядом с фронтендером, и они вместе правили отступы…

Отступы в дизайне: системный подход – Дизайн-кабак

Как дизайнеры работают с системой Мы работаем в Скетче. Для вертикальных отступов подходят символы. У нас есть библиотека, в которой уже забит стандартный набор вертикальных отступов. Так выглядит шаблон, который дизайнер подгоняет под свои нужды Когда дизайнер понимает, какие отступы ему понадобятся, он берет символы из библиотеки и подгоняет под свои высоты и цвета. Потом расставляет вертикальные…