Nimax Давуд Сафаров
2 504

Дизайнерская косметичка: как оформить статью

Семь советов автору, дизайнеру и пиар-специалисту от Марии Троицкой, графического дизайнера Nimax. Как грамотно добавить в статью картинки, удачно пошутить на превью и преподнести полезную информацию красиво и лаконично.

В закладки

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

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

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

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

Готовьте превью для статей и выясните, что такое сниппет для соцсетей

В превью вся наша пиар-сила. Удачную обложку хочется репостнуть и скинуть в чатик. Если все превью подчинены единому фирменному стилю с рубрикацией, читатель начинает узнавать их в ленте и запоминает. Подписчики становятся требовательнее и разборчивей. Вы сами же не вступаете в группы со скучным и неоригинальным контентом! Качество материалов должно соответствовать ожиданиям и потребностям аудитории.

Хочу

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

Тинькофф Журнал — любовь с первого взгляда и надолго. Превью делятся на «по существу» и «киберпанк, который мы заслужили».

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

Лентач — комментарии излишни. Замечу только, что для каждой рубрики есть шаблон, и мемы всегда так переработаны, чтобы стиль Лентача сохранялся. И пусть кто-нибудь скажет, что «этот бред» не работает.

Внимание! Для подобной стратегии остро необходимо отменное чувство юмора и способность быстро реагировать на текущие события.

Еще можно посмотреть на наши превью — стараемся выдерживать единство, но иногда освежаем концепцию постов. В основе — лаконичные фоны и 3D-графика. Про то, почему всем нужно учиться моделировать, где и как потом применять можно почитать в статье нашего арт-директора Павла Конюкова.

Могу

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

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

А на Wonderzine принцип такой: в сниппет всегда идет первая картинка из статьи.

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

Иллюстрируйте! Даже примитивно

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

Хочу

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

Могу

Стройность, качество и метафора требуют большого количества времени. А если статью нужно опубликовать уже вчера? Упростите картинки! Геометрические примитивы, стрелочки. Пусть изображения будут инфографичными.

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

В поиске и подборе метафор могут помочь Pinterest, Dribbble, а ещё сервис NounProject. Здесь много иконок, собранных со всего света, а в поиск можно вбить даже абстрактное понятие. Он часто помогает с определением стартовой точки для создания чего-то простого и быстрого.

Сервис NounProject

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

Анимируйте! Но знайте меру

Анимация — это быстрый и эффективный способ выделиться из общей ленты и разбавить текст. Создавайте анимационные превью для публикаций, добавляйте гифки внутрь статей. Графики выглядят намного более жизнерадостно, если стрелка повышения продаж ползет вверх!

Хочу

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

Мы ведь договорились, что «Хочу» для идеалистов? Вот и помечтаем.

Заставку Pixar узнают и любят, здесь классическим стало уже всё: от скрипа лампы в начале до затухания плафона.
У Google есть маскоты: Google Fruits или Google doodles. Фрукты переходят из заставки в заставку, взаимодействуют друг с другом и нарисованы в запоминающейся технике. Единая цветовая палитра тоже узнаваемая.

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

Могу

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

Моушн-графике очень благодарны «скучные» данные: графики, таблицы, показатели.

Мы тоже выпускаем анимации, чаще всего используем их в превью.

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

Пользуйтесь возможностями площадки. И смотрите в код

Решение о том, где публиковать статью, нужно принять до ее оформления. Часто нужно не столько попасть в стилистику компании, сколько в стилистику той площадки, на которой вы планируете публикацию. У СМИ бывают разные технические требования, о которые разбиваются даже гениальные идеи.

Хочу

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

Могу

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

Если у вас есть возможность редактировать статью непосредственно перед отправкой в блог, внимательно смотрите, какие функции вам доступны. Так можно делать на VC и других UGC-СМИ. Может быть, получится поставить красивые сноски? Добавить «листалку»? Или вообще выпустить карточки для мобайла, как на Яндекс.Дзене? Не бойтесь посмотреть на публикацию шире!

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

Вот так выглядит страница, через которую пользователь выкладывает статьи на VC.ru. Тут много полезных инструментов. Есть возможность создать маркированные списки, сделать галерею фото. Рекомендации редакторов VC по тому, как публиковать материал грамотно, можно найти здесь и здесь.
А так выглядят нарративы на Яндекс.Дзене. Здесь и здесь можно найти все инструкции создателей по тому, как их готовить.
Примеры нарративов

Следите за трендами. Изучайте статьи других компаний

Если в ленте пользователя двадцать цветных превью и одно черно-белое, очевидно, на какой статье скорее всего остановится его глаз.

Посмотрите чудесную лекцию об управлении вниманием читателя. Максим Ильяхов рассказывает про организацию текста, фотоконтент и закрытие Фейсбука. Полезно и смешно!

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

Хочу

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

Могу

Не хватает времени на полноценное исследование? Заходите в топ публикаций! Там всегда собраны самые удачные материалы блога. Просмотра трех-четырех вполне хватает на то, чтобы понять что «зайдёт» амбассадорам площадки и почему.

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

В блоге журнала Inc все статьи каталогизированы, и перед публикацией можно проанализировать статьи других авторов в нужной рубрике.

Резюмируйте и подытоживайте. Но без фанатизма

Статья — это внушительная простыня текста, которую нужно осилить. А мессенджеры, соцсети и паблики с мемами так и норовят отвлечь! Держите читателя в напряжении и постоянно напоминайте ему, зачем он читает текст. Собирайте полезные советы, инструкции и шаги в памятки. Многие сохраняют такие материалы для работы или распечатывают в офис. Если у пользователя совсем нет времени, он может сразу перейти к карточкам — охватите торопыг!

Хочу

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

У нас бывает, что статья перерастает в плакат, игру или тест. Так материал воспринимается легче и привлекает больше внимания. Да и готовить его интереснее. Наши творения можно найти по хэштегу #nimaxposters и в отдельной вкладке на сайте.

Могу

Аккуратно оформить инструкции, которые есть в статье — уже полдела! Сравниваете преимущества соцсетей? Оформите наглядную табличку по критериям. Безумный креатив и оригинальность здесь не нужны — это инструмент для удобства пользователя. На дополнительные материалы не всегда отведено время, старайтесь в первую очередь грамотно организовать пространство внутри текста.

Вот так мы решали это в серии статей о SEO для UGC. В конце каждой давали чек-лист, который можно сохранить.

Чек-листы и карточки могут в какой-то момент снести голову любому. Это простой и эффектный приём, поэтому соблазн его использовать постоянно очень велик. Следите за собой и вовремя «бейте по рукам». Если все публикации начинают быть похожи на «88 советов быть успешным» — вам нужно отдохнуть!

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

Не ленитесь перерисовывать данные. Читатель будет благодарен удобной инфографике

Профессиональные инструменты контекстолога или SEO-специалиста не для красоты, а для эффективности. Данные, которые специалисты отсылают дизайнеру, всегда бесценны, но эстетическая составляющая часто наводит уныние.

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

В этом разделе не будет варианта «Хочу» и «Могу», это история, где нужно сделать «через не могу».

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

Изначально сравнительная таблица из статьи о том, как выбрать соцсеть для продажи товаров и услуг, была собрана в Google Docs. Мы сделали её более наглядной, контрастной и добавили заголовок!

Эпилог

Здесь есть пара советов, которые не вошли ни в один из разделов, но идеологически важны:

Не беритесь оформлять, не понимая сюжета статьи

Вы не узнаете, какие данные важны, а значит рискуете выпустить бес/не полезный материал. Лучше не тупить, а обсудить с автором важные моменты.

Не пытайтесь быть кем-то другим

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

Если вам необходима смена стратегии поведения, то прорабатывать ее нужно на всех уровнях. Одна сильно выбивающаяся статья ситуацию не изменит.

Будьте взаимовежливы и предупредительны

Даже если что-то не влезает в вёрстку и очень хочется выкинуть абзац — посоветуйтесь с автором. Это что-то легко может оказаться самой важной информацией.

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

Будьте правдивы и искренни

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

{ "author_name": "Давуд Сафаров", "author_type": "self", "tags": [], "comments": 1, "likes": 44, "favorites": 31, "is_advertisement": false, "subsite_label": "nimax", "id": 57469, "is_wide": false, "is_ugc": true, "date": "Wed, 13 Feb 2019 15:47:15 +0300" }
{ "id": 57469, "author_id": 66944, "diff_limit": 1000, "urls": {"diff":"\/comments\/57469\/get","add":"\/comments\/57469\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/57469"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 208218, "last_count_and_date": null }

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

Популярные

По порядку

3

Очень полезно, спасибо😊

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }