Top.Mail.Ru
? ?

nobelfaik


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

light gray is the new white, dark gray is the new black


Категория: наука

Категория была присвоена записям автоматически. Читать все записи на тему "наука".

Сюжетное и композиционное напряжение
nobelfaik
Сегодня разбор из моего Телеграм-канала «Как это сверстано». Добавляйтесь: t.me/kaketosverstano

Напряжение бывает сюжетным и композиционным.


Майкл Энгельманн. Реклама спиртных напитков Bols. 1959

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

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

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

Текст тоже стоит напряженно, почти вплотную к верхнему краю, — но к сюжету это уже не относится.



Майкл Энгельманн. Реклама безалкогольных напитков Libella. 1956

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

Другие, не менее напряженные работы дизайнера

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

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


Иконка как маркер списка
nobelfaik
В эфире рубрика ???. Сергей Чикин спрашивает:

В догонку к статье про булиты. А что скажешь об иконке в качестве булита? У ЛидМашины в списке тем:

01.png


Читать дальше...Свернуть )

Как мы собираем макеты по алгоритму верстки
nobelfaik
Расскажу об одном задании с мастер-класса «Большая переверстка», а именно о том, как мы собираем макеты по алгоритму верстки. Это метод, который я описал в одноименной статье. Если коротко, порядок действий такой: содержание → структура → конструкция → стиль.

Ниже два примера с МК в Новосибирске.

1. Александр Гончаров

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

Бонусная программа

Сделали заказ в нашем Интернет-магазине? Поздравляем! Вы стали участником бонусной программы! Участие в программе ничего не требует от Вас и при желании вы сможете потратить накопленные баллы на следующую покупку в нашем Интернет-магазине. Для накопления баллов просто делайте заказы под одним и тем же аккаунтом при следующих покупках!

Каждый раз при совершении покупки Вы автоматически получаете 10% от стоимости товара бонусными баллами. Баллы, полученные после оплаты заказа станут активными через 14 дней и смогут быть использованы в следующих заказах. Мы с удовольствием напомним Вам об активации баллов на счету электронным письмом. Но, стоит помнить, что срок действия бонусных баллов ограничен и составляет 11 месяцев с момента их активации.

Один бонусный балл = Одному рублю РФ.
Вы сможете оплатить до 30% суммы заказа накопленными ранее бонусными баллами. Бонусами вы сможете оплатить любой товар из ассортимента Интернет-магазина, кроме: подарочных сертификатов, услуг доставки и ремонта. Использование бонусных баллов для оплаты покупки совмещается с любыми акциями на нашем сайте. В случае возврата товара, бонусные баллы будут возвращены на ваш бонусный счет.


Читать дальше...Свернуть )

Расписание мастер-классов на осень
nobelfaik
Этой осенью вместо курса проведу несколько «Больших переверсток». Даты ближайших мастер-классов уже известны, регистрация открыта (на страницах мероприятий). Если любите планировать заранее, велкам:

31 августа — 1 сентября в Красноярске: vk.com/typeschool_krsk
7–8 сентября в Питере: vk.com/typeschool_spb
28–29 сентября в Нижнем Новгороде: vk.com/typeschool_nn
5–6 октября в Казани: vk.com/typeschool_kazan
Апдейт: 2–3 ноября в Екатеринбурге: vk.com/typeschool_ekb



Для кого

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

Будет особенно интересно:
— дизайнерам и верстальщикам, которые боятся текста
— редакторам, которые боятся дизайна
— студентам творческих специальностей
— читателям рубрики «Переверстка»

Программа

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

Первый день
1. Лекция. Алгоритм верстки: как сделать дизайн из текста. Задача, аудитория, контекст. Структура материала. Конструкция макета. Стиль, работа с референсами.

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

Второй день
3. Практика. Переверстка четырех микроформатов по алгоритму верстки. Микроформаты — небольшие макеты или части макетов, например, рекламные банеры или куски интерфейса. Для каждого микроформата нужно найти принципиальное улучшение. Эти упражнения быстрые, по 20 минут на макет.

4. Лекция. Верстка иллюстраций: как рассказать историю с помощью композиции. Формат и поля. Верх-низ, лево-право, центр-периферия. Масштаб, направление, выход за край.

5. Практика. Переверстка макета с иллюстрацией. Пробуем альтернативный способ верстки — не от текста, а от картинки, такое тоже бывает.

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

Отзывы

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


Стиль изложения и жесткий тайминг на выполнение заданий держат в тонусе и обеспечивают полную вовлеченность в процесс. <…> Сначала выполняешь задание, затем вместе с разбором работ получаешь порцию теории. Игорь конструктивно и деликатно комментирует работы, всегда дает дельные советы. Азартно, вдохновляюще и свежо — я бы так описала свои ощущения от мастер-класса.
— Анастасия Сычева, «Большая переверстка» в Челябинске


Однозначно рекомендую посетить мастер-класс тем, кто никогда не работал с текстом или не знает, как к нему подступиться. Вы научитесь анализировать информацию, структурировать ее и превращать в осмысленный, крепкий, интересный макет. После мастер-класса вы больше не сможете верстать тексты по-прежнему. <…> Более опытным дизайнерам и тем, кто уже был на курсе, будет интересно применить свои навыки в упражнениях по переверстке.
— Максим Розов, «Большая переверстка» в Челябинске

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

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


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

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

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


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

Рубрика ???

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

Маркеры в многоуровневых списках
nobelfaik
В эфире рубрика ???. Алексей Зотов спрашивает:

Какие маркеры использовать в многоуровневых маркированных списках?



Читать дальше...Свернуть )

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

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

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

1. Отдельно от изображения

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

Плюс: легко верстать. Текст в отдельном блоке, не нужно придумывать, как пристроить его к иллюстрации — залил, и всё. Если вы делаете по сто таких макетов в день, это хорошее шаблонное решение. Маленькие цифры легко находят место рядом с любыми элементами. На странице снизу цифра 8 уместилась между ребрами, 9 — между позвонками, 10 — в запирательном отверстии.

Минус: сложно читать. Цифры ничего не значат без подписей. Чтобы найти соответствие, нужно бегать глазами от картинки к тексту и обратно. Часто блок подписей ставят далеко от изображения, иногда даже на другую страницу или другой разворот, — это неудобно вдвойне.


«Мой доктор. Практический справочник медицины и гигиены», Франция, 1907

Читать дальше...Свернуть )

Кандинский о напряжении
nobelfaik
Перечитывал «Точку и линию на плоскости» Кандинского и нашел интересный отрывок про напряжение. Очень близко к идеям Арнхейма и к тому, о чем я рассказывал в докладе «Теория графического напряжения».

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

Кандинский о напряжении


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

Во втором случае она сталкивается с границей и тут же теряет свое напряжение по направлению вверх, причем стремление вниз увеличивается, выражая нечто болезненное, почти отчаянное. (Это усиленное напряжение и склеенность с верхней границей дают линии во втором случае более долгое существование, чем в первом.)

Другими словами, с приближением к границе ОП форма приобретает все большее напряжение, которое внезапно исчезает в момент соприкосновения с границей. И чем дальше лежит форма от границы ОП, тем слабее напряжение формы по направлению к границе, или: формы, лежащие близко к границе ОП, повышают «драматическое» звучание конструкции, и напротив — лежащие далеко от границы, сосредоточенные в центре формы сообщают конструкции «лирическое» звучание.


Вообще напряжение — одно из ключевых понятий визуальной системы Кандинского. Правда, объясняет он его очень «гуманитарно».

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