Pull to refresh

Comments 22

UFO just landed and posted this here
В адаптивном дизайне, лучше начинать с маленьких экранов и задавать адаптацию к большему разрешнию.
Давно уже думал о стандартизации размеров и как к этому дело подойти. Прдложенная схема полезна и для больших растущих проэктов. Так как именно в больших порэктах не каждая мелочь имеет свой дизайн.

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


Проще ввести регламенты для верстальщиков, чтобы они не расшибали себе лоб делая для каждой кнопки персональные отступы с разницей в 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.

UFO just landed and posted this here
Поправил уже выше, спасибо
UFO just landed and posted this here

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


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

У меня давно уже подобная система используется, но правда с более жесткими рамками. Когда стало очевидно, что большинство дизайнеров рисуют макет, а не проектируют, я решил делать дизайн самостоятельно сразу в браузере (full-stack designer этакий)). Проблема с согласованием макета исчезла, однако скорость создания сайта увеличилась из-за необходимости самому искать картинки по стокам и прочих рутинных процессов.
Проблема с согласованием макета исчезла, однако скорость создания сайта увеличилась из-за необходимости самому искать картинки по стокам и прочих рутинных процессов.
Вы где-то «не» пропустили, или я чего-то не понимаю?
Да, извиняюсь)
Скорость уменьшилась)
Здравствуйте! Подскажите, а что за формула у Вас в примере для расчета размера шрифта?
Вот про эту спрашиваю -> calc( 12px + (20 — 12) * ((100vw — 400px) / ( 1200 — 400))). Откуда взяты эти цифры? И где про это почитать можно?
Премного благодарен вам)))
Sign up to leave a comment.

Articles