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

Рабочие моменты

Позднее Ctrl + ↑

А можно заставку как в “True Detective”?

Зачастую люди не понимают, что сделать качественную заставку — долго, долго, долго и дорого. И ничего страшного в этом нет, люди не понимают многих вещей. Это нормально.

Но когда на днях пришло письмо от потенциального заказчика:

Здравствуйте, Илья! А помогите нам сделать заставку как в сериале «Настоящий детектив» для мероприятия с топами. Нужные такие же эффекты, легкая музыка и немного нуара. Желательно успеть до четверга!
Бюджет на ролик уже заложен, аванс 10 тысяч рублей и после согласования финала 30 тысяч!

я немного взгрустнул. Мало того, что работу предлагают сделать практически за бесплатно в режиме «ещё вчера», так даже изначально не спрашивают (и не гуглят), как такие продукты вообще создаются. Ну как же так-то?!

Если вы не смотрели сериал, то вот о какой заставке идёт речь:

А о том, как воплощали эту заставку в жизнь, можно почитать здесь. Да ещё и на русском языке.

Если вы посмотрели заставку, прочитали об истории её реализации, но всё равно не понимаете, почему нельзя проще... Хотя кого я обманываю? Можно проще. И получится как в пародии у одного отечественного сериала — ни смысла, ни акцентов, ни склеек, ни метафор, ни идеи, ни-че-го:

2018   видео   Рабочие моменты

«DNS для маленьких» или как устроены домены.

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

Что такое DNS?
Нет, это не только магазин.

DNS (Domain Name System) — глобальная распределённая система, разработанная в 1983 году, которая хранит в себе информацию о доменных зонах и именах.

«Отличное» определение. Теперь появились вопросы о каких-то именах и зонах. Но не волнуйтесь, всё просто. Посмотрите на иллюстрацию:

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

Для чего это нужно?

Различные сайты и сервисы живут на специальных компьютерах — серверах. И у каждого такого сервера есть свой адрес, который называется «ip-адресом». Более того, у каждого роутера (коробки дома, которая раздаёт Wi-Fi) и компьютера, работающих в Сети, есть ip-адрес.

К примеру, сервер yandex.ru имеет ip-адрес 77.88.55.50. Но кто будет заходить по такому адресу? Да и запоминать числа — сложно. Проще запомнить имя. Поэтому была придумана система DNS.

Домены и их ip-адреса

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

Типичная телефонная книга

Как работает DNS?

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

Пример 1:

вы заходите в браузер и вводите адрес etomoyzapros.ru

запрос через огонь, воду и медные трубы уходит к DNS-серверу вашего провайдера

DNS-сервер провайдера отвечает вам «etomoyzapros.ru имеет адрес 22.22.33.33»

немного магии и сайт открывается.

 
Пример 2:

вы заходите в браузер и вводите адрес etomoyzapros.ru

запрос через огонь, воду и медные трубы уходит к DNS-серверу вашего провайдера

DNS-сервер провайдера задумывается... «мне втирают какую-то дичь! Надо у старшего спросить»

запрос уходит к вышестоящему DNS-серверу (например, в Москву, к тому, кто отвечает за всю зону .RU)

вышестоящий DNS-сервер отвечает «etomoyzapros.ru имеет адрес 22.22.33.44»

DNS-сервер провайдера отвечает вам «etomoyzapros.ru имеет адрес 22.22.33.44»

сайт открывается.

Но имён, зон и ip-адресов очень много. Для быстрого обмена информацией и распределения нагрузки DNS-серверы решено было разделить на два вида:

  1. нерекурсивные — они не умеют выполнять полный поиск по всей системе доменных имен и ищут информацию в своём кэше;
  2. рекурсивные — умеющие выполнять полный поиск информации по всей системе доменных имен.

Пример:
Школьники вечерами сидят в Vk, смотрят видео на YouTube. Чтобы каждый раз не нагружать рекурсивные DNS-сервера — запросы об адресах этих сервисов остаются в кэше нерекурсивных DNS.

Как часто обновляется информация в DNS?

DNS-сервера обновляются не так быстро, как нам бы хотелось: корневые, отвечающие за зону .RU, обновляются 4 раза в сутки — в 2:00, 10:00, 14:00, 19:00 (время Москвы). DNS у провайдера могут обновляться раз в 4 часа или раз в 24, раз в 8 или раз в 12 часов. В общем, на усмотрение оператора связи. Именно поэтому при регистрации домена или любых корректировках в настройках DNS вы видите сообщения «Проверить доступность домена можно будет в течение 72 часов». За 72 часа информация о доменах и адресах точно успевает обновиться по всему миру. На моей практике такого не было ни разу. Максимум — 6 часов ожидания.

Аналогично и с настройками MX и CNAME для почты в DNS. Изменения внесли, а почтовый сервис их не видит. Дайте ему немного времени, он обновит информацию у своих DNS и даст вам возможность сделать привязку домена к почтовым ящикам.

Кэш DNS присутствует и в роутерах, и в компьютерах. Поэтому если вы меняете настройки домена, а спустя 3-4 часа не видите изменений, то перезагрузите роутер. В худшем случае — почистите кэш операционной системы.

Если возникнут вопросы — пишите мне, контакты в «шапке». :-)

А в следующей заметке расскажу о типах записей в DNS.

2018   DNS   Рабочие моменты

«Привет, контент-маркетинг!»

Не могу пройти мимо и не написать о контент-маркетинге. Тем более, что эта тема сегодня коснулась меня.

Приходит на почту письмо:

Илья, добрый день!
Меня зовут Василиса Петрова, на прошлом месте работы с Вами сотрудничали))
Остались Ваши контакты, знаю, что Вы занимаетесь продвижением ВК.
Хотелось бы узнать, на каких условиях)

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

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

«За CTR!»

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

Контент-маркетинг — создание и производство контента, который наносит пользу потребителям. Каналы его дистрибуции могут быть разными: социальные сети, нативная реклама (статьи в профильных СМИ), лонгриды, email-маркетинг и так далее, по накатанной.

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

«Чувак, ты достучался до моего сердца». © “Jay and Silent Bob Strike Back”

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

Для наглядности приведу пример:

Очередной хлам.

И такой:

Забота. Внимание. Любовь. Ну, или как-то так.

Контент-маркетинг — это проявление внимания к проблемам потребителей, обучение правильному использованию продукта (у Apple есть потрясающий портал по фотосъёмке на iPhone). И если в offline клиентский сервис выходит на первое место в чек-листах по конкуренции компаний с одинаковым набором услуг/продукции, то контент-маркетинг занимает подобную строчку в online уже не первый год. Так что, с подключением!)

P.S. Если кому-то нужен качественный контент-маркетинг, с отчётами и цифрами, то советую обратиться сюда.

2018   контент-маркетинг   Рабочие моменты

О деньгах.

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

  1. Если вы не умеете считать деньги, далеки от финансового планирования, подсчёта налогов и кадрового дела — смело ищите хорошего бухгалтера и посвящайте его во все фин. вопросы своего бизнеса. Врачу, адвокату и бухгалтеру врать не стоит.
  1. При подготовке договора на оказание услуг — обязательно проконсультируйтесь с юристом, который специализируется в правовом поле вашей сфере деятельности. Он точно выпытает из вас все нюансы работы организации и поможет верно сформулировать пункты, касающиеся оплаты услуг. В противном случае заказчик может заплатить спустя полгода условные 100 тысяч рублей и пени в размере 100 рублей. Нравится такое положение вещей? Мне — нет. (Крутые юридические компании проводят подобные индивидуальные консультации за тысячу рублей + отправляют «рыбу» договора на email. Так что лучше сэкономить на одном походе в KFC, чем потом страдать вопросом «чем платить налоги/зарплаты/аренду офиса/Интернет»?)
  1. В вашем деле есть партнёр? Рассказывайте ему всё, делитесь с ним мельчайшими деталями, которые касаются финансовых вопросов. Как известно, «одна голова хорошо, а две ещё лучше». Не будете делиться информацией — попадёте в очень неловкую ситуацию и подставите партнёра. Конечно же, делиться надо вовремя. Когда почки отказали... Ну, вы знаете.
  1. Когда вы просите финансовой поддержки у знакомых — детально рассказывайте о плане выплат, о процентах (если таковые предусмотрены), о рисках. Если вы понимаете, что день оплаты вот-вот настанет, а денег нет и не предвидится — сразу же предупредите доброго человека о том, что не сможете отдать деньги в срок. Согласен, новость окажется крайней неприятной. Главное — оставаться честным.
  1. Сотрудники хотят кушать — их кормить в самую первую очередь! Ведь именно они приносят компании доход.
  1. Не бойтесь включать в финансовый план пункт «обучение сотрудников». Мир меняется, технологии меняются, Илон Маск практически признался в том, что он марсианин. Без траты средств на обучение сотрудников компания, рано или поздно, начнёт вяло топтаться на месте. Произойдёт неизбежная стагнация, которая современному коммерческому бизнесу абсолютно не нужна.
    Кроме того, представьте, каково заказчику общаться с некомпетентным сотрудником? То-то и оно.
  1. Планируйте, планируйте и ещё раз планируйте. Оказавшись в сложной ситуации легче взглянуть на план, с умным видом вздохнуть и прикинуть, как распределять финансы дальше, в чём ужаться на пару месяцев, а во что вложиться временем.

P.S. На Т—Ж есть крутая статья о том, как считать прибыль — клик сюда.

2017   деньги   Рабочие моменты

Работа по предоплате.

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

Илья Бирман пишет, что нужно либо брать предоплату 100%, либо разбивать проект на этапе с полной предоплатой каждого. Поскольку 100% предоплату проекта взять не всегда получается — я пользуюсь второй частью совета. Кроме того, авансовая система оплаты положительно влияет на оперативность работы заказчика над проектом со своей стороны.

Финансово проект разбиваю так:

  • подписание договора — 30%;
  • готовые дизайн-макеты — ещё забираю 30%;
  • готовая вёрстка — забираю последние 40%;
  • готовый продукт — подписание акта выполненных работ/открытие бутылки шампанского/и т. д.

И никакой магии. У заказчика на руках готовый продукт, у исполнителя — деньги.

2017   Рабочие моменты

Ai в типографиях Перми.

Пермские типографии усердно предлагают услуги дизайна: наружка, визитки, бейджи и многое другое. Из этого можно сделать вывод, что там работают дизайнеры. Странные дизайнеры. Потому что отправляя очередной макет на печать в формате Adobe Illustrator начинаются звонки:
— А можете в корал перевести?
— Есть в корале макетик?
— У нас никто не умеет в Иллюстратор.
— Только в pdf не сохраняйте из Ai, вдруг вы про вылеты забыли...

Боль. Ну ок, давайте переведём все в CorelDraw. Хотя Ai для дизайнера в 2К18 такой же рабочий инструмент, как молоток или стамеска для плотника.

Но перевести в cdr недостаточно, ведь:
— Ой, а вы сохранили в версии X8, а у нас X6.

Один вопрос «а чего не X4-то?».
А ещё странно, что стоимость печати не меняется от того, оказывает ли типография предпечатную подготовку или нет.

2017   Рабочие моменты   типография

UX: Цифровая клавиатура.

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

 

А ведь в HTML5 есть замечательная возможность задать полю type=«number», чтобы сразу появлялась цифровая клавиатура (или полная цифровая клавиатура). Например, вот так мы с ребятами сделали для одного из наших заказчиков:
 

 

Интересно, что в приложении «Сбербанк-ОнЛайн» всё спроектировано нормально. Почему тогда в мобильной версии странички не сделали по-человечески?..
 

2017   UX   дизайн   Рабочие моменты

UX: ввод данных

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

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

И если для поколения Z это обычная практика, автоматика, то для более взрослой части поколения Y (1981-1985 г.р.) такие манипуляции уже сложны, нужно вырабатывать совершенно ненужную привычку. Для поколения X (1961-1981 г.р.) ввод данных в режиме «бланк — контроллер (мышь/клавиатура) — монитор» вообще является адовой штукой, от которой они спешат отказаться.

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

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

P.S. вот думаю, что стоит отказаться от использования «00» в цифровой клавиатуре. Может быть заменить знаком ← (Backspace)? Надо понаблюдать.
 

2017   UX   дизайн   Рабочие моменты

Золотое сечение как визуальная гармония.

Что такое «золотое сечение»?

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

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

Схематическое изображение золотого сечения и его формула.
 

Математика

Если рассматривать всё в математическом варианте, то процентное соотношение пропорций частей целого будет определяться как 62 на 38, а приблизительная величина золотого сечения равна 1,62 .
Многие из нас помнят последовательность Фибонначи (ага, именно та задача с популяцией кроликов), где следующее число равно сумме двух предыдущих — 1, 1, 2, 3, 5, 8, 13, 21 и так далее. Так вот в этой последовательности каждое последующее число больше предыдущего в 1,62 раза, а каждое предыдущее составляет около 0,618 от следующего.
Сейчас ряд Фибоначчи используют как математическую основу для расчётов пропорций золотого сечения.

In Real Life

Золотое сечение, как я уже писал, встречается в природе. И самый простой пример для демонстрации — это куриные яйца. Но это банально, поэтому покажу на котиках и цветке. :-)

 

Витрувианский человек

Человек и золотое сечение неотделимы.
Примерно в 1490-1492 годах Леонардо Да Винчи, взяв за основу тракты античного римского архитектора Витрувия о пропорциях тела, нарисовал «Витрувианского человека»:

Витрувианский человек как идеальный способ представления золотого сечения на... человеке

Рисунок, выполненный пером, чернилами и акварелью, является как научным трудом, так и произведением искусства. Интересно, что главный показатель золотого сечения — деление человеческого тела точкой пупа.
 

Музыка

Конечно, золотое сечение никак не могло обойти стороной музыку. Идеальным образцом для демонстрации является великолепное произведение Иогана Себастьяна Баха — Хроматическая фантазия и фуга.

Итак! «Хроматическая фантазия» написана в размере 4/4 (четыре доли, где каждая по длительности равна четвертной ноте) и имеет 79 тактов. Если умножить 79 на 4, то мы получим 316 четвертных долей. Прелюдия «фантазии» отделена от второй части произведения ферматой на третей четверти 49 такта. Умножаем 48 сыгранных тактов и прибавляем три четверти от 49-го. Получается, что конец прелюдии приходится на 195 четверть.
Соответственно, на вторую часть «Хроматической фантазии» приходится 121 четверть.
А теперь самое интересное:
316/195 = 195/121 = 1,6
Более того, если попытаться воспроизвести «ряд Фибоначчи» с данными числами, уменьшая их, согласно правилу, в 0,618 раз, то мы получим:
316 195 121

Итог

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

2017   дизайн   жизнь   Рабочие моменты

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

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

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

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

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

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

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

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

 
 

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

 
 

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

 
 

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

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

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

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

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

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

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

Итог

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

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

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

2017   дизайн   Рабочие моменты
Ранее Ctrl + ↓