35 заметок с тегом

иллюстрация

Позднее Ctrl + ↑

Схема в обратную сторону

Так. Имеем схему действий по типу «Бусины на нитке». Имеем слайд презентации. Задача — уложить одно в другое:

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

Ладно, давай тогда уложим всё слева направо, а в обратную сторону нитка пусть идет порожняком. Но черт возьми, тогда пространство расходуется впустую. Вон сколько эта нитка отъедает:

Е-мое... что ж делать-то?.. Погоди-ка, что это такое? ААА ЧТО ТЫ ДЕЛАЕШЬ НЕЕЕТ ЭТО ЖЕ НИТКА СТООЙЙ ААААРРРГХХХ!!

Можно поставить цифры сверху вниз, столбиками. Можно слева направо, строками. Как хотите. Никита, специально для тебя:

2018   дизайн   иллюстрация   структура   схема

Экраном на читателя

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

Подпись к этой фотографии в оригинале: «Такой-то и сякой-то обсуждают инвестиции в такой-то проект»

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

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

То есть не просто «Двое мужиков сидят над ноутом», а «Двое мужиков обсуждают бизнес-модель, смотри, тут EBITDA отрицательная, потому что операционные расходы растут, а торговая наценка съедается курсовой разницей. Давай переходить на отечественных поставщиков...»

Короче, принцип — развернуть фотографию экраном на читателя.

Вот еще пример фотографии из той же работы:

Тут на фоне должна появиться его презентация с ключевыми мыслями, чтобы мы могли ее прочитать:

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

2018   иллюстрация   фотография

Информативность подписи к иллюстрации

Иногда смотрю студенческие работы и вижу там подписи типа «Такой-то человек делает то-то». Вот пример:

Так может быть, когда очень важно, что на фотографии именно Людмила Сарычева (это не она). Но это иллюстрация в промостранице курса конструирования одежды. Тут важно не кто делает, а что делает, почему и как. Поэтому подпись должна рассказывать именно об этом.

Преподаватель Светлана Иванова помогает настроить натяжение нити в оверлоке. Когда нить правильно натянута, происходит то-то и то-то. На курсе мы работаем на промышленных машинах, но эти навыки пригодятся и на домашних устройствах

Преподаватель показывает, как обметывать пройму. С такой обметкой пройма будет аккуратной, а соединения с подкладой не будет видно. Этот же метод используют конструкторы домов Версаче и Хоюго Босса

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

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

Очень многое зависит от ситуации. Например, на промостранице фитнес-клуба могут быть фотографии, как тренер кого-то подстраховывает. И будет написано: «Тренер Сергей Кралин помогает спортсмену на жиме лежа. Такая страховка нужна, чтобы...» — и вот я запомнил его имя и фамилию, пришел в зал и говорю: «Хочу к Сергею Кралину». Тут фамилия и имя нужны.

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

2018   иллюстрация   информативность

Подписывай видеоролики

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

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

Да и с подсказкой тоже не всегда. Но с подсказкой лучше, чем без.

2018   иллюстрация

Коллажи из одной вселенной

Смотрите. Есть коллаж о детских праздниках. Тут фотографии из разных вселенных: из ресторана, на природе, в каком-то актовом зале. И хотя фотографии в коллаже сомасштабные, всё равно смотреть сложно, они спорят меж собой:

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

Теперь я мысленно как бы в одном пространстве, просто смотрю на него с разных сторон. Так гораздо легче.

Окей, а что если у нас реально три вселенных, и нужно как-то через них провести? Тогда каждая фотография должна быть вселенной:

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

В общем, так лучше. Делайте так.

2018   дизайн   иллюстрация

Разбор промостраниц о контроллере

Школа редакторов. Задание «Текст для продающей страницы». Основные проблемы:

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

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

Заходите на территорию читателя: пишете о его мыслях, чувствах, желаниях. Это неправильно. См. читательские границы

2018   демонстрация   иллюстрация   реклама

Плакат для кофейни

Да-да, я знаю:

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

Но всё равно.

Не ставьте текст на фотографию

Продолжаю тему туления текста: не ставьте текст на фотографии, особенно заголовки. Вот так — плохо:

Дело в том, что чтобы поставить текст на фотографию, вам нужно либо искать место на фото, где нет деталей, либо стараться как-то замылить, замазать или спрятать детали. Иногда решают ставить на полупрозрачную плашку. Еще иногда забеляют или затемняют фотографию, чтобы текст смотрелся контрастным:

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

Решение очень простое: ставить текст за пределами фотографии:

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

Пример с Алёной

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

Теперь листайте слайдер, чтобы изучить варианты:

Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию.

Еще у Бирмана о том же

2018   верстка   иллюстрация

Семён, не тули

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

Если тебе нужно совместить текст с картинкой, либо не пересекай их вообще, либо делай вид, что они друг о друге не знают:

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

2018   верстка   иллюстрация

Слайдеры в статье о Путине

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

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

Удобнее сразу показать «было — стало», причем отрезать те части фотографии, на которых ничего не происходит:

Отрезал пустые бока фотографий, чтобы не тулить в узкую колонку две широкие фотографии

Теперь видно, что не только изменился заголовок, но и пропала цифра возле правого столбика и добавились единицы измерения над столбиками. Когда две картинки рядом, найти десять отличий легче.

Есть еще много способов показывать «было — стало»: двумя фотографиями подряд, «шторкой», фейдом по скроллу, обязательным кликом и т. д. Об этих способах как-нибудь потом. Анонсы новых постов — в Телеграме @glvrdru. Подписывайтесь, чтобы не пропустить.

2018   демонстрация   иллюстрация   интерфейс
Ранее Ctrl + ↓