Кирилл Беляев

о подаче информации, айдентике, интерфейсах и жизненной среде.
Посмотреть работы · Поддержать · Подписаться

Превью ссылок в соцсетях

Отлаживал их. Вдруг кому-то пригодится.

Картинке нужен абсолютный УРЛ, а не относительный.

Проверить, как покажет:

Телеграм

  • Первой строчкой в превью управляет метатег og:site_name. Если он идентичен og:title, останется только одна строка жирным.
  • Для большой картинки, неожиданно нужен метатег Твитера (а не Open Graph, как для всего остального):
<meta name="twitter:card" content="summary_large_image">

«Пробелы» на Продакт-ханте

У меня есть проект о пробелах — таблица с наиболее ходовыми пробелами, которые удобно копировать в буфер, чтобы потом вставлять в почти любой редактор — krll.me/s.

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

Хантер

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

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

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

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

  1. Написать ребятам из топ-100 хантеров и топ-50 создателей — yvoschaap.com/producthunt.
  2. Если из топ-списков никто не ответит, найди на ПХ продукты по близкой тематике, и посмотри, кто публиковал их. На странице каждого хантера есть ссылка на его твитер. Если там указан сайт, то можно поискать почту, но субъективно кажется, что через личные сообщения Твитера проще.

Публикация

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

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

Соцсети

Весь день запуска я публиковал посты в соцсетях и тематических сообществах в Фейсбуке и Телеграме, наподобие «Product Hunt в СНГ» и «Startup Product Launches». В части сообществ вход одобряет администратор, поэтому лучше постучаться заранее, чтобы в день запуска можно было уже публиковать. Для некоторых соцсетей у меня было заготовлено по несколько постов.

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

Повторю ещё один распространённый совет — разгрузите день публикации. Так будет проще отвечать на комментарии, ретвитить и рассказывать подробнее о проекте.

Ролик

Важным, как минимум для меня, был вот этот ролик:

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

Весь ролик сделал за 3,5 дня, часов за 15-20. Сначала написал сценарий и попросил помощи с английским, чтобы фразы были проще для произношения.

В кадре — моё рабочее место, чуть прибранное к съёмке. Я сидел в домашней толстовке с пятнами, она больше подошла по цвету просто.

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

Снимал и монтировал на десятый Айфон, только скринкаст — с ноутбука. Ещё был штатив с держателем для телефона. Свет был из окна, за окном — облачно.

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

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

Результаты

135 голосов в день публикации и 380 на момент выхода этой заметки, 10 место, фичер ПХ, плюс включение «Пробелов» в рассылку — заветное событие для многих стартаперов, как оказалось.

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

Минус заметил только один — увеличение почтового спама с предложениями всякого продвижения и прочего.

Вишенка

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

Логотип Роузи

Есть такой швейцарский стартап Dotphoton, он разрабатывает и имплементирует алгоритм сжатия исходников фотографий (RAW). Квантовая физика, патенты, всё серьёзно. Есть отделение для науки и бизнеса. И есть приложение для фотографов — Rawsie. Если вы храните терабайты фоток в RAW, то вам тоже есть смысл посмотреть Рóузи или задать вопросы Борису, оунеру продукта.

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

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

Эскиз, с которого ребята начали и результат, который сейчас используют:

Доработка знака улучшила читаемости в мелких размерах и звонкость (контраст и напряжение элементов). Для этого:

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

При этом знак поменялся не сильно. Циан — было, маджента — стало:

Я попросил написать пару слов о нашей работе, Борис не поскупился:

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

P. S. Приходите за дизайном или на консультации, которые, кстати, с Нового года станут дороже.

Айдентика для компании «Оракулум»

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

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

Чтобы не придумывать лишнего, процитирую Википедию:

Ора́кул (лат. oraculum, от oro — «говорю, прошу») — наиболее распространённая в античности форма прорицания, состоявшая в том, что предсказание от имени божества по запросу верующих оглашал специальный жрец, который и именовался оракулом.

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

Ещё чуть Википедии:

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

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

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

Презентации клиента для выступлений составляют порядка 200 слайдов. При таком количестве важны простые инструменты, дающие максимум разнообразия. Поэтому мы подобрали набор из 7 начертаний в рамках гарнитур «Halvar» и «Wremena», которые, оставаясь в рамках одного стиля, дают большую гибкость.

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

Вместе элементы работают так (и не только):

Проверка фирменного шрифта

Мне тут сказали, что стоит поделиться с вами этим советом.

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

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

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

Ранее Ctrl + ↓