Безумная вёрстка 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-е вырезали что угодно из журнала, но сейчас лучше брать стоковые или собственные фото. И, конечно, если используете чужие логотипы или лица — убедитесь, что это уместно и этично.

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

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

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

Наш юрист будет ругаться, если вы не примете :(
⛔️ Запрет ТГ: что делать?