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

Списки в приложении «Самоката» — отдельный вид искусства:



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

• вкус и аромат — сущ. в им. п.
• разломы — сущ. в им. п.
• вкуснее — прил. в сравн. ст.
• 1 штука — числ. + сущ. в им. п.
• упаковку — сущ. в косв. п.

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

Например, вам нужно сделать страницу о сотрудниках на сайте. Или придумать, как будут выглядеть портреты авторов статей в журнале. Взявшись за работу, вы понимаете, что исходный материал никуда не годится: все фотографии совершенно разные, половина плохого качества, а Татьяна Ивановна вообще прислала фото с отдыха в Египте («потому что она там молодо выглядит»).

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

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

1. Форма

Фигуру можно обтравить, то есть вырезать из фона. Сюда же относятся разнообразные маски:


Madwell · Студия Лебедева · Elegant Seagulls
( Collapse )

Как я уже говорил, новые афиши для мастер-класса «Большая переверстка» делает робот, а я только нажимаю на кнопку Randomize. Вот как это выглядит:




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

Всю техническую часть сделал Иван Дианов. Посмотрите его Телеграм-канал, там много крутых штук: @razuznak

Но обо всем по порядку.
( Collapse )

Расскажу еще об одном задании на «Большой переверстке», где мы переделываем обложку советского научно-популярного журнала «Знание — сила» за 1965 год:

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

Полный текст задания

Ниже работы трех участников. Объясню, как они организованы с точки зрения шаблона.

1

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

Обратите внимание, что анонсы отличаются друг от друга по объему и структуре, поэтому из них сложно сделать однородный список. Эта проблема изящно решена с помощью трех стилей: ЗАГОЛОВОК, Подзаголовок и [Рубрика]. Они достаточно контрастны друг к друга, при этом объединены общим шрифтом и кеглем. Подписи к картинкам оформлены такими же стилями.


Мария Жигулина

2

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

Основной текст набран двумя стилями: Заголовок и Подзаголовок. Рубрики опущены.


Екатерина Прибыткова

3

Обложка разделена на модули тонкими линейками. Количество и пропорции модулей меняются в зависимости от объема материала.

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

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


Андрей Кретинин


Следующая «Большая переверстка» пройдет с 26 апреля по 15 мая. Присоединяйтесь: vk.com/pereverstka_online

Другие задания на мастер-классе:
Слайд презентации
Обложка книги

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

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

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



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

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

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

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

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

В эфире рубрика ???. Аноним спрашивает:

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

Отвечаю: экономить по-прежнему нужно и всегда будет нужно.

Компактная верстка экономит не только место, но также время и внимание пользователя. Если блок умещается на одном экране, его можно охватить одним взглядом и не держать в памяти элементы, которые при скролле ушли бы за границу экрана. Например, удобно видеть все цифры в таблице или «Мону Лизу» от края до края, без случайного кадрирования.

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

—
То же самое с экономией в жизни. Сначала думаешь: вот буду больше зарабатывать и перестану экономить, а не тут-то было. Отличие только в масштабе. Ни у кого нет бесконечного количества денег (наверно).

Рубрика ???

Отправьте свой вопрос на электронный адрес conversive@mail.ru. В теме укажите ??? (три вопросительных знака). Будьте конкретны. По возможности прикрепите картинку. О чем, например, можно спросить

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

В некоторых шрифтах для подписей есть специальное начертание. Обычно оно так и называется, caption.






Когда специального начертания нет (почти всегда), выбирайте следующее по насыщенности. Если основной текст набран начертанием regular, то для мелкого подойдет medium или даже semibold.






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






Многострочному тексту нужен еще и свободный интерлиньяж.






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






Эти приемы пригодятся не только для мелкого текста, но и вообще для любого текста, который читают в некомфортных условиях: под сильным наклоном, в полутьме или на пестром фоне.

1. Семь самых высокотехнологичных шрифтов 2017 года.

2. Питер Билак об истории супергарнитур — шрифтовых семейств, в которых есть антиква и гротеск.

3. Мюнхенская студия Keller Maurer Design.

Большинство проблем верстки связаны с текучестью материала. У текста нет формы. Чтобы она появилась, его нужно залить в какую-то емкость. Рисование емкостей — сложная наука, но даже если вы ее освоите, проблемы на этом не закончатся. Самая прекрасная емкость никогда не подойдет тексту идеально: он либо не дольется до края, либо перельется через край. И так каждый раз, в каждом блоке, на каждой странице.

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

Теперь у меня есть сайт: igorshtang.ru. На самом деле это не настоящий сайт, а список ссылок на ЖЖ и другие сервисы. Я собрал статьи, переверстки и курсы в отдельные кучки, чтобы они всегда были под рукой.

На главной странице неприлично большой портрет автора в окружении букв и картинок:


Несколько слов об оформлении:

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

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

3. Жесткость макета компенсируется мягким шрифтом и приглушенной цветовой гаммой. Rostin — «механический шрифт с органическим началом». Дополнительно я включил минускульные цифры и буквы с завитушками (в кириллице только у, в латинице J Q f j t y). Контраст слегка понижен: вместо черного на белом — темно-серый на светло-сером.

4. Еще одно «смягчающее обстоятельство» — плавная анимация. Тут есть над чем поработать в следующих версиях.

Сайт сверстал Владимир Кузнецов, за что ему большое спасибо.