Как стать автором
Обновить

Как создать устойчивую и гармоничную систему отступов в дизайне для более быстрой разработки

Время на прочтение 8 мин
Количество просмотров 58K
Всего голосов 14: ↑13 и ↓1 +12
Комментарии 29

Комментарии 29

И?)
ККК аббревиатура небезызвестного движения
В английском варианте это звучит как Rule of 3 C's. А на русском получилось 3 К.
Статья отличная. Буду всем дизайнерам до ТЗ скидывать эту статью. А то вечные споры из-за непонятных отступов, размеров шрифта и прочее. Вебдизайн сфера достаточно точная. Очень сильно раздражают «я художник, я так вижу» дизайнеры.
С радостью бы еще прочитал статью, как сдавать готовый веб дизайн, а то недавно был спор с дизайнером, который утверждал, что у меня должен быть фотошоп на компе, а не он должен предоставить работу в приемлимом виде.
Большое спасибо!
А в каком формате вы предпочитаете получать макеты? Я вот в PSD всегда отдаю, проблем никогда не было. Ну и еще JPEG, для быстрого просмотра.
Я предпочитаю, когда кроме макета есть описание словами, где какой отступ используется.
Ведь когда дизайнер рисует, он не от балды элементы расставляет, а имеет в виду, условно говоря «здесь и здесь отступ одинаковый, там и там — тоже одинаковый, но другой».
Вот хотелось бы эти рассуждения видеть в текстовом виде, а не рассуждать по второму кругу над картинкой, что он имел в виду.
Номенклатура отступов обычно конечна — большой, маленький, средний и т.п. (конечно, с учётом, что для вертикальных и горизонтальных отступов может быть разная «линейка калибров», или, скажем, для текста и заголовка).
Зачем же текстовое описание, нормальные дизайнеры делают гайдлайны для которых не нужен текст
гайдлайны для которых не нужен текст

Это как?
Так это оно и есть. Всё, что нужно — написано текстом.
Я не дизайнер, слова «гайдлайн» не знал.
Что касается формата — глубоко до лампочки. Что пришлют — то и открою.
Статья интересная, перевод отстой.
Переводила сама, язык статьи был сложный. Если есть какие-то замечания по переводу, пишите, поправлю.
Насчет отстоя я пожалуй погорячился, извините. Текст порождает двоякое ощущение: с одной стороны хорошо видно, что переводчик старался, но с другой — чувствуется, что он «не в теме», плавает в терминологии. А научного редактора не нашлось.
Вот честно, я бы послал такого дизайнера куда подальше. Какого черта я должен считать все эти 4/8/12 пикселей? Всегда делаю расстояния кратные 5 или 10. Понятное дело, что автор сделала как удобно ей, привела все к единому стандарту, но это ж рехнуться можно. Она посидела, подумала, а ты потом стреляйся от этих дизайнеров.
С 2 и 4px возможно перебор, но для расстояний лучше отталкиваться от шрифта. У нас на сайте, например, шрифт 18px и все расстояния 9, 18, 27px.
Эк вы, уважаемый, замысловато признались в собственной некомпетентности…
В гугл с их материал дизайном и его сеткой, кратной 4, вас уже не возьмут :(
В своих макетах я использую простую и легко запоминаемую схему отступов. Основными значениями я выбрал 16, 20 и 24 px, т.к. использую их очень часто. Если нужны меньшие значения, то нужно просто поделить эти числа на два: 8, 10, 12 px. А если нужны большие, то умножить на два: 32, 40, 48 px. Для некоторых случаев могут понадобится более крупные отступы и вычислить их так же легко: 64, 80, 96 px и так далее.
Статься написана, для людей которые вообще не увидев макет верстают наугад? Или же дизайнеры в 2017 перестали сбрасывать киты, в которых всё прописано, или же скетч перестал показывать всё это? Чувство что статья ккк2012.
Статья 2017-го года.
Слишком много сомнительных решений в статье.

  • Расстояние между абзацами нельзя выбирать без учета боковых отступов текста в блоке — один и тот же абзацный отступ может быть и слишком большим (если в блоке с текстом маленькие внутренние отступы) и слишком маленьким (если текст просто висит посередине страницы).
  • Ошибочно применять одну и ту же пропорцию для расчета междустрочного расстояния и для текстовых абзацев и для заголовков и для одиночных надписей. С увеличением размера шрифта относительное междустрочное расстояние должно уменьшаться (вплоть до того что на очень крупных размерах шрифта соотношение размера шрифта и междустрочного равно единице ). Также то междустрочное, которое хорошо выглядит в абзаце, будет плохо выглядеть для коротких подписей.
  • Пункт в списке может быть и многострочным, но автор не тестирует отступы с таким вариантом.
  • Тестировать междустрочное на тексте «Paragraph text Paragraph text» — ну это такое, прям, очень сомнительно. Слова выстраиваются в колонки и невозможно понять — нормально ли это все будет выглядеть с обычным текстом.
  • Сам финальный дизайн не то чтобы выглядит хорошо, хоть и чуть аккуратнее чем было.


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

Забавно. Ваш подход использует ИИ при создании сайта. Те же отступы. Те же правила.

А что такое ИИ?
Искусственный интеллект.
Есть Erasmus Project — бот который делает адаптивные одностраничные сайты. Вот он использует правило 3-х К.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий