Блог Игоря Штанга

В Металлургическом районе висят уникальные для Челябинска домовые таблички. Судя по шрифту, сделали их в девяностых или начале нулевых.



Как работает система:

1. В базовом варианте ↑ слово «улица» и название улицы находятся на разных модулях.


2. «Улица» пишется строчными, название улицы — прописными.


3. Цифры «кернятся»: ставятся ближе друг к другу и дальше от стрелки. Это очень крутое решение.

Если улица не влезает, ее можно сократить и разбить между табличками по-другому:




Или написать в две строки:




Новый дизайн во многом похож на старый рукописный вариант:




Еще одна старая, думаю, 1950–60 годов:

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



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



Можно сказать по-другому: рваному краю требуется больше воздуха.

Ну и как обычно, бывают исключения. Не стоит принимать это за аксиому.

См. также:
Выключка по левому краю
Выключка по центру

Nail пишет:

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

Самое сложное для меня — блок покупки с ценами:

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

( Collapse )

Переделываю обложку журнала, показываю разные варианты.

Следующая «Большая переверстка» начнется 5 октября: vk.com/pereverstka_online

Следующий мастер-класс пройдет с 5 по 24 октября. Подробности и запись в группе: vk.com/pereverstka_online




Марианна Ушакова о «Большой переверстке» в августе:

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

Если и есть мнение по улучшению курса, то единственное, что я бы добавила, это сделала комментарии по работам чуть более жесткими. Если есть очевидно грубые ошибки, говорить, почему это плохо, чтобы не возникало желания их повторять :–)

В целом очень довольна!

Другие отзывы

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

Вкратце:
1. Не оставляйте меньше трех строк текста под заголовком и над ним.
2. Не начинайте колонку с заголовка. Потому что: «такое расположение привлекает внимание, и читатель может пропустить целую колонку, подумав, что это заголовок другого материала».




3. Не помещайте заголовок непосредственно под иллюстрацией и над ней.






4. Не помещайте заголовок по бокам от иллюстрации, заверстанной в оборку.




Добавлю от себя:
5. Не допускайте, чтобы заголовки в соседних колонках соединялись в горизонтальную или диагональную линию.

Грифон Арсений возвращается: vk.com/typeschool_msk

Переверстываю пять макетов в режиме реального времени.

0:01:18 — Вступление
0:03:40 — Таблица «Допустимое рабочее давление»
0:24:55 — Календарь цен авиакомпании «Победа»
0:40:55 — Вклад «Восточного банка»
0:47:58 — Интерфейс выписки по счету «Бинбанка»
1:02:58 — Лицензии словолитни CJ Type
1:11:57 — Вывод
1:15:10 — Вопросы

Коротко о методе:

1. Убираю все линейки и плашки.


2. Если что-то ломается, пробую решить проблему с помощью отступов, выравнивания, оформления.


3. Если не получается, возвращаю часть линеек или плашек.

Прием очень простой и очень эффективный — набрать текст крупно.

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

На этой странице текст достаточно крупный, но он всё еще воспринимается как серый прямоугольник:


Каталог «Икеи», 2008


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

( Collapse )

В прошлом году нарисовал сайт для «Веб-стандартов».

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

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



Если картинки нет совсем, ее место занимает один из фирменных паттернов ↓

Для верстки статей разработан полный набор стилей: заголовки, выноски, цитаты, списки, иллюстрации, фрагменты кода и т. д.:

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

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

—
Иконки и паттерны: Алексей Грабилин
В эпизодах: Сергей Мусаилов
Шрифты: RF Dewi и RF Rostin