Category: искусство

Category was added automatically. Read all entries about "искусство".

Генератор афиш для «Большой переверстки»

Как я уже говорил, новые афиши для мастер-класса «Большая переверстка» делает робот, а я только нажимаю на кнопку 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.






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






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






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






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

Текст как вода

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

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

igorshtang.ru

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

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

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

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

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

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

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

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

Музей истории Пицунды, Абхазия

В Абхазии попал в Музей истории города Пицунды. Экспонаты в нем неинтересные, какие-то камушки и стеклышки, зато интересно оформлен интерьер. Роспись стен стилизована под древнегреческую краснофигурную вазопись. Черный фон, оттенки охры и тонкие линии:




Collapse )

Переверстка №15. Расписание выставок Эрмитажа

На питерском курсе финальным заданием было расписание выставок Эрмитажа на ноябрь и декабрь. В этом выпуске я переверстаю вариант одного из участников:




Расписание выставок похоже на расписание спектаклей, за исключением пары моментов:

  1. Спектакль длится несколько часов, поэтому у него есть дата и время начала: 1 ноября в 19:00. Выставка длится несколько дней или месяцев, поэтому у нее есть диапазон дат: с 1 ноября по 15 декабря. То есть текста больше и нельзя вынести месяц за скобки.

  2. Названия выставок как правило длиннее названий спектаклей. Это значит, что их не наберешь слишком крупно.


Collapse )