Позднее Ctrl + ↑

Пятмуз.

Кто не знает Bon Jovi? Все знают Bon Jovi. © из какой-то американской комедии.

Американская рок-группа, образовавшаяся в Нью-Джерси в далёком 1983 году, покорила сердца сотен миллионов людей по всему миру: девчонкам всегда нравился вальяжный вокал Джона Бон Джови, а мальчишки тащились от используемого гитаристом Ричи Самборой ток-бокса.

Состав группы до ухода Ричи Самбора. В настоящее время его заменил Фил Икс.
 

 
Что такое ток-бокс?

Ток-бокс (talkbox) — блок эффектов (корпус + трубка), который позволяет изменить звук музыкального инструмента при помощи ротовой полости. Иначе говоря, звук от гитары поступает в корпус ток-бокса, где находится звукоизлучатель высокой частоты, к которому подключается один конец виниловой трубки, а другой конец оказывается в ротовой полости исполнителя. При помощи губ, языка и гортани исполнитель моделирует уникальную форму звука. Далее всё просто: смоделированный звук поступает в микрофон, а затем на вход усилителя или звукозаписывающую аппаратуру. Использование ток-бокса хорошо слышно в песнях “Liniv’ On Prayer” и “It’s my life”, а при исполнении это выглядит так:

Ричи Самбора использует ток-бокс, Bon Jovi — Livin’ On Prayer (Live on Letterman), 2010.

Лонгриды и Пермь.

Во всем мире давно известно понятие «лонгрид» (от английского “long read”) — этакий современный формат публикации материалов на сайтах изданий, который основывается на авторской подаче и глубине темы, о которой идёт речь.

Хороший пример лонгрида-реконструктора — материал от 2014 года московского «Коммерсантъ» о Чернобыле.

Ещё весной этого года я предлагал использовать данный формат изданию «Business Class», но что-то они с ним не подружились (надеюсь, в будущем исправятся).
А буквально на днях меня порадовал портал 59.ru, сделав лонгрид-репортаж про LADA XRay. Но сделал совершенно несерьёзно. Не хватило основательности подхода к созданию материала в формате «лонгрид».

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

Раз: вместо favicon «Тильды» лучше использовать родную 59.ru.

Два: Поскольку лонгрид подразумевает длинную web-страничку, то было бы неплохо сделать боковое меню с возможностью перепрыгивать блоки (или вернуться наверх). Лонгрид могут прочитать не с первого раза, а со второго или третьего, поэтому навигация лишней точно не будет.

Три: Нельзя ставить текст на фотографии, если они для того не предусмотрены. Фотоматериал, как и структура лонгрида, готовятся заранее. Поэтому можно сделать хорошие фотографии с однотонным фоном (это может быть белая стена, голубое небо или просто флипчарт на заднем фоне). Затемнять (или размывать) фотографию, использовать контрастную плашку — дурной тон.
 

 
 

Четыре: Вёрстка — наше всё. Я, как человек плохо умеющий верстать, стараюсь визуально скомпоновать между собой фото и текст (если того требует продукт). В данном случае, можно было сделать четыре отдельных фотографии и красиво разместить данные под фото. Ну, или попросить помощи дизайнера.
 

 
 

Пять: Типографика — штука сложная и, порой, болезненная. На лонгриде вместо «—» (тире) используется «-» (дефис). Это можно увидеть как в тексте прямой речи, так и просто в предложениях (например, между подлежащим и сказуемым).
Кроме того, на некоторых фотографиях проскакивает шрифт Georgia, хотя лонгрид сделан гротеском Roboto. Использовать «антикву» для блоков текста на фотографиях в подобном случае — плохая затея, потому что читателю сложно воспринимать как текст, так и фотографию.
Выключка и переносы тоже являются проблемной зоной данного материала.
 

 
 

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

Семь: Не стоит накладывать фотографии слоями друг на друга. Лучше всего сделать слайдером галерею, которая будет что-то нам рассказывать («а вот история о том, как мы загрузили в багажник 20 сумок!»).

Восемь: А разделять фотографии узкой белой полосой с двумя предложениями — просто запрещено.

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

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

Лонгрид — это не просто огромный объём букв. Лонгрид — это большая история

Десять: Под коммерческим лонгридом классно было бы увидеть форму обратной связи («Вопрос к дилеру/Оставьте ваш телефон для связи»), карту с местоположением автодилера, кликабельный номер телефона и почту. Но увы.

Итог

59.ru молодцы, что начали использовать формат лонгридов. Я действительно этому рад. Надеюсь, все эти мелкие правки будут приняты во внимание и следующие работы будут ещё круче и лучше (хотя этот лонгрид тоже поправить можно :-)). Ведь это влияет как на дочитываемость, так и на погружение в тему.

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

Все фото-материалы взяты с сайта 59.ru

Эффект отложенных проблем.

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

Пример создания сайта:
заказчик хотел сильно сэкономить, поэтому был выбран путь использования готовой CMS и шаблона, похожего на схему сайта (да, макета или прототипа не было). В итоге был куплен аккаунт на shared-хостинге, где сейчас крутится CMS, а сам сайт оставляет желать лучше как с визуальной, так и с технической точки зрения.
Вроде бы всё ничего — сайт-то работает, но!

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

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

Это я и называю «эффектом отложенных проблем».

Чтобы таких сложностей не возникало — нужно сразу же, «на берегу», объяснять заказчику чем чревата экономия сейчас и какие траты он понесёт в будущем.

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

Итог

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

 
UPD: пришло письмо на почту с просьбой объяснить ситуацию проще. Объясняю:
появилось в зубе небольшое отверстие (или небольшое чёрное пятнышко кариеса). Вроде бы надо сходить к стоматологу и вылечить, но тысячи рублей как-то жалко. И вот мы тянем до тех пор, пока зуб не начнёт крошиться или боль будет настолько сильная, что иного выхода, как посетить зубного врача, у нас не будет.
В итоге приходится платить за пломбу, за обезболивающие, за работу, тратить своё время на длительные посещения стоматологии.

Пятмуз.

У меня есть правило: никакой «электронщины».
Исключения из него: Darkside, Vibrasphere, Robin Schulz, Fish Go Deep, и New Retro Wave.

И сегодня речь о Робине Шульце, который, imho, умеет во всем так надоевшем tropical house.
 

 

“Does Anybody Remember Laughter?”

Интересный факт:
в 1973 году, на концерте в Нью-Йорке, Роберт Плант, пропев “And the forests will echo with laughter”, спрашивает у зала “Does anybody remember laughter?” («Кто-нибудь помнит смех?» — дословно). А спустя 44 года группа под названием Lunar Fiction выпускает альбом с названием... “Does anybody remember laughter?”

Совпадение? Не думаю. ©

Отметка по времени не прикрепляется, поэтому, кому интересно, 4 минута 10 секунда:

Политика и этот ваш интернет.

Две недели назад мне на почту свалилось письмо вот такого забавного содержания (сохранил орфографию и пунктуацию):

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

Отвечаю:
Этому, на мой взгляд, есть несколько причин.

  1. Кандидаты, в массе своей, мужчины в возрасте, далёкие от этих наших интернетов. А для того, чтобы понять как всё устроено — нужно время и человек, который объяснит. Видимо, нет времени или рядом с кандидатами нет людей, способных растолковать о чём речь.
  2. Интернет прочно ассоциируется с «молодёжью до 18». Но люди забывают, что молодёжь растёт и становится электоратом, что с ней надо работать в социальных сетях планомерно, начиная за 6-9 месяцев до выборов.
  3. Я не верю в выборы, всё украден... всё решено за нас. :-)

 

Хороший пример «медвежьей услуги» с заботой о внешнем виде — сайт пермского регионального отделения партии ЛДПР.

Возьмём страницу со статьёй:
на ней нет банального выравнивания элементов по сетке;
логотип прижат вплотную к основной текстовой подложке;

 
 
 

Кроме того, подписан автор новости и рубрикатор, хотя смысла в этом нет — везде «Администратор» и «Без рубрики».
На лицо проблемы с вёрсткой текста (мало воздуха, разрывы строк в тех местах, где это недопустимо, количество переносов больше трёх, и т. п.)

 
 
 

Попробуем оставить заявку в соответствующем разделе... Нет, формы для заявки нет (хотя готовый скрипт на php можно найти за 1-2 минуты в Google). Зато email указан:

 
 
 

Возможно, получится почитать газеты реготделения? Нет. Превью нет, а газеты представлены ссылка на pdf-файлы, которые открываются в (!) этом же окне. Дописать target=«_blank», видимо, не смогли.

 
 
 

С годом тоже немного промахнулись...

 
 
 

На странице «Контакты» указано два разных номера, но при нажатии звонок будет совершён на один и тот же номер телефона. Потому что в коде указан только один.

 
 
 

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

2017   дизайн

Как не надо делать [2]

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

 

Позволю себе вспомнить знаменитую «аксиому Эскобара»:

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

Здесь, конечно, речь о четырёх вариантах, но суть от этого не меняется. Пятый вариант, к слову, аналогичен.

Дизайн должен решать проблемы а не создавать их. Он должен быть эффективен.
Учитывая это, мы вспоминаем про правила «трёх секунд» и «одноразовости контакта».
Считывается за три секунды желание продать вкусную выпечку/купить вкусную булочку? Нет.
Захочется посмотреть на такую вывеску снова — визуально привлекательна ли она? Нет.
Подходит ли тон вывески как к пекарне, так и к аудитории? Нет.

Почему столько «нет»?

  1. Композиция (сложение из нескольких частей единого целого) отсутствует везде;
  2. наличие огромного количества визуального мусора (чем шире аудитория, тем проще должен быть дизайн-макет);
  3. проблемы с использованием цветов;
  4. проблемы с типографикой (отсутствие кёрнинга на каждом макете; попытка использовать моноширный шрифт там, где он неуместен, да и вообще с выбором шрифта очень огромные проблемы);
  5. проблемы с позиционированием («пекарня/кулинария/магазин»);
  6. ... и многое другое.

 
Что делать?

  1. Найти дизайнера;
  2. попросить у него бриф и заполнить его (станет понятна цель, текущая проблема, ЦА, и многое другое, что важно при создании макетов), внести аванс;
  3. дать дизайнеру возможность окунуться в мир булочек — показать цех, где готовится выпечка, показать саму пекарню и её месторасположение;
  4. угостить выпечкой и напоить горячим чаем (зависит от доброты заказчика);
  5. подождать несколько дней.
  6. получить хорошие макеты;
  7. расплатиться;
  8. получить исходники макетов.

 

Дизайн — это не операционные, а инвестиционные расходы. Но, почему-то, в Перми об этом забывают.
И экономят на самих себе.

Пятмуз.

О таких музыкантах, как Крис Ри, много не говорят.
Потому что их надо слушать.
До потёртостей на пластинке.

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

 

Дизайн и мир вокруг.

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

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

Дизайн — это целая вселенная, состоящая из галактик, которые состоят из систем. И всё это подчиняется определённым правилам и законам.
Дизайн — это творчество, вписанное в рамки этих правил. Или, при хорошем знании правил, не вписанное в эти рамки.

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

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

Для чего?

Возьмём «истинный» чёрный цвет (HEX: #000000). Такого цвета не существует в природе. Человеческий глаз видит не сами объекты и материи, а свет, отражающийся от них. А если быть совсем занудой, то зрительное восприятие устроено таким образом, что сетчатка глаза, на которой начинается обработка световых сигналов, чувствительна к электромагнитному излучению в диапазоне длин волн 400-500 Нанометров. А чёрный цвет, если вспомнить физику, это отсутствие световых волн. Кроме того, в сетчатке глаза присутствуют три вида «колбочек», которые чувствительны к красному, зелёному и, соответственно, синему участкам солнечного спектра. Но! Ещё есть «палочки» — они создают «ночное зрение» человека, т. е. позволяют видеть в условиях низкой освещённости. Правда, с ограничением по цветам: серый, белый и тёмно-серый.

Понимая, что «истинного» чёрного цвета мы никогда не увидим в природе, дизайнер подбирает цвет шрифта для новостного сайта тёмно-серым. Контраст тёмного-серого цвета и белого фона позволить меньше напрягаться глазам, а значит пользователям сайта будет легче воспринимать большие объёмы информации.

Хороший дизайнер — любознательный дизайнер.

Ранее Ctrl + ↓