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

дизайн

Отзывы на карточках (прокляты)

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

Даже в рыбе это выглядит плохо. Сейчас объясню, почему.

❌ Плохо виден человек. Портрет зажат текстом и занимает в лучшем случае 20% ширины текстовой колонки. А сама текстовая колонка еще занимает 40-60% ширины экрана. То есть лицо всегда будет маленьким и невыразительным.

❌ Нужно подгонять объем текста. Узкая колонка очень чувствительна к объему текста. Написал лишнее предложение — и у тебя уже две дополнительные строчки, а они растянивают карточку в высоту. Под соседними карточками получается дырка.

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

❌ Карточки слепые. Везде одинаковый мелкий текст, читать неинтересно.

✅ Как надо:

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

Один отзыв под другим, без кликов, галерей и скрывания отзывов за клик.

Фотографию крупнее. Можно все еще держать ее на полях, а можно и в основное поле.

На другом поле можно вынести цитату из отзыва, чтобы он не выглядел слепым.

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

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

Хорошие примеры — на странице курса Ильи Синельникова:

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

И еще примеры из моего курса про инфостиль:

Большой отзыв с красивым сертификатом в конце
Очень большой отзыв с фотографией в конце
2023   верстка   дизайн   композиция

Самсунг против Айфона

А вот «Самсунг» и «Эпл» рекламируют одну и ту же возможность: широкоугольную съёмку. У одной компании колхоз и позорище, у другой кайф и радость:

В чем отличие:

Сюжет. У «Эпла» искусство, путешествия и приключения, у «Самсунга» бытовая сценка на платформе Ховрино. Зачем она там стоит? Что она делает? Это танцы? Тогда надо показывать видео. У «Эпла» есть ощущение масштаба и контраста большого и малого. У «Самсунга» обычные бытовые человеческие масштабы.

Мусор на фото. У «Самсунга» мусор везде: интерфейс приложения, какая-то грязь под перилами, сами перила случайные, ливневка криво сделана, торчат столбы, из-за горизонта виднеются дома. У «Эпла» идеальная природа, чистый песочек, ни одного окурочка туристы не оставили.

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

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

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

Как улучшить

Начнем с того, чтобы почистить сайт от мусора. Начнем с простого: успокоим колхозный веб-дизайн, уберем мусор с сайта интерфейс с фотографии:

Теперь открываем хороший фотобанк и по запросу Wide Angle находим приличную фотографию, которая отражает нужное нам настроение. Я подготовил несколько вариантов в слайдере:

С такими хорошими фотографиями белый фон как-то не комильфо. Но чу!

«Эпл», это ты?
2019   дизайн   фотография

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа над плакатом с осьминогом

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

Исходный вариант:

Тут несколько проблем:

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

У плаката нет запоминающегося хода, притягательного центра, главного композиционного элемента. Издалека это просто много мелких деталей и две полосы.

Плакат дает непрошеный совет и обращается на «ты».

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

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

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

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

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

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

Такой плакат будет интересно рассматривать, и в умах и сердцах людей он будет «тем самым плакатом с осьминогом»

По-прежнему есть проблема, что мы пытаемся упаковать в плакат слишком много всего: и про дизайн, и про редактуру, и про переговоры. Для кого этот продукт? Кому он принесет пользу, помимо студентов первой ступени? Можно ли сделать это полезнее?

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

Если я редактор, я повешу левый плакат. Если я менеджер — правый. Или буду собирать все плакаты серии

Было — стало

Ну вот как-то так. Более подробный разбор и ход мысли — в канале «Смотрю» @ilyahov_smotrit

Если хотите уметь делать классные информационные продукты, в том числе плакаты, — поступайте в Школу редакторов.

2018   дизайн   плакат

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

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

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

Но всё равно.

Грязь и зигзаги

Продолжаю разговор о вёрстке по зигзагу.

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

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

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

Широкие слайды — в два столбца

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

Я поклялся на Мильчине, что закрою секретные данные

Первый шаг — убрать отступы слева. Заодно сократили текст:

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

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

Еще поработали с цветом, но об этом в другой раз
2017   верстка   дизайн   цвет

Текст в таблицах

Леныч! Смотри, вот ты пишешь текст про налогообложение. У тебя абзацы текста, а потом ты сравниваешь системы налогообложения в таблице. Это выглядит визуально интересно, но есть проблемы:

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

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

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

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

Короче:

Таблица — для чисел. Многоколонники — зло. Не ставь текст в таблицу без крайней необходимости

Узел Диляры

Студентка второй ступени Школы редакторов Диляра сдала на прошлой неделе промостраницу вот с таким узлом. Он классный:

Что здесь хорошего:

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

Есть мелкие замечания:

Но если это исправить, принципиально ничего не изменится, по-прежнему мило:

Здорово, когда правила применены не механически, а с любовью. Диляра, спасибо!