Павел Моисеенко

верстка

Пиктограммы в тексте II

Любимейший графический прием.

Список сплошным текстом с вкраплением фотографий:
Снимок экрана 2017-06-25 в 21.46.17
https://www.nytimes.com/

Микрокаталог товаров:


http://wekflatm.kr/?ckattempt=2

Когда пиктограммы внутри текста не просто встают в строку, а перекрывают соседние — выглядит в миллион раз лучше:
5822f7961c09bf5a5db6d38ce87e4b26

Стикеры:
tumblr_oet7jo16me1qkm8e2o1_1280
http://pastafrola.tumblr.com/

Крепкий афишный стиль:


https://fontsinuse.com/

Текст обтекает пиктограммы, а не наоборот:
10471.jpg
http://www.ad518.com/

Пиктограммы полностью вытеснили текст. Письмо Чарльза Имза дочери из Москвы:
moscow-rebus-eames-copy_2
http://www.kvadratinterwoven.com/from-russia-with-love

Первая часть пиктограмм в тексте

1 комментарий

, , ,

Обложки Bloomberg Businessweek

Игры со стандартными форматами верстки — заголовками, тизерами, логотипом:

Интерфейс проникает в оффлайн:

Больше трэша:

Чистая типографика:

Коллаж:

Мусорная эстетика объявлений и дешевых журнальчиков:

Ну и просто прекрасные:

Больше прекрасного:

Авторитетный деловой журнал, на минуточку.

Нет комментариев

, , , ,

Преувеличенная ценность полей

Книжный канон Чихольда утверждает ценность воздуха на полях. Бюрошная традиция верстки переносит этот принцип в веб: на окно браузера и модули.

golden_section_page_tschichold
Книжный канон Чихольда и бюрошный принцип якорных объектов

Артем Горбунов пишет:

С противоположных сторон от якорного объекта должны быть «воздух» контрпространства либо менее плотные и заметные объекты. Источник

Одинаковые вертикальные и горизонтальные поля — признак слабой, любительской, невнимательной вёрстки. Источник

Это несовременный взгляд в мире, где книга выглядит так:
ibooks_iphone_5_hero

Заголовок не имеет отступа справа и ничего — катастрофы не случилось!
harrygassel
harrygassel.info

Заполнять собой пространство — естественное поведение текста:
bubeundkoenig
bubeundkoenig.de

С выключкой текста, что условным хорошим вкусом клеймится как смертный грех:
tomcavill
tomcavill.com

С никак необозначенными переносами слов, что клеймится еще большим грехом и пожизненным позором:
lunchtype
lunchtype.com

Или даже так:
178626987
178.62.69.87

По журнальному боевито:
hassanrahim
hassanrahim.com

Плакатно, в духе афиш музыкальных фестивалей. Здесь труднее всего представить уместность книжного канона и якорных объектов:
listenand
listenand.watch

В виде списка:
soldout
sold-out.ch

И списка с картинками:
gabeferreira
places.gabeferreira.com

Вся ширина экрана, крупный текст, экономность, выразительность, разнообразность — да!

14 комментариев

, , ,

Нет комментариев

, ,

«Типографика в терминах и образах» Владимира Кричевского (2000)

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

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

Я профессионально вырос на русском вебе нулевых: студия Лебедева, затем Бюро, поздний Чихольд, Брингхерст, Тафти. Все это классическая книжная типографика. Широкие поля, много воздуха, маргиналии и тому подобное. Кричевский со скепсисом относится к классическим правилам хорошего тона. Его критика — глоток свежего воздуха и здравомыслия среди догматичного следования канону.

О висячей строке

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

img_2306
На правой полосе — «вызывающе» висячая строка. Никакой катастрофы, как видим, не случилось, хотя эта мелкая деталь привлекает внимание (типографа) сильней, чем даже по-модернистски эксцентричная раскладка полей

О воздухе

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

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

img_2290
Классический канон не позволит заверстать текст в плашке прижатый к нижнему краю

img_2295
Не позволит сделать обрамление из текста

img_2291
За такое сразу по рукам!

Об удобочитаемости:

Размещение гарнитур в порядке снижения удобочитаемости отражает всего лишь картину их распространения в печати: первое место в конце 30-х годов прошлого века заняла Литературная, предпоследнее — Табличная. Удобочитаемость сомкнулась с употребляемостью, при том что последняя отразила не столько реальные достоинства гарнитур, сколько их доступность и укомплектованность.

Золотые слова:

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

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

Не удобочитаемостью единой жив читатель.

Нет комментариев

, , , ,

Редизайн Кинопоиска

Я активный пользователь Кинопоиска. Сижу часами, чтобы найти интересное кино, ставлю оценки просмотренным фильмам (3114 фильмов!), растасовываю их по тематическим папкам. У меня там даже есть френды — кинокритики и киноманы знакомые еще со времен ЖЖ. В общем, я пользователь-задрот.

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

Карточка персонажа

Посмотрим на существующую карточку персонажа. Уберу из нее все, что не помогает в выборе фильма — рост, знак зодиака, супруги:
kinopoisk_persone_card_old@2x

Добавлю биографию:
kinopoisk_persone_card@2x

Чтобы начать. Представим такую ситуацию: я слышал, что Мартин Скорсезе выдающийся режиссер и захотел что-нибудь у него посмотреть. У Скорсезе 56 фильмов. С чего начать? Очевидно, с самого известного и значимого. Кинопоиск может посоветовать эти фильмы. Алгоритм такой: высокая оценка пользователей Кинопоиска и imdb (зрительская симпатия) + количество оценок (популярность) + нахождение в списках лучших фильмов, участников кинофестивалей (значимость) + можно скачать (доступность) – просмотренные фильмы (не показывать то, что я уже видел).

Если я уже отметил все основные фильмы как просмотренные, то показываются редкие:
kinopoisk_persone_card_rarefilms@2x

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

На карточку персонажа поместим лид из Википедийной биографии: так называют один, два абзаца выжимки из статьи. Полная биография на отдельной странице. О! Интересная идея: биография, рассказанная фильмами. У Кинопоиска солидная база фотографий. Но смотреть их просто так неинтересно. Объединим их с потоком текста:
kinopoisk_persone_bio

В той же статье из Википедии я узнаю 12 любимых фильмов Скорсезе. Удачный для привлечения внимания формат:
kinopoisk_persone_card_likefilms@2x
Недостаточно вывалить на человека 12 названий фильмов. Если название не знакомо, то оно ни о чем не говорит. Универсальный формат записи: название фильма, режиссер, страна, год

Фильмография

Модуль фильма в списке:
kinopoisk_film_card1@2x
Симпатичные иконки фестивальных наград я взял с нового Кинопоиска

Если я пометил фильм как просмотренный, подсветим модуль и напишем мою оценку:
kinopoisk_film_card2@2x

Название фильма на оригинале нужно из-за странностей перевода. Кинопрокатчики, порой, переводят так:
kinopoisk_film_originname

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

Рутрекер. Пробежавшись взглядом по фильмографии я отмечаю фильмы, которые есть в интернете. Уже из них выбираю что посмотреть. Рутрекер — реально крупная база. Амедиатека, Иви и прочие он-лайн кинотеатры, которые вставляет Яндекс в качестве партнера — полное фуфло. Вконтакте подойдет в качестве альтернативы, если не хочется скачивать.

Малые жанры. Скорсезе снимал клипы, рекламу, короткометражки, но не это сделало его киношной знаменитостью. Поэтому Кинопоиск выделяет короткометражки иконкой и надписью. Получается, что короткометражка приобретает больший визуальный вес в сравнении с полнометражными фильмами:
Снимок экрана 2016-04-02 в 17.01.38

Должно быть наоборот:
kinopoisk_film_format

Соберу все вместе:
kinopoisk_film_card3@2x
Мне ближе естественная хронология — от старых к новым

Из фильмографии я убрал оценки пользователей (на странице фильма они останутся). Вот почему. Большинство фильмов пользователи оценивают на 6–7 баллов. Это нейтральная оценка, которая ничего не сообщает. А сообщает отклонение. Оценка в 1–4 балла говорит, что фильм, скорее всего трешовый, и не стоит тратить на него время. Слишком высокая оценка (8–10) тоже настораживает. Как правило, ее ставят рядовым, но недавно вышедшим в прокат фильмам. Со временем их оценка упадет. Или безмерно сентиментальным киношкам, бьющим наотмашь по чувствительному зрителю.

kinopoisk_film_rate@2x

Рекомендации

Подборки. Кинопоиск уже давно составляет тематические подборки фильмов. Это замечательно, потому что они помогают узнать новое. Осталось придумать систему благодаря которой подборки будут контекстно выводиться на страницах персонажей и фильмов. Например, я нахожусь на карточке Казахского фильма. Сбоку выводиться подборка:
kinopoisk_podborki1@2x

Связи. В моей голове существует два типа фильмов, которые я хочу посмотреть:
1. Фильмы о которых я знаю. Это простой сценарий — с ним нет никаких проблем.
2. Фильмы о которых я не знаю. Например, я увлекаюсь отечественным кинематографом 90-х годов. Я посмотрел всплывающие сразу в памяти фильмы (Балабанова, Хотиненко, Месхиева). Прошелся по списку режиссеров-ветеранов и посмотрел, снимали ли они что-нибудь в 90-е. Гуглю, читаю Википедию, нахожу статьи в киножурналах. Что дальше? А дальше я изучаю связи. Кинопоиск мне может помочь в этом.

Допустим, мне понравился фильм «Гонгофер». Очевидное — посмотреть другие фильмы режиссера. Куда копать дальше? Стоит прошерстить фильмографию сценариста и продюсера, изучить публикации киноведов (в них, как правило, есть отсылки к другим фильмам). Киностудия может иметь значение, особенно, для советских фильмов. «Грузия-фильм» — это анклав своего особенного кино, а студия ПИЭФ — знак качества. Свой корректирующий балл вносят оценки друзей (чем выше оценка, тем выше приоритет в рекомендации), год (современники выше в приоритете), страна. Кинопоиск должен агрегировать эти связи:
kinopoisk_link_sheme@2x

Связи показываются на странице фильма:
kinopoisk_link@2x

И еще

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

Снимок-экрана-2016-04-06-в-21.09.03

Отзывы. Повысить в приоритете профессиональные отзывы. Это публикации критиков, статьи в прессе, аналитика от киноведов. Любительские отзывы понизить в приоритете. Авторами отзывов движет сильное впечатление, поэтому они склонны к радикализму — либо перехваливают фильм, либо слишком ругают.

kinopoisk_text

8 комментариев

, , , ,

Приемы верстки сложных форм

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

1. Форма читается как связное предложение. Такой подход помогает быстрее считывать содержимое. Еще это хорошо для порядка — все поля формы устроены одинаково.
Group 5@2x
Если пункт начинается с предлога, пишу его с маленькой буквы

Усложним. Добавим инпут:
Group6@2x

Еще усложним. Добавим вложенность:
Group7@2x
Заголовок «Интересы» объединяет все пункты формы

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

Запутанные формулировки — частая беда форм. Антипример:
Снимок экрана 2016-03-28 в 13.02.19
Три раза сказали одно и то же, но понятнее не стало. Гугл Эдвордз

booking_form
Расплывчатая подпись к чекбоксу дезориентирует. Что произойдет по нажатию? Букинг

Мой вариант:
booking_form_after

2. Управляющие элементы скрыты пока не нажат чекбокс. Удобно когда надо спрятать необязательные функции.
screencast 2016-03-24 00-19-09
Формулировка начинается с действия (показать, расширить, указать, исключить)

Свитч-переключатель — это тот же чекбокс:
ios_switch

3. По дефолту предзаполнены максимально широкие настройки. Протыкивая форму, человек уточняет параметры. Такую форму, вообще, можно не заполнять, если человек согласен с дефолтной настройкой.
пол_возраст@2x
Максимально широкая настройка по дефолту. Если человеку надо, он уточнит пол и возраст

По похожему принципу устроены настройки на Маке:
macos_setting
Все уже нормально работает, но, если надо, можно уточнить настройку

Прием работает не во всех предметных сферах.

4. Чередование ритма. Эстетически мне нравится сбивать ритм однообразных чекбоксов и радиобатонов нестандартным контролом. Чтобы выделение было осмысленно, нужно взять наиболее важный пункт.
Group3@2x
Способ траты бюджета — важная опция. От нее существенно зависит ход рекламной кампании. Поэтому выделяем контролы выбора (по логике — это обычный радиобатон) и пишем подсказки

Какие знаете примеры хорошо сделанных форм?

11 комментариев

, , ,

1 комментарий

, , , ,

Модульная верстка: текст поверх фотографий

Формат «картинка + текст поверх» за несколько лет стал базовым в дизайне СМИ. Формат автоматизирован — текст и картинки автоматически подтягиваются из базы, а поверх картинки кладется полупрозрачный черный слой.

Градиенты и затемнения — это всегда компромисс между сохранением качества картинки и читаемости текста. Картинки запороты, а текст на грани читаемости. Ничего хорошего:
BB837501-006E-418A-BB12-D26E3ED74FBE
Арзамас

Батарея одинаковых серых модулей заполонила интернет:
battery
Медуза до редизайна, Ирк.ру, Охмаймастер

Формат плохо подходит для иллюстраций с контрастными мелкими деталями:
5EB31C79-F824-4083-9617-5AACF7541A36
Афиша-город

Самые сильные градиенты не спасают:
CBAC4535-E211-4440-9089-DC37DE4547ED
Афиша-воздух

Часто в модуле выводятся данные о просмотрах и комментариях. Метаданные — это мусор:
627AA36D-9187-484A-B2FA-7678D6D09AF9
Иконка видео громоздится на заголовок, просмотры и комментарии влезают на описание. Охмаймастер

Формат не нов:
E65ECD6D-42AA-4944-BC0C-DC67D6E4A4EF
Чтобы название газеты и информация о выпуске читалась участок под фото высветлили. The Oregonian, выпуск 15 августа 1945

Редактор не контролирует результат: тексты и фотографии лягут друг на друга как получится. Всю суть отражает картинка из интернета:
3FD852A9-6553-4113-8605-5EEF5112FB3F

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

1. Не растягивать иллюстрацию на весь модуль. Иллюстрация займет часть модуля. Выравнивание иллюстрации относительно текста — это отдельная большая тема. По такому пути обычно оформляют книжные обложки.
lam_moduli
Обтравленные иллюстрации на нейтральном фоне выглядят опрятно. Лук эт ми и Виллэдж

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

Оба пути предполагают ручную работу. Редактор с умом должен подобрать иллюстрации. Не каждая иллюстрация подойдет — это дополнительно усложняет работу.

3. Отделить текст от картинки. Это бронебойная защита. Текст читается прекрасно, картинку видно целиком, выглядит олдскульно:
5B906850-75D6-49D3-A8AB-E3B01895DB04

1 комментарий

, ,

«Русская футуристическая книга» Евгения Ковтуна (2014)

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

Футуристы с презрением относились к классическому искусству. И к традиционной книге, как таковой, так же. Вместо обычной типографской бумаги, переплетов и шрифтов они печатали книги на обоях, газетах и дешевой бумаге. Текст писали от руки или набирали множеством вычурных шрифтов, как на афишах. Иллюстрировали дикими рисунками, какие оставляют на заборах. Эти книжки тиражом 200–300 экземпляров сейчас большая редкость.

Нет сомнения, что в намерения авторов литографированных сборников входили сознательный эпатаж читателя, издевка над привычными вкусами, разрушение эстетических шаблонов и стереотипов восприятия. Серая дешевая бумага, картонные обложки, небрежность брошюровки были вызовом эстетским пристрастиям круга «Мира искусства». Возникла своего рода «антикнига» в сравнении с роскошными изданиями «Мира искусства» или «Аполлона». Крученных писал: «Издания „Грифа“, „Скорпиона“, „Мусагета“… большие белые листы… серая печать… так и хочется завернут селедочку… И течет в этих книгах холодная кровь».

Первой книжкой футуристов считается «Садок судей». Ее особенность — вместо типографской бумаги напечатана на оборотной стороне обоев (лицевая сторона с рисунком текстом не запечатана):

Садок судей
Садок судей. 1910. Здесь поэты за 8 лет до языковой реформы отказались от Ъ в конце слова и Ѣ. В остальном верстка еще традиционна. Садок — это что-то вроде сачка для рыбы. Рыбу кладут в сачок, чтобы она не могла уплыть и опускают в воду. Получается сачок для судей. Даже название провокационное — подстегивает обругать футуристов или, наоборот, принять их сторону. Источник фото
 

Давид Бурлюк так расшифровал «протестантскую» символику этой особенности сборника: «…всю жизнь вашу пройдем огнем и мечом литературы: под обоями у вас клопы да тараканы водились, пусть живут теперь на них молодые, юные, бодрые стихи наши».

Еще одна книжка, напечатанная на обоях:


Танго с коровами: железобетонные поэмы. Василий Каменский, 1914. Верстка стала более изощренной. Отдельные слова в стихе набраны разными шрифтами и кеглями. Футуристы считали что от формы слова зависит его выразительность. Продается, между прочим. За 800 000 ₽. Источник фото
 

Почитайте манифест Хлебникова и Крученых. Многое встанет на свои места:

Чтоб писалось туго и читалось туго неудобнее смазных сапог или грузовика в гостиной (множество узлов, связок и петель и заплат, занозистая поверхность, сильно шероховатая. В поэзии Д. Бурлюк, В. Маяковский, Н. Бурлюк и Б. Лившиц, в живописи Бурлюк, К. Малевич).
У писателей до нас инструментовка была совсем иная, например:
По небу полуночи ангел летел
И тихую песню он пел…

Здесь окраску дает бескровное пе… пе… Как картины, писанные киселем и молоком, нас не удовлетворяют и стихи, построенные на
па-па-па
пи-пи-пи
ти-ти-ти
и т. п.

Здоровый человек такой пищей лишь расстроит желудок. Мы дали образец иного звука и словосочетания:
дыр, бул, щыл,
убещур
скум
вы со бу
р л эз
Слово как таковое. Велемир Хлебников и Алексей Крученых, 1913. Полный текст

Крученых взорвал
Взорвал. Алексей Крученых, 1913. Обложка и страница выходных данных. Источник фото
 

О том почему тексты писались от руки

Типографский набор лишал поэтическое слово графической индивидуальности, дополнительной образности. Выясняя природу добавочной выразительности книги-автографа, Хлебников подчеркивал два положения: «1. Что настроение изменяет почерк во время написания. 2. Что почерк, своеобразно измененный настроением, передает это настроение читателю независимо от слов». Поэтому, приходит к выводу Хлебников, автор должен сам писать книгу или «вручить свое детище не наборщику, а художнику». Он даже призывал основать новую профессию — художников почерка.

 
Тэ ли лэ
Тэ ли лэ. Алексей Крученых и Велемир Хлебников, 1914. Тираж 50 экз. Здесь написано легендарное «Дур бул щыл». Источник фото
 

Об эстетике лубка

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

Учитесь худоги
Учитесь худоги. Алексей Крученых, 1917. Источник фото
 

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

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

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

Нет комментариев

, , , , , , , ,