Comments 22
Не стоит забывать, что для разных разрешений жестко заданные отступы могут некрасиво играть.
Обычно для базового шрифта сейчас принято брать 16px и на мобильных часто этот размер шрифта тоже не меняется, по крайней мере, в большинстве фреймворков. А, например, вертикальный отступ внутри блока в 2rem на мобильнике и на десктопе будет выглядеть совершенно по-разному, поэтому обычно надо использовать хотя бы 2 набора отступов для экранов ниже и выше среднего. Для этого можно использовать CSS шлюз, потому что делать шрифт меньше не имеет особого смысла
В адаптивном дизайне, лучше начинать с маленьких экранов и задавать адаптацию к большему разрешнию.
Давно уже думал о стандартизации размеров и как к этому дело подойти. Прдложенная схема полезна и для больших растущих проэктов. Так как именно в больших порэктах не каждая мелочь имеет свой дизайн.

Заставить дизайнера привязываться к таким размерам (если он работает много, и быстро и заказчики просят его поиграться со всем, с чем только можно) будет очень сложно.


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


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


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

Когда верстальщику разрешено использовать своё чувство пропорции — это прям идеальная среда обитания. Но у всех (заказчиков, менеджеров и тех же дизайнеров) в голове засело мнение что если заказчик согласовал макет, (он не смотрел на то что отступы у одного и того же элемента на разных страницах разные), то макет является истинной последней инстанции, вместе со всеми своими багами и не дай бог верстальщик сделает что-то на своё усмотрение.
Верно, либо дизайнеру дать инструмент типа Webflow (и тогда результат придется ждать ооочень долго). Но не будет проблем с отступами с разницей в 1px. Либо дизайнер сам все собирает в html (тоже долго)
Современные инструменты и «дизайн-системы» не решают всех проблем со стороны дизайна.

Либо в верстальщика вселить чувство пропорций.

Дизайнера научить кодить очень быстро и качественно (но сколько такому дизайнеру придется заплатить за такую эффективность? Он еще и придумывает-рисует-прототипирует-пишет?) Или в верстальщика вселить чувство пропорций. Что из этого проще — решит бизнес.
В западном вебе давно есть такая методология — 8 pixel grid. По-моему, вы изобрели её аналог, только в профиль
Сколько ни читал про 8px решетку — так и не смог применить в реальной жизни. Восьмипиксельная сетка разве что для маштабирования иконок работает отлично.

Советы из статьи работают хорошо. Когда хочешь быстро сделать нормальную типографику — используй соотношений 1.25, 1.4. Волшебные цифры и пропорции проверены временем, просты для запоминания, используются и в типографике и в полиграфии и в вебе.

Я немного неточно выразился. 8px — частный случай 8pt сетки, когда 1pt = 1px. В вашем же случае, когда базовый кегль 16px, то 1pt = 2px, в терминологии 8pt grid.
Тут основная идея в том, что почти все основные разрешения кратны 8 (хотя бы по одной стороне), и удобно масштабировать.

Как я понял идею статьи — мы можем даже не знать про базовый кегль в 13px или отступы в 10px и многое другое. Но благодаря нормальным пропорциям все получается с разными макетами.

Как задизайнить и сверстать 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,62 — правильнее, это золотое сечение. Ну и еще числа Фибоначчи надо добавить.

Это называется сетка и вертикальный ритм. В статье высказаны правильные мысли, но только на этом велосипеде уже сто лет катаются.

Браузер вычисляя число пикселей будет получать нецелые координаты элементов и округлять их куда попало. В результате у вас все будет скакать туда-сюда на 1 пиксель.


Поэтому лучше за базовый размер брать, 24 (=2х3х4) или 20 (проще для вычислений в уме).

У меня давно уже подобная система используется, но правда с более жесткими рамками. Когда стало очевидно, что большинство дизайнеров рисуют макет, а не проектируют, я решил делать дизайн самостоятельно сразу в браузере (full-stack designer этакий)). Проблема с согласованием макета исчезла, однако скорость создания сайта увеличилась из-за необходимости самому искать картинки по стокам и прочих рутинных процессов.
Проблема с согласованием макета исчезла, однако скорость создания сайта увеличилась из-за необходимости самому искать картинки по стокам и прочих рутинных процессов.
Вы где-то «не» пропустили, или я чего-то не понимаю?
Здравствуйте! Подскажите, а что за формула у Вас в примере для расчета размера шрифта?
Вот про эту спрашиваю -> calc( 12px + (20 — 12) * ((100vw — 400px) / ( 1200 — 400))). Откуда взяты эти цифры? И где про это почитать можно?
Only those users with full accounts are able to leave comments. Log in, please.