2 заметки с тегом

вёрстка

Слова и образы

Люди любят давать названия событиям, вещам и эмоциям. Слова — как способ коммуникации — вызывают картинки в голове и чувства в теле. Пережил, увидел, ощутил — расскажи и поделись опытом. Так строится коммуникация.

Слово

Большинству вещей нужно объяснение или подпись. Уберите текст с плаката Лисицкого, и он превратится в хаос геометрических фигур:

Можно оставить только подпись и превратить её в рисунок: сделать крупной, шумной, яркой. Удачный графический приём приумножит суть слова:

Вначале было слово

Глагол

В 1969 году штат Вирджиния заказал айдентику для туристической кампании:

Любовь 70-х, понятный образ и типографика: всё было круто. Даже сегодня штат использует этот слоган, а каждый американец знает, где искать любовь. Но Вирджинии не подражают как Нью-Йорку:

Дело не только в лаконичности и простоте. Сердечко в знаке Вирджинии — лишь буква, часть существительного, без которого образ потеряет смысл. У Нью-Йорка сердечко — глагол. Если слово вызывает картинку в голове, то глагол заставляет её двигаться.

Любовник < Любить

Контекст

В 1949 году Пабло Пикассо нарисовал голубя для плаката ко «Всемирному конгрессу сторонников мира»:

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

Через 45 лет к 50-й годовщние окончания Второй Мировой войны Лекс Древински нарисовал свой плакат:

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

***

Эта заметка — обрывки лекции Андрея Логвина «Я бы обнял тебя, но я просто текст». Возвращаюсь к ней, если не могу найти удачный приём или метафору. Когда нахожу — сразу так спокойно, ведь…

Слово, движение и контекст — формула крепкого образа

5 апреля   вёрстка   образ   слова   типографика

Скрипт для приводности

ds-steelline.by — проект, на котором удалось применить приводность

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

Однажды мне удалось убедить команду использовать приводность на проекте. Аргументы: что-то про дисциплину дизайнера и верстальщика, согласованность, дизайн-система и т. д. Но мой истинный мотив был: попробовать как у Бюро. Интересно же.

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

Чтобы победить рутину, написал скрипт:

(function() {
  var body = document.body;
      gridCreate = document.createElement('div');

  gridCreate.id = 'overlay-grid';
  body.appendChild(gridCreate);

  var grid = document.getElementById('overlay-grid');
      gridPosition = 0;
      gridSize = 10;
      bodyHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight);

  grid.style.cssText = 'display: none; position: absolute; top: 0; width: 100%; pointer-events: none;'
  grid.style.height = bodyHeight + 'px';
  grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
  grid.style.backgroundColor = 'rgba(255, 0, 0, 0.05)';
  grid.style.backgroundImage = 'linear-gradient(180deg, #777 0.5px, transparent 0)';

  document.onkeydown = function(e) {
    if (e.keyCode == 71 && e.ctrlKey) {
      if (grid.style.display == 'none' ) {
        e.preventDefault();
        grid.style.display = 'block'; }
      else {
        e.preventDefault();
        grid.style.display = 'none'; }
    }
    if (e.altKey && e.key == 'ArrowUp') {
      e.preventDefault();
      gridSize++;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (e.altKey && e.key == 'ArrowDown') {
      e.preventDefault();
      gridSize--;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (grid.style.display == 'block' && e.key == 'ArrowDown') {
      e.preventDefault();
      gridPosition++;
      grid.style.top = gridPosition++ + 'px';
    }
    if (grid.style.display == 'block' && e.key == 'ArrowUp') {
      e.preventDefault();
      gridPosition--;
      grid.style.top = gridPosition + 'px';
    }
  }
})();

Запускается в консоле. Создаёт скрытый блок с сеткой. Сочетание ctrl + G показывает и скрывает сетку. Стрелки ↓↑ опускают и поднимают её на один пиксель. Alt + ↓↑ меняет интерлиньяж. По-умолчанию стоит 10px, поменять можно в переменной gridSize.

Использую когда нужно отсматривать текстовые страницы. Верстальщикам нравится. И вы попробуйте.

9 февраля   js   вёрстка   сделал   типографика