Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Вёрстка

Прямоугольнее

Один из способов улучшить вёрстку — запрямоугольнить всё, что можно.

Вот случайная фотка с моего телефона — какая-то питерская табличка:

Почему она такая уродская? Потому что в ней всё выровнено по центру.

Представьте, что вам в комнате нужно поставить стол. Можно поставить к стенке, а можно и посередине, если это столовая. Если у вас есть один главный объект, его можно смело ставить посередине, и никто не спросит «почему посередине»:

Если кроме стола есть ещё диван, то поставить их оба посередине уже будет трудно. Может, только в очень большой комнате. В вёрстке с этим чуть проще из-за того, что текст обычно имеет форму полосок. Две полоски посередине — нормально:

Поставить ещё что-то посередине — сложно. Но можно поставить посередине стен. С одной стороны — тумбочка с телевизором, чтобы удобно смотреть с дивана, с другой — книжный шкаф:

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

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

Вы можете сказать: но ведь книжные титулы часто оформляют с центровкой. Да, в классическом стиле титулы порой делали весьма многоэтажными. Вот фотка с курса Игоря Штанга по вёрстке — смотрите как интересно слева:

Или вот книжка из инстаграма «Носков поэта»:

Так можно, но это сложно. Если у вас нет опыта, не используйте выравнивание по центру.

Выравнивайте всё по левому краю:

Так форма текста уже начинает хоть чуть-чуть дружить с форматом.

Но сейчас это всё один прямоугольник, а здесь речь о двух фирмах — «Ленконцерте» и «Ленконцерт-туре». Вы уже знаете, что чёрточки не разделяют, а склеивают. Уберём чёрточки, добавим расстояния, чтобы разбить всё на две группы:

Теперь у нас два прямоугольника.

Слова «туристическая фирма» сейчас кричат громче всех. Прибьём их к своему логотипу. Тогда можно будет чуток увеличить поля:

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

Заметьте, что прямоугольники видны даже несмотря на то, что подчёркнуты только левые углы — форма самой таблички помогает нам достроить прямоугольники в голове. В результате получается такая конструкция:

Это не шедевр вёрстки, просто с прямоугольниками проще сделать аккуратно.

А ещё можно так:

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

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

 914   2017   вёрстка   студентам

Телеграм за неделю 17—23 июля 2017

24—30 июля 2017

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

Вторник, 18 июля

Дайджест телеграма за неделю 17—23 июля 2017
Дайджест телеграма за неделю 17—23 июля 2017
Дайджест телеграма за неделю 17—23 июля 2017

Это сегодня. Участники курса «Пользовательский интерфейс и представление информации» делают групповое практическое задание. При этом открыта запись на следующий курс:
http://bureau.ru/educenter/ui/

Дайджест телеграма за неделю 17—23 июля 2017
Это красивый разворот про амурского тигра из темы «Параллельное изложение»
Дайджест телеграма за неделю 17—23 июля 2017
А это красивый московский навигационный тотем. Они теперь уже повсюду
Дайджест телеграма за неделю 17—23 июля 2017
Навигационная карта Хлебозавода 9 — нового модного пространства рядом с «Флаконом»

Среда, 19 июля

Дайджест телеграма за неделю 17—23 июля 2017
Весёлая иконка унисекс-туалета в «Бэд-бро-баре» в Москве

Студентка школы дизайнеров Аля подошла ко мне в Коворкафе задать вопросы про свой макет на тему «Валенки» (завтра дедлайн):

Дайджест телеграма за неделю 17—23 июля 2017

Я рассказал ей всякого по смыслу, что не имеет значения тут (потому что вы не знаете задания), а ещё подвинул пару вещей:

Дайджест телеграма за неделю 17—23 июля 2017

1. У шапки стало больше нижнее поле. Если поля с разных сторон разные — интереснее. Шапка приобрела большую самостоятельность. У меня на сайте тоже большое поле у шапки, но ещё и всё выровнено по верху — так ещё лучше:
http://ilyabirman.ru/

2. Справа от первой фотки другая фотка и какой-то текст. Он стоял непойми как (Аля сказала, что поставила «на глаз»). А теперь он превратился в якорный объект (тяжёлый такой) и встал в центр своего модуля. Магия в том, что прямоугольник, внутри которого стоит этот текст, не нарисован, но прекрасно читается. Подобные штуки я храню под тегом «активация». Любимый пример — вот эта полоса про Трампа:

Дайджест телеграма за неделю 17—23 июля 2017

Ещё теги:

Дайджест телеграма за неделю 17—23 июля 2017

3. Ещё снизу увеличились ценники. Это Миша Нозик мимо проходил и подсказал. Большие цифры всегда хорошо смотрятся:

Дайджест телеграма за неделю 17—23 июля 2017

Навигация в центре инноваций в Порту:
https://www.behance.net/gallery/7613427/Signage-and-Wayfinding-for-Innovation-Center

Вообще в школе дизайнеров общение с преподавателями есть только на третьей ступени (а это задание на второй). Но крутые студенты плевать хотели на правила и просто приходят. Так и надо.

Раз уж такое дело, ссылка на школу дизайнеров (сейчас идёт набор):
http://bureau.ru/school/28aug2017/

Ха-ха, смотрите какая Виктория молодец:

Дайджест телеграма за неделю 17—23 июля 2017
В это время Миша Нозик на «Живых советах» учит рисовать фактоиды

Четверг, 20 июля

Ещё я забыл занести ссылку на недавний совет про схему метро Самары:
http://bureau.ru/bb/soviet/20170718/

Костя Горский в своём канале о дизайне и продуктивности рассказывает о понимании задачи:

Если у меня и есть какое-то одно самое важное знание про продуктовый дизайн, то это знание о том, что хорошо поставленная задача — больше половины успеха... (в канале — цитата целиком)

Всё правильно, но только Костя пишет, что описание должно вмещаться в один лист А4. Я делаю иначе: пишу максимально подробно. Это же не рекламная листовка. В понимании задачи должно быть всё о задаче, что может понадобиться для её решения. Это такой справочник, где качественно разложено по полочкам всё, что обсуждали с клиентом. Смотрите мою киевскую лекцию про это, если ещё не смотрели:
http://ilyabirman.ru/meanwhile/all/understanding-the-task/

Дайджест телеграма за неделю 17—23 июля 2017
Правый верхний угол в Гугль-драйве. Особенно радуют левые две иконки рядом

Заглянул в гости в Дептранс, а там рай:

Дайджест телеграма за неделю 17—23 июля 2017

Пятница, 21 июля

Проверяю работы студентов школы дизайнеров. Нашёл поддельный знак рубля:

Дайджест телеграма за неделю 17—23 июля 2017

У знака рубля должно быть продолжение полуовала налево:
http://ilyabirman.ru/meanwhile/all/rouble-sign-bowl-continuation/

С таким шрифтом нарисовать хорошо будет непросто: уже и так много всего торчит.

Кажется, авиакомпания «Эль-аль» обновила логотип. Было так:

Дайджест телеграма за неделю 17—23 июля 2017

Стало так:

Дайджест телеграма за неделю 17—23 июля 2017

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

Кстати, что я до сих пор не знаю, какое из ивритских слов «эль», а какое — «аль». С одной стороны, нужно читать справа налево. С другой, теория близости подсказывает, что каждое ивритское слово должно быть рядом с соответствующим английским. И вроде бы самая правая буква — алеф (вероятно, „а“) ¯\_(ツ)_/¯

Расскажите, если вы в курсе. Личка: @ilyabirman

Приходите к Серёге на курс про иконки:
http://ilyabirman.ru/meanwhile/all/icons-course-2017-aug/

Когда я был на курсе, украл у него такую картинку:

Дайджест телеграма за неделю 17—23 июля 2017

Смотрите, как клёво можно нарисовать знак «Обгон запрещён» (справа снизу). Это, вроде бы, японские знаки

Я не буду делать такие дайджесты каждый раз, так что подписывайтесь в Телеграме. Если вы ещё не пользуетесь Телеграмом, то включайтесь. Это самый нормальный месседжер в мире, и там куча интересных каналов.

Вёрстка неформатированного текста

Первый навык вёрстки, который должен приобрести дизайнер — использование неформатированного текста. Например, в электронной почте.

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

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

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

 274   2017   вёрстка   дизайн   студентам

Курс Игоря Штанга «Типографика и вёрстка»

Сходил на курс Игоря Штанга «Типографика и вёрстка», остался доволен. Курс состоит из трёх больших дней и одного вечера разбора домашки.

Первый день

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

«Классический стиль». Рассказывает не просто о признаках классического стиля, а о ценностях и технологиях, которые повлияли на его формирование. Проводит параллели с живописью, архитектурой. Это помогает понять классический стиль как единую систему, а не случайный набор приёмов. Например, зачем в начале главы стоит буквица, а первое слово набрано капителью? Как это связано с выключкой по ширине и отсутствием крупных заголовков? Эти детали — следствие общей идеи минимизации контраста, уравновешивания всего. Гравюры работают на это же — хорошая гравюра по «тону» дружит с полосой текстом, выглядит такой же средне-серой. В конце темы — рассказ о том, что форматы, возникшие в 19 веке (газеты, реклама) обнаружили недостатки классического стиля. Из моего конспекта: «Когда на полосе несколько рекламных блоков, выглядит ужасно. Центрирование не работает. Прекрасные шрифты не работают. Полоса не компонуется». Поиск новых способов вёрстки, разрешающих эти проблемы, и привёл в конечном итоге к появлению швейцарского стиля.

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

У Игоря на практике успеваешь сделать несколько итераций, следуя его советам. Мне надо было сверстать дореволюционное русское объявление в швейцарском стиле. Одна из версий вышла такая:

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

Второй день

«Конструкция». Формат и поля. Три принципа позиционирования элементов на плоскости: формат, сетка, форма. Модульность. Шесть способов закрыть прямоугольник без кирпичной кладки. Шесть способов использовать сетку так, чтобы не было скучно. Сетка. Известная мысль, что сетка по себе не является конструкцией (и что она для выравнивания, а не компоновки), у Игоря звучит звонче и яснее, чем где-то ещё, потому что противопоставляя, он объясняет, что именно называет конструкцией.

Третий день

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

Надо было сверстать табличку. Ну это меня хлебом не корми. Получилась такая:

«Алгоритм вёрстки». У Игоря был пост, но я его не понял, на курсе было яснее.

«Наглядная типографика». Небольшая тема про всякие игры с формой букв.

Домашка

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

И в неё, короче, весь месяц не влез целиком, а уже пора было бежать на разбор:

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

 568   2016   вёрстка   дизайн   типографика

Что почитать на выходных — 117

Вот:

  1. Designing for The Grand Budapest Hotel. «I remember they corrected the rather wide kerning between the letters A and N, and we asked them to widen it again just like it was in the reference». И ещё: «The signs really added to the claustrophobic feeling of that set, and Wes had asked for them all to be black with simple white hand-painted lettering — based on the style of the old sign at Yorckstrasse subway station in Berlin».
  2. The Psychology of Pricing: A Gigantic List of Strategies.
  3. No one could see the color blue until modern times.
  4. Как я делал афишу курса.
  5. March 2015 Security Incident and the Launch of Two Factor Authentication. Вот как надо писать, если вы облажались.
  6. Test drive of a petrol car. Как-то было похожее про биткоин против бумажных купюр.
 114   2015   автомобиль   вёрстка   дизайн   жизнь   кино   типографика   чтиво

Заголовку не нужно двоеточие

Иногда делают так:

Фичи:
Вайфай
Батарея на 10 часов
Ретина
Плюшки

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

Заголовку не нужно двоеточие:

Фичи
Вайфай
Батарея на 10 часов
Ретина
Плюшки

Обобщающему абзацу не нужно жирноты:

Фичи:
вайфай,
батарея на 10 часов,
ретина,
плюшки.

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

 1011   2015   вёрстка   дизайн   русский язык   типографика

Что почитать на выходных — 107

Дизайнерский спецвыпуск:

  1. 13 Ways Designers Screw Up Client Presentations. Майк Монтейро. Многое из этого, если не всё, было у него в книжке Design is a Job (крайне рекомендую, заметка сгодится в качестве затравки). Оказывается у него есть ещё и вторая книжка.
  2. Три способа закрыть прямоугольник. Игорь Штанг.
  3. The laws of shitty dashboards. Всё так.
  4. Visceral Apps and You.
  5. Voice interfaces. Дастин Кертис. Кстати, да.
  6. Side drawer navigation could be costing you half your user engagement.

Однажды в Википедии: Long s

 42   2014   вёрстка   Википедия   дизайн   чтиво

Что почитать на выходных — 102

Вот:

  1. Выключка по центру: примеры, ошибки, как сделать. Игорь Штанг продолжает серию.
  2. Больше панка, меньше ада — как анархисты и комики 
вывели из кризиса исландскую столицу. Непонятно всё же, как вывели, но клёво.
  3. «Theater» vs. «Theatre»: The Great New York Times Language Swap. Оказывается, theater — исконно-английское написание, которое было вытеснено вариантом theatre в 18-м веке.
  4. Designers Who Don’t Talk Like Designers Get Hired.
  5. Критерии качества информационной статьи. Максим Ильяхов
  6. Рассказ о себе. Максим Ильяхов
  7. A Candid Look at Unread’s First Year. Широко обсуждавшаяся статья Джареда Синклера о том, что написать очень клёвое приложение и получить хорошие отзывы топовых блогеров — не гарантия успеха.

Что почитать на выходных — 101

Вот:

  1. It’s a Windowful Life. Как могли бы работать полосы прокрутки, если бы Эпл их не передизайнил после той жести, которую придумали в «Ксероксе». В тексте автор ссылается на видео с кучей деталей функицонирования разных выживших и не выживших интерфейсных элементов. Удивительно, насколько очевидным и единственно верным сейчас кажется то поведение, которое, на самом деле, было придумано далеко не сразу.
  2. How To Make Tilt Scrolling That Doesn’t Suck. Марко Армент тоже вот про скроллинг.
  3. Игорь Штанг рассказывает о выключке по формату и по левому краю.
  4. Как общаться с клиентом. Илья Синельников.
  5. Why blurring sensitive information is a bad idea. Я всегда чувствовал, что блюр можно сфокусировать обратно брутфорсом — ну так оно и есть.

Абсолютно относительно

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

слов<img class="suffix" src="i/suffix.gif" />ечко

Но что написать в стилях?

.suffix {
  position: ???
  width: 1.5em; /* на три буквы чтоб */
  bottom: -1em;
}


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

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

Поэтому всё время приходится делать так:

слов<span class="suffix"><img src="i/suffix.gif" /></span>ечко

.suffix { position: relative }
.suffix img {
  position: absolute;
  width: 1em;
  bottom: -1em;
}


Спан, конечно, красивее было бы закрыть после «ечк», но это не про семантику заметка. Так вот, весь этот спан, получается, существует только для того, чтобы задать «систему координат» для картинки. Но ведь она уже задана тем, куда вы воткнули эту картинку в разметке!

Так почему было не придумать какой-нибудь position: anchored, который бы участвовал в нормал-флоу, но с точки зрения нормал-флоу имел бы размеры 0 на 0? Можно было бы развить идею, введя anchored-x и anchored-y, чтобы, допустим, сделать сноски на поля, висящие на уровне того места, откуда на них ссылаются. Атрибут position: anchored-y означал бы, что left / right для этого элемента имеют смысл по принципу position: absolute; а top / bottom — по принципу position: anchored, т. е. относительно точки, где элемент встретился в разметке. Тогда текст, снесённый на поля, можно было бы размечать так:

Пушкин писал<sup>1</sup><div class="sidenote"><sup>1</sup> В «Капитанской дочке»</div>: «Береги честь смолоду».

.sidenote {
  position: anchored-y;
  left: 110%; /* чтобы отступить от самого текста 10% его ширины */
  top: 0;
}


Почему создатели стандартов придумывают всякую хрень (вроде box-shadow или анимации) раньше, чем решают базовые задачи вёрстки?

Добавлено несколько позже: Оказывается, я ничего не понимаю в вёрстке. Спасибо комментаторам за прояснение ситуации.
 22 комментария    58   2010   веб-разработка   вёрстка   ЦСС
Ранее Ctrl + ↓