Подписка на блог

РСС — лучше всего

Ещё есть автоматические трансляции в Тумблере и Же-же. Если что-то не работает, напишите мне: ilyabirman@ilyabirman.ru.

Вёрстка

Вёрстка неформатированного текста

Первый навык вёрстки, который должен приобрести дизайнер — использование неформатированного текста. Например, в электронной почте.

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

В то же время, самый важный инструмент вёрстки — это отступы. А в неформатированном тексте это просто единственный способ показать структуру. Причём отступы ещё и обязательно кратны высоте строки. Так что если дизайнер не в состоянии аккуратно написать электронное письмо, то уж тем более нельзя ожидать от него аккуратного текста с бо́льшим числом выразительных средств.

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

2017   вёрстка   дизайн   студентам

Курс Игоря Штанга «Типографика и вёрстка»

Сходил на курс Игоря Штанга «Типографика и вёрстка», остался доволен. Курс состоит из трёх больших дней и одного вечера разбора домашки.

Первый день

«Бегство от серого прямоугольника». В первой теме, до всякой глубокой теории, Игорь даёт шесть способов превратить серый прямоугольник текста во что-то интересное. Бери и используй.

«Классический стиль». Рассказывает не просто о признаках классического стиля, а о ценностях и технологиях, которые повлияли на его формирование. Проводит параллели с живописью, архитектурой. Это помогает понять классический стиль как единую систему, а не случайный набор приёмов. Например, зачем в начале главы стоит буквица, а первое слово набрано капителью? Как это связано с выключкой по ширине и отсутствием крупных заголовков? Эти детали — следствие общей идеи минимизации контраста, уравновешивания всего. Гравюры работают на это же — хорошая гравюра по «тону» дружит с полосой текстом, выглядит такой же средне-серой. В конце темы — рассказ о том, что форматы, возникшие в 19 веке (газеты, реклама) обнаружили недостатки классического стиля. Из моего конспекта: «Когда на полосе несколько рекламных блоков, выглядит ужасно. Центрирование не работает. Прекрасные шрифты не работают. Полоса не компонуется». Поиск новых способов вёрстки, разрешающих эти проблемы, и привёл в конечном итоге к появлению швейцарского стиля.

«Швейцарский стиль». Здесь все ценности перевернулись: контраст стал важнейшим выразительным средством. Заголовки застремились быть крупными против мелкого текста. Текст захотел концентрироваться в одной части макета, а не равномерно заполнять его. Фотография стала допустимым элементом книги, несмотря на полную графическую противоположность тексту — именно потому, что контраст перестал считаться злом. Скромные внутретекстовые выделения курсивом и капителью заменились контрастными жирным и цветным. Сетка стала абсолютным принципом.

У Игоря на практике успеваешь сделать несколько итераций, следуя его советам. Мне надо было сверстать дореволюционное русское объявление в швейцарском стиле. Одна из версий вышла такая:

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

Второй день

«Конструкция». Формат и поля. Три принципа позиционирования элементов на плоскости: формат, сетка, форма. Модульность. Шесть способов закрыть прямоугольник без кирпичной кладки. Шесть способов использовать сетку так, чтобы не было скучно. Сетка. Известная мысль, что сетка по себе не является конструкцией (и что она для выравнивания, а не компоновки), у Игоря звучит звонче и яснее, чем где-то ещё, потому что противопоставляя, он объясняет, что именно называет конструкцией.

Третий день

«Простая и сложная вёрстка». Странное название темы; речь тут идёт о более мелких деталях. Выключка, красная строка, заголовки, рубрикация, отступы, списки, таблицы, иллюстрации, линейки, рамки, плашки.

Надо было сверстать табличку. Ну это меня хлебом не корми. Получилась такая:

«Алгоритм вёрстки». У Игоря был пост, но я его не понял, на курсе было яснее.

«Наглядная типографика». Небольшая тема про всякие игры с формой букв.

Домашка

Домашка называется аж «Курсовым проектом». Надо было сверстать мартовскую афишу челябинского камерного театра. Я придумал, что пусть она здоровенная висит на театре:

И в неё, короче, весь месяц не влез целиком, а уже пора было бежать на разбор:

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

2016   вёрстка   дизайн   типографика

Что почитать на выходных — 117

Вот:

  1. Designing for The Grand Budapest Hotel. «I remember they corrected the rather wide kerning between the letters A and N, and we asked them to widen it again just like it was in the reference». И ещё: «The signs really added to the claustrophobic feeling of that set, and Wes had asked for them all to be black with simple white hand-painted lettering — based on the style of the old sign at Yorckstrasse subway station in Berlin».
  2. The Psychology of Pricing: A Gigantic List of Strategies.
  3. No one could see the color blue until modern times.
  4. Как я делал афишу курса.
  5. March 2015 Security Incident and the Launch of Two Factor Authentication. Вот как надо писать, если вы облажались.
  6. Test drive of a petrol car. Как-то было похожее про биткоин против бумажных купюр.

Заголовку не нужно двоеточие

Иногда делают так:

Фичи:
Вайфай
Батарея на 10 часов
Ретина
Плюшки

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

Заголовку не нужно двоеточие:

Фичи
Вайфай
Батарея на 10 часов
Ретина
Плюшки

Обобщающему абзацу не нужно жирноты:

Фичи:
вайфай,
батарея на 10 часов,
ретина,
плюшки.

Подчинение здесь достигается правильным графическим оформлением элементов списка.

Что почитать на выходных — 107

Дизайнерский спецвыпуск:

  1. 13 Ways Designers Screw Up Client Presentations. Майк Монтейро. Многое из этого, если не всё, было у него в книжке Design is a Job (крайне рекомендую, заметка сгодится в качестве затравки). Оказывается у него есть ещё и вторая книжка.
  2. Три способа закрыть прямоугольник. Игорь Штанг.
  3. The laws of shitty dashboards. Всё так.
  4. Visceral Apps and You.
  5. Voice interfaces. Дастин Кертис. Кстати, да.
  6. Side drawer navigation could be costing you half your user engagement.

Однажды в Википедии: Long s

2014   вёрстка   Википедия   дизайн   чтиво

Что почитать на выходных — 102

Вот:

  1. Выключка по центру: примеры, ошибки, как сделать. Игорь Штанг продолжает серию.
  2. Больше панка, меньше ада — как анархисты и комики 
вывели из кризиса исландскую столицу. Непонятно всё же, как вывели, но клёво.
  3. «Theater» vs. «Theatre»: The Great New York Times Language Swap. Оказывается, theater — исконно-английское написание, которое было вытеснено вариантом theatre в 18-м веке.
  4. Designers Who Don’t Talk Like Designers Get Hired.
  5. Критерии качества информационной статьи. Максим Ильяхов
  6. Рассказ о себе. Максим Ильяхов
  7. A Candid Look at Unread’s First Year. Широко обсуждавшаяся статья Джареда Синклера о том, что написать очень клёвое приложение и получить хорошие отзывы топовых блогеров — не гарантия успеха.

Что почитать на выходных — 101

Вот:

  1. It’s a Windowful Life. Как могли бы работать полосы прокрутки, если бы Эпл их не передизайнил после той жести, которую придумали в «Ксероксе». В тексте автор ссылается на видео с кучей деталей функицонирования разных выживших и не выживших интерфейсных элементов. Удивительно, насколько очевидным и единственно верным сейчас кажется то поведение, которое, на самом деле, было придумано далеко не сразу.
  2. How To Make Tilt Scrolling That Doesn’t Suck. Марко Армент тоже вот про скроллинг.
  3. Игорь Штанг рассказывает о выключке по формату и по левому краю.
  4. Как общаться с клиентом. Илья Синельников.
  5. Why blurring sensitive information is a bad idea. Я всегда чувствовал, что блюр можно сфокусировать обратно брутфорсом — ну так оно и есть.

Абсолютно относительно

В ЦССе постоянно приходится делать абсолютно позиционированные элементы внутри относительно позиционированных, чтобы «привязаться» к какой-то плавающей точке в нормал-флоу. Это тупизм, потому что это вынуждает в разметке добавлять лишние элементы. Например, нам надо пририсовать к слову значок суффикса, который у нас есть в виде гифовой картинки. Вот что хочется писать в разметке:

слов<img class="suffix" src="i/suffix.gif" />ечко

Но что написать в стилях?

.suffix {
  position: ???
  width: 1.5em; /* на три буквы чтоб */
  bottom: -1em;
}


Относительно позиционированный элемент занимает собой места в нормал-флоу столько же, сколько непозиционированный, а потом может быть сдвинут относительно этого места так, что нормал-флоу этого не заметит. В нашем случае это не подходит, потому что будет разрыв между «слов» и «ечко» шириной в картинку.

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

Поэтому всё время приходится делать так:

слов<span class="suffix"><img src="i/suffix.gif" /></span>ечко

.suffix { position: relative }
.suffix img {
  position: absolute;
  width: 1em;
  bottom: -1em;
}


Спан, конечно, красивее было бы закрыть после «ечк», но это не про семантику заметка. Так вот, весь этот спан, получается, существует только для того, чтобы задать «систему координат» для картинки. Но ведь она уже задана тем, куда вы воткнули эту картинку в разметке!

Так почему было не придумать какой-нибудь position: anchored, который бы участвовал в нормал-флоу, но с точки зрения нормал-флоу имел бы размеры 0 на 0? Можно было бы развить идею, введя anchored-x и anchored-y, чтобы, допустим, сделать сноски на поля, висящие на уровне того места, откуда на них ссылаются. Атрибут position: anchored-y означал бы, что left / right для этого элемента имеют смысл по принципу position: absolute; а top / bottom — по принципу position: anchored, т. е. относительно точки, где элемент встретился в разметке. Тогда текст, снесённый на поля, можно было бы размечать так:

Пушкин писал<sup>1</sup><div class="sidenote"><sup>1</sup> В «Капитанской дочке»</div>: «Береги честь смолоду».

.sidenote {
  position: anchored-y;
  left: 110%; /* чтобы отступить от самого текста 10% его ширины */
  top: 0;
}


Почему создатели стандартов придумывают всякую хрень (вроде box-shadow или анимации) раньше, чем решают базовые задачи вёрстки?

Добавлено несколько позже: Оказывается, я ничего не понимаю в вёрстке. Спасибо комментаторам за прояснение ситуации.
2010   веб-разработка   вёрстка   ЦСС

Итоги 74

Итоги 74 — местная бесплатная газета, а так хорошо свёрстана, приятно посмотреть.

Итоги 74

Более того, они пишут букву ё:

Итоги 74: буква ё

Здорово!

Update: Позвонил им в редакцию, сказать, какие они молодцы.
2006   вёрстка   дизайн   Челябинск