Как это сверстано

@kaketosverstano

Игорь Штанг @nobelfaik о хитростях верстки

Большая переверстка: vk.com/pereverstka_online

Таблицы и прочие радости: igorshtang.ru/course/tables

Как это сверстано (Russian)

Как это сверстано – это канал, ориентированный на всех, кто интересуется версткой и дизайном. Здесь вы найдете полезные советы и трюки от Игоря Штанга, известного как @nobelfaik. Игорь делится своим опытом и знаниями о хитростях верстки, помогая новичкам стать профессионалами в этой области.

Помимо этого, на канале также представлена информация о большой переверстке, доступной по ссылке vk.com/pereverstka_online. Здесь вы сможете найти интересные материалы, которые помогут вам улучшить ваши навыки верстки.

Не остаются без внимания и таблицы, которые являются важной частью верстки. Игорь Штанг предлагает курс по работе с таблицами на своем сайте igorshtang.ru/course/tables, где вы сможете углубить свои знания и навыки в этой области. Присоединяйтесь к каналу "Как это сверстано" и становитесь профессионалом в верстке и дизайне!

Как это сверстано

10 Jan, 12:05

В письмах я часто пишу слово «QR-код» и только сегодня понял, что пишу его, как дедушка. Тем временем оно уже успело ассимилироваться:

QR code
↓
QR-код
↓
кьюар-код
↓
куар-код
↓
куаркод
↓
куар

А вы как пишете?

1,404

Как это сверстано

09 Jan, 17:56

⚡️ Сегодня и завтра табличный курс еще можно купить со скидкой: igorshtang.ru/course/tables

Теория: ~~6900~~ → 5900
Теория + практика: ~~14900~~ → 12900

1,876

Как это сверстано

07 Jan, 08:34

Советские обложки на тему зимних видов спорта. Все картинки с Авито #советскаякрасота

2,591

Как это сверстано

26 Dec, 06:45

Рубрика #кусочеккурса

Рассказываем, когда сделать таблицу наглядной.

☃️ До 10 января курс «Таблицы и прочие радости» продается со скидкой: igorshtang.ru/course/tables

3,030

Как это сверстано

05 Dec, 08:34

Слишком много списков

Иногда редакторы и дизайнеры слишком увлекаются и превращают текст в череду списков. С одной стороны, это вроде хорошо: разложили всё по полочкам. А с другой, верстка получается дробной и однообразной.

Рассказываю о своем опыте работы со списками на примере двух проектов — презентации и книги. (Примеры старенькие, но хорошо иллюстрируют тему.)

youtu.be/GfYgAocyrIQ

2,958

Как это сверстано

03 Dec, 06:51

Польза повторов

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

awdee.ru/the-benefits-of-repetition

2,682

Как это сверстано

02 Dec, 08:15

В эфире рубрика #советскаякрасота

Книжные обложки о телевизорах и телевидении. Все картинки с Авито

2,464

Как это сверстано

22 Nov, 10:56

И сейчас уместно дать ссылку на мой старый пост о выключке по знаку: nobelfaik.livejournal.com/139728.html

1,294

Как это сверстано

22 Nov, 07:48

На Дизайн-просмотре показывал расчет, сверстанный в небольшую табличку. Зацените выравнивание чисел 🤓

1,486

Как это сверстано

21 Nov, 13:59

Разборчивый мелкий текст

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

Как достигается удобочитаемость:

1. Шрифт Formular, который мы выбрали для основного текста, сам по себе разборчивый, поэтому искать для схем другую гарнитуру не пришлось. У шрифта простой и привычный рисунок, широкие пропорции, крупные строчные. Нет мелких и тонких элементов, которые могут исчезнуть при уменьшении.

2. Начертание я использовал обычное (regular), как в основной тексте. Для мелкого шрифта часто берут более насыщенное начертание, например, medium, — я тоже попробовал, но выглядело слишком жирно. К тому же на схемах уже есть жирные заголовки (black).

3. Трекинг самых мелких подписей увеличен на 1,5% (в Фигме), потому что мелкому шрифту нужно больше воздуха. Интерлиньяж тоже свободный — 130%. В крупном масштабе такой набор выглядит разреженным, но в реальном размере самое то.

Если вы делаете макет для бумаги, то и тестировать верстку нужно на бумаге в масштабе 1:1.

1,541

Как это сверстано

18 Nov, 09:12

Многие видели обложки журнала AvantGarde, но мало кто видел, что скрывается внутри. А внутри много сисек и политики.

Главная фишка макета — это кастомные заголовки. Как появляется такая акциденция:

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

Арт-директор Герб Любалин, 1968—1971
Архив всех номеров журнала

2,700

Как это сверстано

11 Nov, 08:24

В эфире рубрика #советскаякрасота

Книжные обложки на столярную тему. Все картинки с Авито

3,200

Как это сверстано

08 Nov, 07:34

Отвечаю на вопрос, можно ли ставить заголовок ровно посередине между абзацами. Коротко: можно, но осторожно

ЖЖ: nobelfaik.livejournal.com/274056.html
Медиум: nobelfaik.medium.com/80f4b7b6fc7a

2,003

Как это сверстано

07 Nov, 06:04

Рубрика #кусочеккурса

Рассказываем, когда цифры и слова лучше заменить картинкой. Курс «Таблицы и прочие радости», глава «Вместо таблицы»: igorshtang.ru/course/tables

3,228

Как это сверстано

05 Nov, 09:16

Итоги конкурса

Непросто было выбрать победителей, потому что многие пошли по верному пути и сделали хорошую верстку. Мы с Мишей Капанагой всё-таки остановились на двух макетах, их авторы @kosinni и @Stasvw ↑

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

Победители получают подписку на курс «Таблицы и прочие радости».

Чек-лист для самопроверки. Вы молодцы, если:

✔️ Построили таблицу или что-то подобное. Табличный формат подходит для этого текста.

✔️ Убрали лишние слова в боковике, чтобы было проще искать:
Если работаете на УСН → УСН
Юрлицам и ИП на ОСНО → ОСНО
По страховым взносам → Страховые взносы
и т. д.

✔️ Отделили налоговые режимы (УСН, ОСНО и АУСН) от «опций» (НДС, Страховые взносы, Сотрудники)

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

✔️ Поняли, что подписать платёжки — это то же самое, что уплатить, и написали уплатить, а еще лучше — заплатить)

Всем спасибо за участие!

2,217

Как это сверстано

04 Nov, 07:37

Естественность рваного края

Как-то в Тбилиси мы с Мишей Капанагой спорили о естественности верстки. Миша был за естественность и говорил, что не нужно привязывать висячие предлоги, ставить переносы и разбивать на строки вручную — как ляжет, так ляжет. Я отвечал, что никакой естественности в дизайне нет, он весь сделанный, а раз так, то нужно всё сделать до конца. Каждый остался при своем мнении, и слава богу.

Вчера мне попался очередной пример естественного рваного края, и вот как он выглядит.

А вы как считаете?

2,417

Как это сверстано

03 Nov, 13:19

Если вы подумывали пойти на «Большую переверстку», то сейчас самое время, потому что со следующего года она подорожает.

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

Начинаем 11 ноября, присоединяйтесь: vk.com/pereverstka_online

2,459

Как это сверстано

24 Oct, 08:36

Сегодня конкурс!

⚡️

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

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

4,239

Как это сверстано

22 Oct, 06:52

Пилотный выпуск зина Run Don’t Walk — «о людях, которые двигают вперед себя и свои сообщества». Лондонская студия Alex Hunting, 2024

3,693

Как это сверстано

21 Oct, 06:36

26 октября выступлю на Дизайн-просмотре в Москве. Расскажу про дизайн шаблонов и верстку динамического текста. Приходите послушать и пообщаться: designprosmotr.ru

3,183

Как это сверстано

08 Oct, 13:27

И некоторые развороты целиком

4,167

Как это сверстано

08 Oct, 13:24

Андрей Шапиро написал книгу о собственном методе проектирования, а я ее сверстал. Вот что получилось.

Подробный рассказ с большими картинками в ЖЖ и на Медиуме

3,055

Как это сверстано

03 Oct, 05:36

Плакат к выставке итальянского дизайна в Нью-Йорке. Студия Mut, 2024

2,928

Как это сверстано

21 Sep, 11:45

В центре Челябинска построили новый торговый центр и решили отдать одну стену под вывески. Очевидно, что всё уже пошло не по плану, да и плана, наверно, не было.

Предлагаю подумать, как могла бы выглядеть эта стена в идеальном мире (в небесном Челябинске). Можно набросать макет, можно показать какие-то существующие решения. Вариант «оставить стену пустой» не принимается.

3,995