Учимся мыслить в REM. Разговор об очевидном и о производительности труда в небольшой веб-студии

главная картинка
В течение некоторого времени мне в руки попадали различные макеты, сделанные как известными дизайнерами, так и не очень, а также сайты, которые верстались по этим макетам. Одни были симпатичными, другие немного старомодными, третьи — просто ужасными. Переодически и сам решал задачи по верстке, в том числе и pixel-perfect, и постепенно пришел к пониманию, что все размеры в макетах выбираются почти всегда от балды относительно случайным образом, что привносит в результат некоторую неоднородность, а в процесс верстки — лишнюю головную боль, костыли и потраченное время. В данной статье я бы хотел поделиться некоторыми размышлениями и экспериментами по этому поводу.


Каша в голове


Речь пойдет о небольшой компании, которая занимается созданием сайтов в относительно большом количестве. Здесь не будет рассуждений на тему цвета, обработки фотографий или рисования логотипов и иконок. Мы будем рассуждать о размерах. Размеры бывают разные — размеры отступов, размеры шрифтов для обычного текста и заголовков, иконки, кнопки, border-radius, отступы для теней, смещения элементов… вообщем много их. Человек, не занимающийся дизайном, скорее всего никогда не задумывается на тему того, как эти размеры выбираются. Да и я тоже не задумывался, пока не поймал себя на вышеупомянутой мысли о случайном выборе.


Для того, чтобы понять мышление дизайнера я отправился на ТыТрубу и поискал там уроки по веб-дизайну для начинающих. Ведь во многих небольших студиях работают именно начинающие дизайнеры, которые учились по такого рода урокам. Их некому поправить и они делают все так, как привыкли. Просмотрев несколько десятков популярных уроков возникло странное чувство. Очень странное. Такое ощущение, что про идеологию выбора размеров для элементов интерфейса там не было сказано ни слова. Зато часто встречались выражения вроде «тут примерно 50 пикселей», «нужно сделать немного побольше», «добавим отступ»,»5–6–7… ну где-то 8 пикселей». Некоторые элементы позиционируются явно на глазок. В результате начинающие дизайнеры начинают тоже делать что-то по интуиции и оперируют абстрактными понятиями и взятыми с потолка числами. Хорошо, если начинающему на глаза попался какой-нибудь хороший стайлгайд и он понял, что унификация — это хорошо. Но все сайты разные, а стайлгайды не универсальные, и опять начинается что-то странное…


На первый взгляд — ну и ладно, ведь верстальщик не жалуется, а заказчик, который в дизайне вообще не смыслит (в его сознании желтый текст по розовому фону — это именно то, что нужно) одобрил макеты:


и так сойдет


Но что, если… проблема тут все-таки есть? Особенно сильно она проявляется в ситуации, когда по какой-то причине решили делать pixel-perfect. Для того, чтобы понять всю боль ситуации, нужно посмотреть на все с точки зрения верстальщика. При создании макета значительную часть работы (при верстке пиксель в пиксель это может приближаться к 80–90% всего потраченного времени) занимает перенос размеров с макета. Если изначально размеры были выбраны странным образом — этот процесс превращается в бесконечный поток чисел: та самые размеры отступов, размеры шрифтов для текста и заголовков, иконки, кнопки, border-radius, отступы для теней, смещения элементов, числа, числа, числа… причем от элемента к элементу они плавают, создавая в голове невероятную кашу. Некоторые инструменты ускоряют этот процесс, но не избавляют от него. Код превращается в набор магических констант и подпорок на несколько пикселей. Верстка одной страницы может занимать невероятно много времени. Столкнувшись с этой проблемой лоб в лоб появились некоторые мысли, которые дали довольно занятный эффект в долгосрочной перспективе.


Мысль первая.


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


Цели:


  • Уменьшить кашу в голове
  • Убрать горы магических чисел из кода
  • Добавить однообразности в интерфейс

Мысль вторая


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


Цели:


  • Увеличить продуктивность работы верстальщика
  • Освободить часть времени дизайнера

Пытаемся применить это на практике


Первое, о чем нужно задуматься — единицы измерения. Достаточно очевидным фактом, является то, что пиксель — не интуитивно понятная единица. Мы не можем с уверенностью определить 7, 12, 18 или 23 пикселя на экране. Тем более, что такие значения не являются простыми и запоминающимися. Исходя из возможностей css был сделан вывод, что хорошей идеей будет попробовать единицы rem. Поскольку имея на странице один «эталонный» размер шрифта (1rem) мы можем от него считать размеры других элементов. Причем происходит это на уровне интуиции. Нужно только выбрать набор более-менее различимых значений.


Человеческий глаз позволяет нам хорошо отличить где-то ¼ от предмета. Исходя из такой простой мысли была построена следующий набор значений: 1, 1.25, 1.5, 1.75, 2, 3, 4, 5.


8 значений


Как можно заметить, набор простой и запоминающийся. Для некоторых технических нужд нам иногда нужны размеры меньше эталона, для этой цели были выбраны 0.3, 0.5 и 0.8:


11 значений


Почему именно эти? Не знаю. Методом тыка Методом проб и ошибок были получены именно такие значения. При этом каждое значение из набора имеет свой логический смысл:


  • 0.3: малый border-radius, некоторые технические вещи вроде подчеркиваний
  • 0.5: большой border-radius, горизонтальные отступы между иконкой и текстом, некоторые отступы между шрифтами разного размера в заголовках
  • 0.8: малый размер шрифта (теги, даты постов, подписи и.т.д.)
  • 1: эталонный шрифт, вертикальный и горизонтальный отступ по умолчанию для всего, что только есть (включая отступы в сетке, разумеется)
  • 1.25: увеличенный шрифт
  • 1.5: увеличенный шрифт для больших заголовков
  • 1.75: увеличенный шрифт для больших заголовков (заменяет 1.5 в случае некоторых шрифтов)
  • 2: большой шрифт, большие отступы во всех направлениях
  • 3: большой вертикальный отступ
  • 4: большой отступ между секциями
  • 5: большой-большой отступ между секциями (имеет смысл в лендингах, когда на стыке секций в верхней отступ делается больше чем в нижней)

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


Попробуем что-нибудь сделать


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


Как мы начинаем делать сайт? — делаем набросок с расположением блоков. Вполне вероятно, что прямо при клиенте. Получаем что-нибудь такое:


набросок


Дальше дизайнер начинает что-то там делать, выбирает цвета, рисует иконки… А пока он всем этим занимается мы сделаем болванку для страницы. Смотрим на табличку (если еще не запомнили) и начинаем верстать. Да вот так сразу. А кто сказал, что нельзя? Очень даже можно.


лендинг
исходники


Как можно заметить, уже получается по крайней мере не очень противно. Понятно, что это только болванка, но она наводит на мысль, что в некоторых случаях можно вообще без дизайнера обойтись. Да, доработка требуется (адаптивность отсутствует, но это и иллюстрация не про нее), но в целом — это уже выглядит лучше, чем то, что делают половина провинциальных студий. При этом времени на все ушло совсем немного.


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


При таком подходе производительность труда в связке дизайнер+верстальщик возрастает невероятно. Появляются определенные мысли на тему сокращения рабочего дня и чередования плотной работы с не менее плотным отдыхом, но это тема для отдельной статьи.


В случае, если мы работаем все-таки по классической схеме «сначала макет, потом все остальное» — время, уходящее на верстку, практически не увеличивается, так как рассуждения относительно размеров остаются прежними. Получается, что в любом случае мы можем тратить меньше времени на монотонную работу. Хотя появляются определенные требования к дизайнеру в плане «использовать размеры из списка», это некоторых сильно не устраивает.


Заключение


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


Было бы интересно услышать ваше мнение по этому вопросу. Пробовали ли вы ввести схожую универсальную систему, верстать не имея макета, и что из этого получилось? Насколько доволен ваш верстальщик тем, что он делает, и были ли какие-то идеи об улучшении производительности его труда?

Комментарии (19)

  • 24 марта 2017 в 21:36

    +1

    Не стоит забывать, что для разных разрешений жестко заданные отступы могут некрасиво играть.
    Обычно для базового шрифта сейчас принято брать 16 px и на мобильных часто этот размер шрифта тоже не меняется, по крайней мере, в большинстве фреймворков. А, например, вертикальный отступ внутри блока в 2rem на мобильнике и на десктопе будет выглядеть совершенно по-разному, поэтому обычно надо использовать хотя бы 2 набора отступов для экранов ниже и выше среднего. Для этого можно использовать CSS шлюз, потому что делать шрифт меньше не имеет особого смысла
  • 24 марта 2017 в 22:17

    0

    В адаптивном дизайне, лучше начинать с маленьких экранов и задавать адаптацию к большему разрешнию.
    Давно уже думал о стандартизации размеров и как к этому дело подойти. Прдложенная схема полезна и для больших растущих проэктов. Так как именно в больших порэктах не каждая мелочь имеет свой дизайн.
  • 24 марта 2017 в 22:44

    +2

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


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


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


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

    • 25 марта 2017 в 10:10

      +6

      Когда верстальщику разрешено использовать своё чувство пропорции — это прям идеальная среда обитания. Но у всех (заказчиков, менеджеров и тех же дизайнеров) в голове засело мнение что если заказчик согласовал макет, (он не смотрел на то что отступы у одного и того же элемента на разных страницах разные), то макет является истинной последней инстанции, вместе со всеми своими багами и не дай бог верстальщик сделает что-то на своё усмотрение.
    • 25 марта 2017 в 11:07

      0

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

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

      Дизайнера научить кодить очень быстро и качественно (но сколько такому дизайнеру придется заплатить за такую эффективность? Он еще и придумывает-рисует-прототипирует-пишет?) Или в верстальщика вселить чувство пропорций. Что из этого проще — решит бизнес.

  • 25 марта 2017 в 10:11

    0

    В западном вебе давно есть такая методология — 8 pixel grid. По-моему, вы изобрели её аналог, только в профиль
    • 25 марта 2017 в 11:14

      +1

      Сколько ни читал про 8 px решетку — так и не смог применить в реальной жизни. Восьмипиксельная сетка разве что для маштабирования иконок работает отлично.

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

      • 25 марта 2017 в 11:30

        0

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

        • 25 марта 2017 в 12:01

          +1

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

          Как задизайнить и сверстать vk, fb, habrahabr или smashingmagazine на восьмипиксельной сетке — непонятно. Применяя её выходит каша, как и прежде. Зато пропорции из статьи можно вставить в любой css-фрейморк и получить приемлемый дизайн.

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

          Гайдлайны material-design в 8 px grid — вот там это работает.

          • 25 марта 2017 в 12:12

            0

            Что такое нормальные пропорции?
            Повторюсь, не 8 px, а pt. Это абстракция, как и rem.
            Каши не выходит, т.к. правило одно — все кратно 8. Не будет отступов 5, 7, 9 пикселей, от чего и уходит автор. Соблюдается вертикальный ритм и сетка.
            Это, как мне кажется, проще, чем 0.3, 0.5, 0.8, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5.

      • 25 марта 2017 в 15:23

        0

        1,62 — правильнее, это золотое сечение. Ну и еще числа Фибоначчи надо добавить.

    • 25 марта 2017 в 11:29

      0

      Или 8 point grid system?…
      • 25 марта 2017 в 11:34

        0

        Поправил уже выше, спасибо
  • 25 марта 2017 в 11:32 (комментарий был изменён)

    0

    Del
  • 25 марта 2017 в 15:21

    0

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

  • 25 марта 2017 в 15:36 (комментарий был изменён)

    0

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


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

  • 25 марта 2017 в 19:51

    0

    У меня давно уже подобная система используется, но правда с более жесткими рамками. Когда стало очевидно, что большинство дизайнеров рисуют макет, а не проектируют, я решил делать дизайн самостоятельно сразу в браузере (full-stack designer этакий)). Проблема с согласованием макета исчезла, однако скорость создания сайта увеличилась из-за необходимости самому искать картинки по стокам и прочих рутинных процессов.
    • 25 марта 2017 в 22:18

      0

      Проблема с согласованием макета исчезла, однако скорость создания сайта увеличилась из-за необходимости самому искать картинки по стокам и прочих рутинных процессов.
      Вы где-то «не» пропустили, или я чего-то не понимаю?
      • 26 марта 2017 в 00:38

        0

        Да, извиняюсь)
        Скорость уменьшилась)

© Habrahabr.ru