Безумная вёрстка 90-х: вдохновляемся журналами «Птюч» и «НАШ» для дизайна в SMM

Ломаем сетку, делаем коллажи

Журнальная вёрстка 90-х: как использовать в соцсетях сейчас

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

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

Про «Птюч» и «НАШ»

«Птюч» — это культовый московский журнал, выросший из рейв-культуры. Его придумали участники одноимённого клуба, включая журналиста Игоря Шулинского. Издание выходило с 1994 по 2003 год и стало голосом ночной тусовки. Там экспериментировали не только с контентом, но и с вёрсткой: кислотные цвета, ломанная сетка, хаотичная типографика.

«НАШ» — днепропетровский арт-журнал, выходивший с 1998 по 2007 под руководством Игоря Николаенко. Он задумывался как журнал, который просто смотрят, и в его оформлении использовали пластилин, вышивку, коллажи, сканы и случайные предметы.

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

Для сравнения, журнал «ОМ», который выходил с 1995 года, придерживался более сдержанного подхода. Его дизайн был чище и гламурнее, нацеленный на широкую аудиторию, хотя по меркам 90-х тоже выглядел ярко и современно. Обложки «ОМа» казались аккуратными, хоть и смелыми, а вёрстка определённо была более читабельной.

Комментарий эксперта

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

Лиза Кошелева
Лиза Кошелева

Междисциплинарная художница, дизайнер

Ключевые приёмы вёрстки 90-х и как применить их в SMM

Среди экспериментов «Птюч» и «НАШ» можно отметить:

  • ломаную модульную сетку;
  • высокую плотность контента;
  • активную типографику;
  • коллажирование;
  • многослойность;
  • использование шумов.

Сейчас эти приёмы переживают новую волну популярности.

Комментарий эксперта

Любое новое высказывание почти всегда рождается из переосмысления уже существующего. В постмодернистской логике это нормально: мы собираем новое из фрагментов прошлого. При этом сами циклы сегодня заметно сократились — если раньше это были десятилетия, то сейчас вдохновение часто берётся из периода 20–30 лет назад, в том числе из 90-х.

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

Рассмотрим каждый приём и постараемся понять, как его применять в цифровых форматах — карточках, сторис, обложках для соцсетей. А самое главное — как повысить узнаваемость в SMM без ущерба для восприятия.

Ломаная сетка и нарушенная композиция

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

А вот разворот журнала «НАШ». Читать уже гораздо удобнее, однако вёрстка не идеально ровная: колонки разной ширины и расположены на странице не по сетке, текст разбивает большое количество изображений.

Как применять сейчас. В SMM ломать сетку можно дозированно, например, слегка наклонить или сместить один из текстовых блоков, использовать асимметричное размещение изображений или выход элементов за границы кадра. В Instagram*, в каруселях или сторис, можно сделать более свободный коллаж. Убедитесь, что базовая читаемость не страдает: ключевой текст лучше оставить горизонтальным и контрастным, а экспериментировать — с фоном или второстепенными деталями. Тогда приём ломаной сетки даст нужный акцент, но не отпугнёт неразборчивостью.

Пример из Telegram-канала бренда фарфора «Антихрупкость»:

Коллажность и плотность слоёв

Как это выглядело тогда. Страницы журналов «Птюч» и «НАШ» напоминают калейдоскоп из текста, изображений, логотипов, декора и скрытых цитат. Для читателя это визуальный взрыв: глаза разбегаются, приходится вглядываться в детали и контекст. Наслоение создавало ощущение, что страница собрана из осколков массовой культуры.

Пример из журнала «НАШ»:

Комментарий эксперта

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

Лиза Кошелева
Лиза Кошелева

Междисциплинарная художница, дизайнер

Как применять сейчас. Визуальная плотность здорово задерживает внимание. Однако слишком загромождённый пост на маленьком экране смартфона может отбить желание всматриваться. Рекомендации тут такие:

  • Смешивайте тщательно подобранные элементы. Комбинированное изображение — не просто хаос. Подберите 3–5 визуальных фрагментов (фото, стикеры, иконки, текстуры), которые вместе передают нужное настроение, и компонуйте их. Не пытайтесь уместить сразу всё — лучше несколько крупных образов, чем сотня мельчайших.
  • Следите за контрастом слоёв. В цифровом коллаже вы можете регулировать прозрачность, цветовые фильтры для гармонии. Например, если фон очень пёстрый, слегка приглушите его или размойте, а поверх накладывайте чёткие объекты.
  • Используйте коллаж для сторителлинга. Такой приём отлично работает на эмоциональное вовлечение. Главное — держать фокус на теме: все кусочки коллажа должны работать на единый посыл, чтобы зритель не потерялся.

Пример визуальной плотности из Telegram-канала Медиашколы НКО:

И пример использования коллажности из Telegram-канала «Золотого Яблока»

Активная типографика

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

Комментарий эксперта

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

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

Как применять сейчас. Активная типографика всё ещё с нами как тренд — от ugly design афиш до анимаций сторис. Советы:

  • Выделяйте шрифтами эмоцию. Используйте различные шрифтовые пары и эффекты, чтобы подчеркнуть тон сообщения. Например, к спокойному нейтральному тексту можно добавить кислотный заголовок странной формы.
  • Не жертвуйте важным текстом. Все экспериментальные шрифты и эффекты лучше оставить для декоративных надписей, фоновых слоёв или второстепенных фраз. Ключевые цифры, слоганы, CTA-кнопки должны оставаться читабельными — пусть даже в необычном шрифте, но достаточно крупно и контрастно.
  • Играйте с динамикой. Типографику можно анимировать — появляющиеся буквы, дрожащий текст, глитч. Это безопасный способ добавить жизни в буквы без полной потери ясности. Например, сторис в Instagram* поддерживают анимированные шрифты — можно имитировать эффект прыгающих строк из журналов 90-х, но пользователь всё равно успеет прочитать, так как движение кратковременно.
  • Тестируйте размеры. Помните, что в мобильной ленте мелкий шрифт попросту не видно. Проверяйте: если нужно прищуриться, чтобы понять буквы, — лучше упростить или укрупнить.

Вот пример из Telegram-канала строительной компании RBI:

Шум, зерно и текстуры

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

Вот разворот из журнала «НАШ», где есть эффект акварели и объёмного рисунка, видимо, на стене или гуашью.

Как применять сейчас. Совсем недавно был популярен flat design, но текстуры и имитация аналоговой техники снова востребованы. Чтобы применять эффект ретро безопасно:

  • Добавляйте зерно умеренно. Лёгкий шумовой фильтр на фоне карточки уберёт цифровую стерильность. Избегайте сильного шума на мелких элементах и тексте, иначе важные детали могут пропасть.
  • Глитч-эффекты и артефакты. Можно добавить небольшое искажение изображения, дублирование контура — такие фильтры есть и в Instagram*, и как отдельные приложения. Они придадут вашему сторис вид старого телеэкрана. Один-два глитч-элемента привлекут внимание, а вот если весь кадр дрожит и рябит, зритель не досмотрит.
  • Оптимизируйте файлы. Текстуры и шум могут ухудшить сжатие изображений при загрузке в соцсети — алгоритмы пытаются выровнять шум и появляются мыльные артефакты. Чтобы этого избежать, экспортируйте картинку в немного повышенном качестве или используйте форматы PNG/WebP, если размер позволяет. Попробуйте избежать однородных заливок крупной текстурой — лучше несколько зон текстуры, чередующиеся с чистыми областями.

Пример из Telegram-канала «Справочной», бизнес-медиа «Точка Банка», где использован халфтон — техника, которая имитирует картинку или текстуру с помощью точек разного размера, плотности или формы:

Где ещё искать вдохновение: рекомендации от экспертов

  • Instagram* студии и школы современного дизайна «Щёлочь», где ребята создали вселенную из коллажей и смыслов.
  • Telegram-канал студии «Антихрупкость», которые используют воздух и активную типографику.
  • Instagram* мебельного бренда ånnki studio, где визуал — это минималистичные фото мебели, напоминающие постерные журнальные обложки с одним акцентом.

Каких ошибок избегать

Комментарий эксперта

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

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

Не забывайте о визуальной иерархии — то есть о том, как зритель будет сканировать контент. Вот несколько общих рекомендаций.

Одно сообщение — один фокус. Даже если дизайн перегружен декоративными деталями, постарайтесь подчинить их одной идее. На каждой карточке или обложке выделите главный элемент: это может быть заголовок, логотип, слоган или центральное изображение. Его нужно сделать самым заметным (размером, цветом или положением) — так аудитория быстро уловит суть, а уже потом при желании рассмотрит остальное.

Контраст старого и нового. Эффектно смотрится приём, когда в винтажном дизайне стратегически встроены современные, более «чистые» элементы. Допустим, вся композиция — коллаж и кислотный шрифт, но кнопка CTA или название бренда выполнены минималистично. Глаз автоматически выделит этот контрастный элемент, и сначала пользователь увидит бренд/кнопку, затем исследует стилизованное окружение.

Сетка — незримый помощник. Даже самый ломаный макет должен строиться на сетке, пусть и условной. Используйте направляющие в редакторе, чтобы размещать объекты с определённым ритмом. Это создаст порядок внутри беспорядка, который читатель почувствует на уровне подсознания. В цифровой карточке достаточно 3–4 опорных линий (по краям, по центру, по диагонали), чтобы элементы композиции выглядели взаимосвязанными.

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

Последовательность карточек. Если делаете серию карточек, например, карусель в VK, можно поставить на первый экран самый кричащий элемент (арт-коллаж с громким заголовком), на второй — более подробный текст на более спокойном фоне, на третий — снова что-то яркое и так далее. Это поможет соблюсти ритм и не перегрузить аудиторию. Даже если это будет плитка, а не карусель, желаемый эффект всё равно сохранится.

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

Экспериментируйте смело, но не забывайте о зрителе: пусть эти эксперименты доставят ему радость и вызовут интерес, а не диссонанс.

«Честно» — рассылка о том, что волнует и бесит

Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.

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