Кирилл Беляев: заметки с тегом вёрстка

Игра для интерфейсных дизайнеров

Кирилл Беляев — Wed, 03 Apr 2019 08:37:32 +0300

Сantunsee.space — в целом отлична игра для интерфейсных дизайнеров. Но есть спорные места. Ниже два примера.

Тут вопрос не в том, как красивее обрезана картинка, как по какому изображению проще выбрать товар: по полному, но мелкому или крупному, но обрезанному. И тут нет одного верного ответа, потому что если продаются микроны, то обрезать картинку, наверное, не страшно. А если какое-нибудь специфичное оборудование, то лучше показать целиком. Можно сказать, что если нужно обязательно показывать фотографии целиком, то фиксировать высоту карточки не стоит. И в общем случае это так. Но ситуации бывают разные. Что если 90% каталога какое-нибудь специфичное оборудование снята под нужный формат? а остальные разномастные. Разве можно в этом случае считать фиксированные карточки плохими или кропить фотографии?

А тут правильным считаю вариант с разделителем, который на самом деле — объединитель. Возможно, со средней точкой выглядит и лучше, но авторы явно не понимают сути. Илья Бирман 2014-го в помощь.

Выравнивание подписей с длинами сторон прямоугольника

Кирилл Беляев — Mon, 10 Sep 2018 13:42:22 +0300

Заметка о вёрстке специфичного блока в вебе. Большинству такое не пригодится. Пишу, потому что надеюсь показать пользу от применения свойств по назначению.

Верстали блочок с габаритами основания. Будь текст статичен, хватило бы СВГ. Но в английской версии мы помним об американцах и дублируем размеры в футах (и отбиваем дробную часть точкой):

В СВГ всё задаётся строго по координатам, хорошо масштабируется, но не умеет «адаптироваться» под содержание. Поэтому c СВГ не обойтись без двух шаблонов и надежды, что они выдержат подписи любой длины. Можно усилить СВГ скриптом, но для меня это выглядело суперлишним. Казалось, что справятся ХТМЛ с ЦССом.

Исходный ХТМЛ простейший:

<div>
    <span>22 м</span>
    <div></div>
    <span>14 м</span>
</div>

Первое, что решал: как выравнивать подписи по центру стороны. Понятно, что для верхней подписи нужен «text-align: center», но как ограничить длину подписи, чтобы она равнялась длине прямоугольника, а не всего родительского дива? Можно дублировать width для прямоугольника и подписи, но это не DRY и неудобно в поддержке. Выручило свойство box-sizing, которое говорит, как считать ширину и высоту элемента. Добавил родительскому диву «box-sizing: content-box» — указанные размеры элементы не будут включать падинги и обводки.

.rectangle {
    position: relative;
    box-sizing: content-box;
    padding-top: отступ, подходящий под высоту подписи; 
}

Теперь можно наследовать длину родителя и позиционировать подписи вне его:

.rectangle-width, .rectangle-height {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
}

.rectangle-width {
    width: inherit;
    top: 0;
    text-align: center;
}

Если текст длиннее отведённой длины, то он начинается от левого края и благодаря «white-space: nowrap» не переносится.

.rectangle-height {
    left: calc(100% + отступ от фигуры);
    top: 60%;
    transform: translateY(-40%);
}

Transform и top и выравнивают подпись и фигуру по горизонтали. Если родитель без падинга, сработает «top: 50%; transform: translateY(-50%)». В моём случае разницу в 20% нашёл на глаз.

В конце разбираюсь с прямоугольником. Ширину и высоту он наследует у родителя, а ровно поместиться в отведённые границы помогает свойство «box-sizing: border-box», которое, наоборот, включает падинги и обводку.

.rectangle-figure {
    display: inline-block;
    box-sizing: border-box;
    width: inherit;
    height: inherit;
    border: 1px solid цвет;
}

Итоговый ХТМЛ английской версии (без оформления футов):

<div class="rectangle" style="width: длина; height: высота">
    <span class="rectangle-width">22 m 72.2 ft</span>
    <div class="rectangle-figure"></div>
    <span class="rectangle-height">14 m<br>45.9 ft</span>
</div>

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

Дверь в обувную мастерскую

Кирилл Беляев — Tue, 12 Jun 2018 17:12:09 +0300

Ездили на рынок за ягодой. Обратил внимание на дверь обувной мастерской. Снять нормально не получилось, поэтому рядом — накрученная в Фотошопе копия:

Тут абсолютно крутая пиктограмма, которая освобождает от названия и логотипа. У меня это вторая такая находка, первая — парикмахерская:

Часы работы у обувной мастерской тоже выглядят лаконично: один шрифт и кегль, приятный контраст минималистичной пиктограммы и Таймс Нью Романа с засечками. Но я придрался к непоследовательным переносам строк, дефисам в диапазонах, избыточным «Darba laiks» (Часы работы — латышский) и нулям минут. Чинил бы так:

P. S. Собираю оформление рабочих часов в Скрапе.

Стиль кнопок и текста

Кирилл Беляев — Mon, 28 May 2018 10:57:06 +0300

Синхронизирую кнопки с текстовыми стилями. Обычно стилей 4-5, кнопок хватает трёх: размером с основной текст и с подзаголовоки 2-го и 3-го уровней. Или 2-го и 4-го — зависит от задачи. Для массового и броского — 1-го.

Такая синхронизация немного гасит шум и сильно упрощает сбор строк из текста и кнопок. А наличие принципа разгружает голову. При умелой вёрстке упрощает ЦСС и корректировки.

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

Книга растений

Кирилл Беляев — Fri, 18 May 2018 19:41:25 +0300

Полина рисует паттерны. Они в основном растительные, поэтому дома появилась книга с кучей иллюстраций растений. Помимо красивых растений, в книги приятная вёрстка. Снял 10 из 544 страниц.

Суперобложка:

Форзацы встречают большими цветами:

Содержание:

Вначале — история книги. Отсканировали старую книгу о саде Виллибальдсбургского замка (Германия), перевели текст, добавили пояснений, и получилась эта книга. Примечательна высокая плотность, маленькие поля и межколонник:

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

Пояснения:

Разворот без иллюстраций:

Подзаголовки, ломающие переключатель

Кирилл Беляев — Fri, 11 May 2018 12:40:31 +0300

Встретил в магазине такой переключатель:

С первого раза не осилил. Тут вроде нормальная структура: подзаголовок + радиокнопка для каждого элемента. Но выбрать пункт, не читая его подзаголовок, не получится. Выписал проблемы, чтобы понять что мешает.

В тексте:

пара «подзаголовок — лейбл к радиокнопке» в разных пунктах согласована по-разному (2-й лейбл вообще выглядит ошибкой, как будто не оттуда скопировали);
в 1-м пункте повторяются «Самовывоз» и во 2-м — «Доставка», скорее всего, дубли навязывает структура.

В вёрстке:

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

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

После перевёрстки повторы и рассогласованность ушли сами:

Способ получения	Стоимость
Самовывоз	Бесплатно
Доставка в регионы РФ	Сообщает оператор
Доставка по Санкт-Петербургу	300 рублей

Линейки сами по себе не отделяют и не объединяют

Кирилл Беляев — Thu, 15 Feb 2018 22:48:22 +0300

Линейки работают вместе с отступами. Сейчас покажу на примере.

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

Если просто убрать линейки, блоки собираются и отлично отделяются от соседей:

Если поставить линейки в конце или начале блоков — тоже работает:

Таблицы титрами

Кирилл Беляев — Thu, 18 Jan 2018 15:59:16 +0300

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

Если очень хотите титры, раздвиньте колонки сильнее:

Когда первая колонка такая однородная по ширине, левые флаги ещё аккуратнее:

Видео выходного дня: теория графического напряжения

Кирилл Беляев — Sat, 04 Nov 2017 20:44:22 +0300

Игорь Штанг просто объясняет напряжение в вёрстке. С 28 минуты начинаются вопросы, в которых мало интересного. Описание теории и симулятор.

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

Почтовые упаковка и документы

Кирилл Беляев — Mon, 17 Oct 2016 14:26:17 +0300

В Риге не найти некоторых товаров и марок. Нет Икеи, её товары возят и перепродают маленькие магазинчики. Или привозят под заказ. Только в конце лета открылся КОС.

Пустоту заполняют Амазон и другие интернет-магазины.

Чтобы платить НДС сразу при оформлении заказа, мы покупаем товары в европейских магазинах. Когда ещё не знал, купил у Тафти набор из четырёх книг. Без НДС напрямую получалось дешевле. На почте долго тупил, за что с меня хотят денег.

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

Магазинов Эйч-Энд-Эмa в Риге много, но ассортимент неполный. Дополнительный кайф интернет-покупки — бланк, который не получить в магазине:

А вот конверт «Королевской почты»:

Конвертик «Почты Китая». Если в посылке не электроника или товар дешевле 21 €, НДС платить не нужно.

Это потрясающий источник приёмов. И в то же время вялопаханое дизайнерами поле. Бумажки и коробки так увлекают, что с ними жалко расставаться. Поэтому перед тем как выкинуть, фотографирую их и складываю на отдельную доску в Скрап:

Если вы тоже таким занимаетесь, напишите мне на kirill@kipo.name.

Ремарка о выравнивании по центру

Кирилл Беляев — Sat, 19 Sep 2015 09:18:30 +0300

Читая прошлую заметку, Роман не всё понял. Дело, конечно, в слабом объяснении — мои формулировки ещё точить и точить. А пока они рыхлые, буду объяснять. Цитирую:

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

У левого флага левого отступа нет. Есть отступы от краёв страницы до крайних элементов. Область страницы без отступов (полей) называют форматом. Пример одной строки в формате — однострочный заголовок.

Если на странице одна строка, не выровненная с другими элементами, выключка исчезает вовсе.

Формат — контекст выравнивания (флага, выключки). Элементы выравнивают относительно формата, а потом относительно друг друга (внутри формата).

Посмотрите на кнопки.

Кнопки слабо относятся к вёрстке — у них своя история. Они попали на экраны из физического мира уже готовым элементом. Кнопки не мыслят, как текст на плашке.

Если предположить, что кнопка — отдельный формат, и применить к надписи левый флаг, кнопка сломается:

P. S. Спасибо Роману за комментарий.

Выравнивание по центру

Кирилл Беляев — Sun, 30 Aug 2015 11:33:04 +0300

По умолчанию шумнее флагового набора (а флаг шумнее выключки по формату). Потому что у него на отступ больше:

↦ Строка текста по центру ↤

И строка с флагом ↤

Читавшие Тафти, знают, что отступ — это тоже информация. А дополнительный отступ бывает лишним.

С увеличением числа строк, растёт и шум:

↦ Текст с центральным ↤
↦ выравниванием ↤
↦ в несколько строк ↤
↦ шумит, как трактор ↤

Текст с флагом ↤
в несколько строк ↤
шумит в двое тише, ↤
как гибрид ↤

Шум — не единственный критерий качества дизайна. Поэтому центральное выравнивание не табуировано полностью.

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

Новичкам советую вообще не использовать в интерфейсах выравнивание по центру.

Цветные плашки в модульной системе

Кирилл Беляев — Thu, 27 Nov 2014 20:55:35 +0300

Разберу тезис Мюллера-Брокманна о тексте на плашке:

Очень трудная задача возникает там, где в одной модульной сетке надо напечатать цветную плашку вместе с текстом. Цветная плашка и текст в этом случае имеют единые боковые границы. <...> Это выглядит неудачно. Есть два решения.

1. Цветная плашка печатается в размер модуля, а блок шрифта не занимает всю ширину, а со всех сторон отступает на несколько пунктов в зависимости от кегля шрифта. Получается, что блок шрифта стоит внутри цветной плоскости.
2. Цветная плашка с обеих сторон выходит за пределы колонки шрифта. Таким образом, блок шрифта опять стоит внутри цветной плоскости.

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

Автор не пишет, от чего зависит выбор.

Первый вариант

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

Второй вариант

Берут, если текст на плашке связан с текстом до и после неё. Так выделяют примеры. В этом случае главное — содержание, а оформление вторично. Поэтому текст идёт единой колонкой, а плашка лежит на втором плане и потому «не достойна» модуля. Плашки «второго плана» делают не активных цветов (пастельных). Иначе ровная гладь текста, которая достигается выносом плашки за модуль, будет нарушена. И глаз споткнётся о плашку, а уже потом продолжит чтение. Большие поля внемодульных плашек выглядят плохо, как уши Дамбо. Они делают плашку заметнее, что противоречит её задаче.

Межколонники суммируются

Кирилл Беляев — Thu, 30 Oct 2014 23:49:46 +0300

Йозеф Мюллер-Брокманн объясняет связь между кеглем, интерлиньяжем, длиной строки и высотой текстового блока. Комфортно читать строки длиной 7—10 слов. Следовательно, чем короче строка, тем меньше кегль. А чем выше блок текста (больше строк), тем больше будет интерлиньяж, но в диапазоне допустимого для выбранного кегля.

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

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

Чтобы организовать разнородную информацию на странице, Мюллер-Брокман делит её на колонки. Если информации много и она разнородна, подойдёт «швейцарский» четырёхколонник с колонками равной ширины и равными межколонниками. Такие колонки легко комбинировать: 1+1+1+1, 2+1+1, 2+2 или 3+1 (текст шириной в 4 колонки получается очень крупным, встречается редко). Чтобы быстро и аккуратно сверстать страницу, лучше взять флаговый набор (в узких колонках выключка по ширине всегда неаккуратна, оставим её для широкого формата). Описанные условия, приближают печатную страницу к странице на экране, поэтому метод вдвойне актуален.

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

Чтобы решить проблемы, отступаю от правил Мюллера-Брокманна и ввожу свои. Ширина блока в 3 колонки = ширина 3 колонок − ширина 2 межколонников:

В широком блоке межколонники между 1-й, 2-й и 3-й колонками не заполняются текстом, а суммируются с межколонником между 3-й и 4-й колонкой. Тот же принцип у блоков средней ширины

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

P. S. Это последняя заметка, которая выходит в обоих блогах. C ноября заметки о дизайнерском росте, типографике, подаче информации, интерфейсах, ведении проектов и городской среде читайте в блоге Кирилла Беляева (подробнее о переезде).

«Модульные системы в графическом дизайне» Йозефа Мюллера-Брокманна

Кирилл Беляев — Fri, 24 Oct 2014 19:55:43 +0300

Читая, понимал, что знаю почти все описанные правила вёрстки и типографики, и пользуюсь ими. Дочитав, понял, что книга хорошо собирает правила в систему. Поэтому полезна даже тем, кто знает советы о вёрстке наизусть. Книгу стоит читать в паре с «Настольной книгой газетного дизайнера» Тима Харровера, которая помогает с сутью модульности, и только потом переходить к Чихольду или Брингхерсту.

Система, описанная в книге, разработана в Швейцарии после Второй мировой. В её основе деление страницы (с вычетом полей) на клетки (ещё автор называет их модулями, но я так называю любой блок-прямоугольник, следуя совету о модульной вёрстке). Они «могут иметь одинаковые или разные размеры. Высота клетки соответствует определённому числу строк текста, а ширина — ширине колонки набора». Автор последовательно разбирает элементы, влияющие на размер модульной клетки. Система читается в содержании:

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

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

Только при разумном ограничении числа вариаций до минимума оформление может получиться цельным и выразительным.

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

В-третьих, кратность и сетка избавляют от нестыкующихся элементов:

Все плоскости иллюстраций должны совпадать со строками шрифта использованных кеглей.

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

Примеры того, как сетка работает, определены модой 80-х. Они не раскрывают всего потенциала системы. Если отбросить «швейцарский дизайн», система продолжит работать. Как минимум она будет учить аккуратности (очень полезной в больших проектах).

Цитаты о шрифтах:

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

О полях:

При маленьких полях сразу заметно, что страница обрезана криво.
Если поля слишком малы, <...> пальцы касаются полос текста и иллюстраций, это вызывает безотчётную негативную реакцию.

О кеглях:

Если применяются шрифты разного размера, то кегли должны чётко различаться по величине.

О сути дизайна:

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

Модульная система — мощный инструмент, но он не спасёт слабое содержание:

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

Дополнения

Оригинал автор оформил с помощью модульной сетки в 32 модуля. В студии от оригинальной сетки отказались и разработали свою. Она современнее и гибче к задаче, но слабо демонстрирует описанное в тексте.

Размеры изданий в подписях к примерам заданы неуклюже: «большая сторона × меньшая». Видимо, традиция времени автора. Увы, сегодня этот формат тоже встречаются. Плох тем, что требует указания ориентации листа или миниатюры. Формат: «ширина × высота» ничего лишнего не требует. Приличные типографии отлично с ним работают.

Понравилось определение «иллюстрации со свободным контуром». Обычно такие иллюстрации называют так, как подсказывает контекст беседы. Определение Мюллера-Брокманна от контекста не зависит.

P. S. C ноября заметки о дизайнерском росте, типографике, подаче информации, интерфейсах, ведении проектов и городской среде читайте в блоге Кирилла Беляева (подробнее о переезде).

«Настольная книга газетного дизайнера» Тима Харровера

Кирилл Беляев — Wed, 11 Dec 2013 12:48:22 +0300

Русское издание не купить. Книгу скачивают в виде отсканированных страниц в ПДФе (части, кстати, не хватает) или покупают оригинал. Я читал ПДФ. Свёрстан он ужасно, что поначалу подрывает веру в действенность Харроверовских методов.

Тим Харровер — американский издатель, журналист, писатель, дизайнер и лектор. По-голливудски бравое содержание с лихвой наполнено приёмами и примерами их использования.

«Настольная книга газетного дизайнера» — сборник методов и правил.

Советы о технологиях печати и компьютерной вёрстке устарели. Они интересны как экскурс в дни, когда верстальщики пользовались круглой логарифмической линейкой, которая переведена как «пропорциональное колесо». Кстати, первая логарифмическая линейка была круглой, а не прямой, широко распространённой в СССР.

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

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

Правило работает с новостями из совета и с блоком из иконки, заголовка и сниппета (сайт отеля «Феликс Завойский», промосайт «Системы Главбух», и виджет на главной Яндекса):

Возьмём шире: логотип состоящий из графического элемента, названия компании и статусной строки (о её расположении есть другое мнение). Это состав не самого сильного логотипа (об этом стоит написать отдельно), но допустим, что такова данность. Тогда данные три элемента хорошо встают в том же порядке (авторы: Why Not Smile, Hulsbosch, Pentagram, Lippincott, Студия Лебедева и Бюро Горбунова):

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

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

Другой важный ход — блочность элементов: «...какой бы ни была форма текста (вертикальной, горизонтальной или квадратной) она всегда должна быть прямоугольной», «Каждая статья должна иметь прямоугольную форму. Вы уже слышали это сотни раз. Однако это ключ к успеху в модульной вёрстке». Больше трети книги автор разбирает всевозможные комбинации прямоугольников (-:

Недавно, кстати, Артём Горбунов писал о ценности «прямоугольности». Подсвечу только прямоугольники, которые он виртуозно создал линейкой:

Книга полна примеров «было плохо — стало хорошо», и примеров с множественными решениями при равных исходных. Ближе к концу Тим приводит пример из 16 вариантов вёрстки статьи о Билле Косби, и показывает минусы и плюсы каждой:

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

Домен для проекта

Кирилл Беляев — Tue, 25 Jun 2013 22:30:17 +0300

Мы продаём домен, чтобы сообщить об этом мы сделали яркую страничку —

trendom.ru

Перепосты и ссылки приветствуются, должна же информация добраться до ищущих.

Отличная доменная пара

Кирилл Беляев — Mon, 28 Jan 2013 14:42:01 +0300

Сделал страничку о доменах Мулоко:
mooloko.ru + mooloko.com

При возможности, помогите донести информацию до тех, кому она может быть полезна.

История про дипломный проект

Кирилл Беляев — Fri, 25 Jan 2013 00:04:06 +0300

В октябре 2011 я написал письмо Артёму Горбунову о моём дипломном проекте:

Здравствуйте, Артём!

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

Мне показалось, что для «Советов» объём картинок слишком большой.

Артём ответил следующее:

Вы могли бы прислать в Советы пару самых важных картинок в увеличенном виде (желательно сразу на 700 в ширину) и дать ссылку на полный набор.

Да и на ревиженовской странице ничего нельзя прочитать.

Тогда я застеснялся публичного разбора полётов и неумения выложить картинку в сети и дать на неё ссылку. Я ничего не ответил. Но заноза о разметке и размещении страниц в вебе осталась. За что большое спасибо, Артёму!

Прошло всего 15 месяцев и появилась моя первая ХТМЛ-страничка. Потратил я на это около 10-14 дней, но, увы, не за раз.

Встречайте:
kipo.name/citydogs

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