Комментарии 22
Давно уже думал о стандартизации размеров и как к этому дело подойти. Прдложенная схема полезна и для больших растущих проэктов. Так как именно в больших порэктах не каждая мелочь имеет свой дизайн.
Заставить дизайнера привязываться к таким размерам (если он работает много, и быстро и заказчики просят его поиграться со всем, с чем только можно) будет очень сложно.
Проще ввести регламенты для верстальщиков, чтобы они не расшибали себе лоб делая для каждой кнопки персональные отступы с разницей в 1 пиксель.
То есть, я считаю, проще вселить в верстальщиков чувство пропорций, чем заставлять париться дизайнеров, выравнивая элементы на макете после каждой правочки. Тем более, верстальщик должен чем-то подобным обладать, так как на дизайнах не всегда отображены все возможные варианты наличия элементов интерфейса и варианты их количества. Верстальщик не должен назло дизайнеру лепить с неразумными интервалами элементы там, где дизайнер не предусмотрел крайней ситуации.
Pixel perfect лично я считаю пройденной эрой, так как обилие устройств с экранами разного разрешения понтов этому принципу значительно поубавило. Использовать его необходимо, пожалуй, при разработке сложных интерфейсов с большим количеством повторяющихся элементов, и высокой их плотностью или для намётывания глаза.
Современные инструменты и «дизайн-системы» не решают всех проблем со стороны дизайна.
Либо в верстальщика вселить чувство пропорций.
Дизайнера научить кодить очень быстро и качественно (но сколько такому дизайнеру придется заплатить за такую эффективность? Он еще и придумывает-рисует-прототипирует-пишет?) Или в верстальщика вселить чувство пропорций. Что из этого проще — решит бизнес.
Советы из статьи работают хорошо. Когда хочешь быстро сделать нормальную типографику — используй соотношений 1.25, 1.4. Волшебные цифры и пропорции проверены временем, просты для запоминания, используются и в типографике и в полиграфии и в вебе.
Я немного неточно выразился. 8px — частный случай 8pt сетки, когда 1pt = 1px. В вашем же случае, когда базовый кегль 16px, то 1pt = 2px, в терминологии 8pt grid.
Тут основная идея в том, что почти все основные разрешения кратны 8 (хотя бы по одной стороне), и удобно масштабировать.
Как задизайнить и сверстать vk, fb, habrahabr или smashingmagazine на восьмипиксельной сетке — непонятно. Применяя её выходит каша, как и прежде. Зато пропорции из статьи можно вставить в любой css-фрейморк и получить приемлемый дизайн.
Веб может случайно попадать в восьмипиксельную сетку, но если ее игнорировать — результаты получаются быстрее и не хуже.
Гайдлайны material-design в 8px grid — вот там это работает.
Что такое нормальные пропорции?
Повторюсь, не 8px, а pt. Это абстракция, как и rem.
Каши не выходит, т.к. правило одно — все кратно 8. Не будет отступов 5, 7, 9 пикселей, от чего и уходит автор. Соблюдается вертикальный ритм и сетка.
Это, как мне кажется, проще, чем 0.3, 0.5, 0.8, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5.
Браузер вычисляя число пикселей будет получать нецелые координаты элементов и округлять их куда попало. В результате у вас все будет скакать туда-сюда на 1 пиксель.
Поэтому лучше за базовый размер брать, 24 (=2х3х4) или 20 (проще для вычислений в уме).
Вот про эту спрашиваю -> calc( 12px + (20 — 12) * ((100vw — 400px) / ( 1200 — 400))). Откуда взяты эти цифры? И где про это почитать можно?
Учимся мыслить в REM. Разговор об очевидном и о производительности труда в небольшой веб-студии